search

negomi / react-burger-menu

:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
http://negomi.github.io/react-burger-menu/
MIT License
5.05k stars 586 forks source link

A11y hamburger fixes #288

Closed lkopacz closed 5 years ago

lkopacz commented 5 years ago

What I've done here:

  1. Created a opacity: 0 span within the button, so that way when we focus the on the button itself the outline doesn't disappear and fixed the styling along with that.
  2. Created a method to focus on the first navigation link when you are opening the menu, and back on the hamburger button when you close it.
  3. To avoid tabbing things that are hidden, I have set the tabIndex of the hidden menu links to -1 on componentDidMount. Then on the toggleMenu method, I toggled the tabIndex so it's reachable by the keyboard.

Currently, # 2 is creating issues with the testing. I'm a bit newer to this testing framework, so feedback on how to fix that would be helpful. I've fixed the styling/descriptive text tests as best as I can.

negomi commented 5 years ago

Hi @lkopacz,

Thanks for this! I ended up simplifying your approach a bit and not re-focusing the burger icon on every close of the menu (because the user can just press tab again to re-focus it if they want), but this was a super helpful start.

lkopacz commented 5 years ago

Fantastic! I'm so glad :)