Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style fixes to help keyboard navigation #559

wants to merge 1 commit into
base: master


Copy link

ktbee commented Oct 27, 2019

Hello! Thank you for making such a nice free theme available. I noticed there were a couple of small fixes I could make to improve accessibility and keyboard navigation. My proposed changes:

  • Re-add default focus styling to the navbar toggle button so keyboard users can see when they've tabbed to the menu button on smaller screens. It looks like bootstrap.min.css had disabled it with outline:0.
  • Move CSS for showing nav link children out of a media query so that it affects desktop nav links as well. This is because when I tabbed to the dropdown nav link, I couldn't open the drop down by hitting the enter key.
  • Update JS comment to reflect new behavior.

Thanks again and looking forward to your thoughts on this!


This comment has been minimized.

Copy link

daattali commented Oct 27, 2019

Thanks for the great PR Katie (and also for your breakup advice site - "If you loved the wrong person this much, think how much you can love the right person", good service to a lot of people!)

Do you have your proposed changes implemented in a demo website where I can see exactly what it would look like?

By just looking at the code, I'm 100% happy with the second change that makes menus tab-able, neat. The first change because it would affect everyone, I'd want to see what it looks like. I certainly wasn't thinking about this sort of accessibility when I agreed to remove the hover effect on the menu button #256 (comment)


This comment has been minimized.

Copy link

ktbee commented Nov 5, 2019

Ha I'm glad you like the Breakup Survival Guide site @daattali! My friend @emilytheis had the inspiration and did a lot of the front end for that site :)

As for the outline styling, I can understand your hesitation to add that for all your users. I ran the site locally using jekyll serve, so I don't have a live version. If it helps though, I can set one up on Github pages. Also a less risky change would be to set this outline styling on just the focus state and not hover. I'm picturing something like:

.navbar-default button.navbar-toggle:focus {
  outline: 1px dotted #212121;
  outline: 5px auto -webkit-focus-ring-color;

Let me know if you prefer just the focus styling, and I'll set up a live version of my changes as well. Thanks!


This comment has been minimized.

Copy link

daattali commented Nov 5, 2019

Yes please do set up a fork with your proposed changes. And yes on focus only sounds less intrusive

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
2 participants
You can’t perform that action at this time.