Double Keyboard Focus for Some Components

[joncameron]

Description

When using tab and shift+tab to navigate through the components on the Ramp demo site, there are some components that seem to acquire focus on an outer container rather than on the inner content, required multiple tabs to be able to use the arrow keys as intended.

To Reproduce

• Go to ramp.avalonmediasystem.org and tab through the components
• Upon reaching the tabbed navigation area, you can observe the two focuses for the component
• Shift+tabb to the structural navigation component to see it happen there as well (doesn't appear to do so the first time?)

Example

Expected Behavior

• [ ] There is no double focus on component containers

[joncameron]

Removing tabindex from unnecessary elements should resolve this.

[joncameron]

I'm still seeing this in Chrome, Safari and Firefox (Desktop versions on mac).

Chrome and Safari: after using tab to navigate to Details in the tabs wrapper, shift+tab to return to structured nav results in the double focus happening on the structured nav component Firefox: Still seeing the issue with double focus when initially using tab to navigate to Details in the tab wrapper

[Dananji]

@joncameron Ramp demo site was on the annotations keyboard navigation feature branch, so the fixes for this particular wouldn't have been there. I forgot to reset the demo site to main branch after we switched it last time. Apologies for that!

But, I tested this in Ramp demo instance locally on main branch and I was able to reproduce the first issue with Shift+Tab for structured navigation. However, I was not able to reproduce the second issue with the Details tab and tab wrapper. The steps I followed and the respective observations are as follows;

1. Tab through the tab order of the page
2. Once Details tab is reached, pressing Tab again moves focus from tab to tab panel containing the MetadataDisplay component
3. Next Tab press moves focus from the tab panel to the first link in the metadata display
4. Next Shift+Tab moves focus from the first link to the tab panel
5. Next Shift+Tab moves focus from the tab panel to Details tab

[joncameron]

No longer reproducible.