[Accessibility] Page rating function is not keyboard-accessible

[hillaryfraley]

Description

The entire page rating function at the top-right of the docs pages is not keyboard-accessible. Also tested with macOS VoiceOver.

Category

This is an issue with:

• [ ] bug (bug in site build, layout, or functionality)
• [x] enhancement (add new or updated site functionality)

Affected pages

https://github.com/sensu/sensu-docs/blob/main/layouts/partials/contribute.html

Expected behavior

Users can navigate to the rating function on the page and select a rating using only their keyboard

Current behavior

Keyboard navigation (via tab button and via VoiceOver controls) skips from the end of the main content section to the first item in the right-nav menu

Changes needed

Unsure -- maybe add tabindex="0" to the divs.

[hillaryfraley]

I've done a little more investigation and testing.

If I add tabindex="0" to the div, I can tab to the entire ratings item but not to the individual rating options:

If I add tabindex="0" to the label for each rating option, I can tab to the individual rating options:

Even though I can navigate to each rating option with tab, I cannot select a rating option with the space bar or Enter key.

Adding tabindex="0" to the input tag for each rating option does not work (cannot tab to individual rating options).

Another issue is it seems the tabindex="0" should not be necessary for radio buttons to be keyboard accessible -- the type="radio" should be sufficient, but in this case it doesn't seem to be.