Open jonathan343 opened 1 year ago
Man, I feel a bit guilty that I've not had the free time to take a closer look at this before today. Thanks for doing this @jonathan343!
The only concern I have with this is that the keyboard focus being in the sidebars should expand them when the user moves focus to those regions.
Overview
This PR aims to improve the accessibility of the Furo theme for keyboard-only users. Specifically, it focuses on improving keyboard navigation, which is important for people who are unable to use a mouse or see the screen while interacting with a website using only their keyboard. This can be helpful for people with disabilities such as blindness, motor impairments, or cognitive impairments.
Issues
Currently, keyboard-only users are unable to open or close the left and right sidebars in the Furo theme. This is because the related input label icons cannot be tabbed to. Similarly, the sub-menus in the sidebars cannot be opened or closed with a keyboard.
In order to animate the sidebars when opening or closing, it seems like the original implementation applied a transition animation that simply moves the sidebar's position in or out of view from the screen. The problem here is that some content in the menus is still tab-able despite being "hidden" from the user. This provides a poor user experience since users can see what's in focus and Furo should ideally only allow users to tab to visible content.
Solutions
To make sidebars open and close using a keyboard only we can do the following:
labels
tab-able usingtabindex="0"
.To prevent focus-able elements that are not visible to users from being navigated to, we can do the following:
hide-sidebar
that doesvisibility: hidden
. It's important to note that in order to preserve the animation, we need to usesetTimeout(..., 250);
before applying thehide-sidebar
. If we didn't, the sidebar disappears instantly with no animation.hide-sidebar
class.Demo
Additional Notes
I believe this feature is a good addition for making furo more accessible. Here an additional improvement that could be made as a follow up:
Implement a focus trap This would restrict users from only being able to navigate through links inside an open menu. For example, we could start at the top most element and allow them to tab through until the last element is reached, then loop back to the top.
I believe these improvements would make the Furo theme even more accessible and user-friendly. Thank you for your consideration.