“Package manager” tabs don’t navigate as expected and are missing `role=tabpanel` for their content

[knowler]

• The role=tablist element (i.e. the “tab list”) is labelled. Great job! People tend to miss this.
• The tab list should implement a roving tab index.
  • Tab lists are navigated with arrow keys usually in the direction of the list (i.e. aria-orientation=horizontal — the implicit default for a role=tablist).
  • The “tab” key isn’t used for navigating tabs within the list. It should navigate to and from the list.
  • Selection (i.e. aria-selected) doesn’t have to follow focus.
  • It’s fine to make the navigation wrap (e.g. arrowing towards the end at the end of the list wraps the focus to the start).
• There are no elements with a tabpanel role.
  • Usually we’d associate these with a tab button using aria-controls on the role=tab element. The role=tabpanel element can use aria-labelledby to reference the tab for its label.
  • Usually if there isn’t focusable content inside of the tab panel, we’d make the tab panel focusable using tabindex=0. In this case, it seems like there’s a copy button.

Here’s a simplified markup structure that we’re aiming for:

<div role=tablist>
  <button id=tab-npm type=button role=tab aria-selected=true aria-controls=tabpanel-npm>npm</button>
  <button id=tab-yarn type=button role=tab aria-selected=false tabindex=-1>yarn</button>
  <button id=tab-pnpm type=button role=tab aria-selected=false tabindex=-1>pnpm</button>
</div>
<div id=tabpanel-npm role=tabpanel aria-labelledby=tab-npm>
  <p>Content for npm</p>
</div>

[knowler]

Resolved by #406