# Header accessibility for search and hamburger

**URL:** https://meta.discourse.org/t/header-accessibility-for-search-and-hamburger/85193
**Category:** Bug
**Created:** [April 12, 2018, 9:29pm UTC](https://meta.discourse.org/t/header-accessibility-for-search-and-hamburger/85193 "2018-04-12T21:29:34Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Karl\_Romanowski](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/karl_romanowski/32/87676_2.png) [@Karl\_Romanowski](https://meta.discourse.org/u/Karl_Romanowski)
#### Post date: [April 12, 2018, 9:29pm UTC](https://meta.discourse.org/t/header-accessibility-for-search-and-hamburger/85193/1 "2018-04-12T21:29:34Z")

</div>

1. Visit a Discourse site, like [meta.discourse.org](http://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.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 13, 2018, 6:55am UTC](https://meta.discourse.org/t/header-accessibility-for-search-and-hamburger/85193/2 "2018-04-13T06:55:04Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [April 13, 2018, 6:59am UTC](https://meta.discourse.org/t/header-accessibility-for-search-and-hamburger/85193/3 "2018-04-13T06:59:49Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 13, 2018, 3:18pm UTC](https://meta.discourse.org/t/header-accessibility-for-search-and-hamburger/85193/4 "2018-04-13T15:18:31Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [April 13, 2018, 5:07pm UTC](https://meta.discourse.org/t/header-accessibility-for-search-and-hamburger/85193/5 "2018-04-13T17:07:22Z")

</div>

Just pushed a fix

[https://github.com/discourse/discourse/commit/a4b8813a02fe2e915df4c1ac407b6997d688367e](https://github.com/discourse/discourse/commit/a4b8813a02fe2e915df4c1ac407b6997d688367e)

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.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [April 13, 2018, 8:52pm UTC](https://meta.discourse.org/t/header-accessibility-for-search-and-hamburger/85193/6 "2018-04-13T20:52:26Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Karl\_Romanowski](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/karl_romanowski/32/87676_2.png) [@Karl\_Romanowski](https://meta.discourse.org/u/Karl_Romanowski)
#### Post date: [April 13, 2018, 8:57pm UTC](https://meta.discourse.org/t/header-accessibility-for-search-and-hamburger/85193/7 "2018-04-13T20:57:17Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [May 18, 2018, 3:48am UTC](https://meta.discourse.org/t/header-accessibility-for-search-and-hamburger/85193/8 "2018-05-18T03:48:12Z")

</div>


