Semantics - Removal of CSS

[katknow]

When removing the CSS from the page, a smaller, non-functional button called "toggle search" appears below the search bar. Additionally, if there is a carousel it loses all functionality.

[kimisgold]

Copying my response from the equivalent issue in cozy.

So I think the issue is actually targeting icons and ensuring they have text fallbacks of some kind. Turning off the CSS exposes this better: if the button doesn't have discernible meaning without the icon's presence, it becomes inaccessible. In the commit above, I've included text labels that are mainly exposed to screen readers, and the icons themselves are now in spans that are hidden from screen readers and should not be read out loud.

The search toggle button doesn't have a visible text label when you remove styles. While it did have an aria-label, I opted to give it a text label only viewable to screen readers when CSS is on. Should be ready for testing.

[aviannamiller]

From my perspective testing with VoiceOver on Chrome, the toggle search button is still discernible to the screenreader when CSS is off.

Additionally, when CSS is on, there is a focus order issue here. Once a user toggles the search bar open, tabbing does not bring focus to the search bar and instead skips down to the nav menu.