Fix Tab Order on Homepage #6492
Conversation
In response to - Accessibility bug: nearly impossible to login or sign up using a keyboard from the homepage bluesky-social#6369 Reordered elements in createNativeStackNavigatorWithAuth.tsx and added z-index: 1 to the LeftNav and RightNav elements.
|
This will also address |
| {isWeb && !showBottomBar && ( | ||
| <> | ||
| <DesktopLeftNav /> | ||
| <DesktopRightNav routeName={activeRoute.name} /> |
There was a problem hiding this comment.
Having the right sidebar before the main content would break the Focus Order guidelines though.
The left nav should definitely be first.
There was a problem hiding this comment.
Here's my justification for having it go LeftNav > RightNav > Feed.
WCAG 2.2
2.1.2: No Keyboard Trap
If the feed isn't last in the taborder, then the feed becomes a keyboard trap. With 'infinite-scroll' it's impossible to reliably reach the end of it.
2.4.3: Focus Order
From the supplement:
Goal
Keyboard users navigate content in a correct order.
What to do
Elements receive focus in an order that preserves meaning.
Why it's important
Navigating a site or application with only the keyboard will make sense.
This last point is especially important. "Navigating a site or application with only the keyboard will make sense."
Right now: it doesn't make sense, since it can't be done.
If we do LeftNav > Feed > RightNav, it would make sense (logically) because of our propensity to read from left-to-right, however it's not possible with the feeds configuration set to load infinitely.
I argue that with proper focus indicators, keyboard navigation in LeftNav > RightNav > Feed order would make the MOST sense given the purpose and nature of the feed block.
Since we cannot disable this feature (the infinite-scroll) with compromising the UX (of everyone, not just sighted users) then LeftNav > RightNav > Feed is arguably the best possible solution.
…av.tsx" Styles were removed, synced with my changes.
In response to -
Accessibility bug: nearly impossible to login or sign up using a keyboard from the homepage #6369
Reordered elements in createNativeStackNavigatorWithAuth.tsx and added z-index: 1 to the LeftNav and RightNav elements.