Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Make sure hamburger menu is accessible by keyboard navigation #14
Hello! Thank you for making such a lovely, clean looking theme.
I am currently using Ed for my blog and noticed that I could make some improvements to the accessibility of its hamburger menu. With the current version, you can't navigate to the menu using the keyboard. If you're not familiar with this idea, I'm using tab navigation and based my changes on these sorts of guidelines.
Proposed changes in this PR:
Chrome has the most obvious focus highlighting out of the box, so you may want to tab through it in Chrome.
Thanks again for this theme! Looking forward to your thoughts on this.
Hi again, Katie.
This looks like a good start. I’ve found a few issues that need to be cleared up, and a few while-we’re-at-it enhancements.
Let me know if you’re interested in running with any of these; otherwise I will fork your branch and incorporate your work before merging it fully into Ed’s
For my own part, I’m going to do some research and see if anyone has come up with a way to make a
Thanks for taking a look @karlstolley! I'd be happy to keep going with these changes, if you don't mind it taking me a few days. Some thoughts on your points:
Oh good point, I hadn't thought about how the menu could work without a button. That's clever using a label and checkbox instead.
Good to know, I'll experiment and see if I can get the styling and tab navigation to work outside of the header. The reason I moved the button was because I was finding that some of it's positioning styling (I believe
Good point! I'll add those
Whoops, I've been spoiled by Babel. I can make that a regular function.
Ah gotcha, that makes a lot of sense I had a feeling I was missing why the event was on the document and checking the target. I can re-add that functionality.
@karlstolley I made most of your requested changes, if you don't mind taking another look. I also added a small amount of focus state styling to the menu toggle since I got tired of straining to see if it was focused in Firefox. I can take it out though, if it's something that might interfere with the Ed theme. A couple of follow things/questions I wanted to point out: