Accessibility Tab Highlight
Closed this issue · 4 comments
Linux Ubuntu 18.04
Google Chrome 71.0.3578.98 official build
On the accessibility documentation page, when pressing "tab" or "shift+tab" to highlight items on the page, the outlines in the navigation area (on the left) are not aligned to the proper item.
This is the expected behavior, which is properly working for the "introduction" navigation tag:
This is the behavior for the "download", "branding", and "javascript" navigation tags:
This is the behavior for the "accessibility" navigation tag:
Thanks for submitting this issue Jake! I've noticed this before but just haven't had the time to get around to fixing it. 😬 I can take a look into it soon!
As for expected behavior: the focus outline should completely wrap around the item in question (see focus outlines on other links or focusable elements on the page). I think this issue is coming from the overflow: hidden property currently on all accordion content containers, which is cutting off the rest of the outline.
Went ahead and put a fix up here: https://undernet-staging-pr-111.herokuapp.com (might be a minute before it shows up)
PR: #111
Pretty small change so if this looks good to you I can go ahead and merge 'er in. Won't release to production until a bit later though.
Hi, I’m on mobile but I’ll take a look at the functionality tonight
Looks great to me, feel free to merge that in. Pretty simple fix but it made a good difference in terms of accessibility.