Vocabulary: Hidden global header links should not be focusable

[obulat]

Description

Hidden elements in the global header should not be focusable, i.e. the user should not be able to tab to the links in the global header. Currently, a user can select a link in the global header using keyboard 'tab' key even when it is collapsed.

Reproduction

1. Click somewhere close to the 'donate' button in the footer.
2. Click 'tab'. In Chrome, you can see the link that is currently focused in the bottom left corner.
3. Click tab several times. The page will scroll to the top, and then you will start seeing that you are focusing on links in the global header.
   

Expectation

User should only be able to focus on elements in the global header when it is expanded. This can be achieved through setting the global header to display: none when it is collapsed. Another possible way is to set tabindex:-1 for all links in the global header when it is collapsed, and tabindex:0 when it is expanded.

Resolution

• [ ] I would be interested in resolving this bug.

[dhruvkb]

I'm not sure if that should be the behaviour. For people with visual impairments, it might be useful to allow the links to be focused by simply pressing Tab.

[obulat]

This is how I understand the behavior we want with keyboard navigation:

When the header is collapsed:

• You cannot navigate to the links inside the header by using keyboard 'tab'. When navigating using 'tab' you can only focus on the visible elements.
• You can focus on the 'Explore CC' button
• You can expand the header by clicking 'Enter' or 'Space' when 'Explore CC' is focused.

When the header is expanded:

• You can navigate through the global header links using 'tab'.
• You can focus on the 'Explore CC' button.
• You can collapse the global header by clicking 'Enter' or 'Space' when 'Explore CC' button is focused.

[zackkrida]

^ @obulat That behavior sounds correct to me! We don't want elements not visible on screen to be focusable.

[Yashs911]

@obulat I would like to work on this issue.

[Yashs911]

@obulat Adding visibility: hidden; when the header is collapsed and visibility: visible; when the header is expanded solves the problem.
Should I go ahead with this solution?
If not then what value should I use for opposite of display: none; as there is no literal opposite like visibility: hidden;

Instead of visibility: hidden; should I use visibility: collapsed;?