Wp-calypso: Navigation: Accessibility: cannot reach sidebar navigation with a keyboard using tab focus

[alisterscott]

Originally raised by @designsimply

Paraphrasing:

1. All elements should have focus styles.
2. Focused elements should be visible (you shouldn't be able to tab through hidden elements).
3. Cannot tab into the main navigation because of Infinite scroll.

Steps to reproduce:

1. Log in to WordPress.com
2. Press Cmd+F5 or Fn+Cmd+F5 to turn on VoiceOver on a Mac
3. Go to https://wordpress.com/
4. Try to find the main navigation by using the tab key.
   Press Ctl+Opt+Down or Ctl+Opt+Up to enter or exit areas such as the toolbar.

Result: because of the way the elements are ordered, you must tab through all of the content before you can reach the main navigation. This makes it difficult to reach the main navigation on all Calypso pages but virtually impossible to reach the main navigation in the Reader because the infinite scroll area comes before the navigation area.

[amandarush]

Can also confirm same behavior on Windows with NVDA latest release and
Firefox latest release.

[stale[bot]]

This issue has been marked as stale because it hasn't been updated in a while. It will be closed in a week. If you would like it to remain open, can you please comment below and see what you can do to get things moving with this issue? Thanks! 🙏

[SiobhyB]

This is still an issue, changing from an "enhancement" to a "bug" as this prevents some people from being able to navigate WordPress.com.

[albacoretuna]

@alisterscott I sent a PR that addresses this: #22791

[albacoretuna]

This should be fixed now, via https://github.com/Automattic/wp-calypso/pull/22884