Header accessibility for search and hamburger


(Karl Romanowski) #1
  1. Visit a Discourse site, like meta.discourse.org

  2. Press TAB, Discourse logo is highlighted.

  3. Press TAB, search gets focus but no visual cue.

  4. Press TAB, hamburger menu is skipped and avatar gets focus. Expected hamburger button to have focus.


(Jeff Atwood) #2

This is a valid point, we indeed don’t show tab-select selection outlines on search or hamburger @awesomerobot – but we do show it on the user avatar at upper right, immediately adjacent to the other two! I wonder if that’s intentional?


(Joffrey Jaffeux) #3

From the code it looks intentional. It’s btn-flat which has the css property outline: 0;. btn-flat was probably thought for other places (not sure what are the valid use of hiding outline if you are not having another visual feedback for focus?) and used here without thinking about this?


(Kris) #4

Yeah, looks like there was a general change to btn-flat for something else, and the header wasn’t updated.

Also, not sure why the hamburger isn’t selectable at all… seems like a different regression there. I’m looking at it now and will have fixes shortly.


(Kris) #5

Just pushed a fix

The hamburger menu wasn’t tabbable because it doesn’t have an href (I just added an empty one, which works fine).

For the other menu items, I set the :focus to be the same as :hover

There were a few items within the menus that weren’t tabbable, so I fixed those too.


(Jeff Atwood) #6

Confirmed looks good now to me, what do you think @Karl_Romanowski?


(Karl Romanowski) #7

Tabbing through the header works great now, turn around time on that was incredibly quick too!

The theme options don’t get focus on this site but that shouldn’t effect most installs.


(Sam Saffron) #8