Accessibility: Keyboard Navigation

[jonathan343]

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

1. 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.

2. 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

1. To make sidebars open and close using a keyboard only we can do the following:

• Add labels for closing left and right sidebars and make sure they're only visible when necessary.
• Make all labels tab-able using tabindex="0".

• Note: There are two different labels/icons for opening the right sidebar (for the table of contents). One thats displayed on medium sized screens and one thats displayed on smaller screens. This comes from Furo.

• Toggle input when a label is in focus and a user clicks "Enter".
• The correct label should be put in focus after opening or closing a sidebar.
  • Example: When we open the right side bar, the close icon should be focused on. When we close the sidebar, the open icon should be focused on. Same should happen for the left side bar. This feature is demonstrated in the section below.

2. To prevent focus-able elements that are not visible to users from being navigated to, we can do the following:

• Use an event listener that is attached to the inputs toggled when sidebars are opened and closed.
• When we detect a sidebar is closed, we can apply a CSS class called hide-sidebar that does visibility: hidden. It's important to note that in order to preserve the animation, we need to use setTimeout(..., 250); before applying the hide-sidebar. If we didn't, the sidebar disappears instantly with no animation.
• Use media queries to detect when a screen is resized to a larger screen and remove the 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.

[pradyunsg]

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.