Accessibility bug: feed tabs say they are tabs but they don't behave like tabs

[SleeplessByte]

Steps to Reproduce

1. Go to https://bsky.app/
2. Tab into the feed tablist
3. Try to use the arrow keys to move between the tabs
4. Try Home/End to move to the first or last tab
5. Expect assistive technology to act accordingly when a tab receives focus or a tab is highlighted

None of the above works.

List of issues I ran into trying to use the tabs, but be aware that this may not be a complete list:

• A tablist must adhere to Arrow left and Arrow right selecting respectively the previous or last tab. Wrap-around is expected
• The tablist should only have one tabstop (it has one for each tab right now)
• When a tab is selected (active), it should have aria-selected="true". When a tab is not selected (inactive) it should have aria-selected="false"
• Inactive tabs should not have a tab stop unless zero tabs are active (never the case for this platform).
• After activating a tab (enter), the next tab-stop should be the tabpanel
• Optional: Home should move focus to the first tab
• Optional: End should move focus to the last tab
• Highly recommended: Use button for each tab, not a div.
• Each tabpanel (feed) should be aria-labelledby the tab

Attachments

Here is the current HTML with relevant attributes for the tablist. I did not include any tabpanel because there are none.

<div role="tablist" data-testid="homeScreenFeedTabs">
  <div data-testid="homeScreenFeedTabs-selector">
    <div>
      <div role="tab" tabindex="0">
        <div>
          <div>Discover</div>
        </div>
      </div>
      <div role="tab" tabindex="0" data-testid="homeScreenFeedTabs-selector-1">
        <div>
          <div>Following</div>
        </div>
      </div>
      <div role="tab" tabindex="0" data-testid="homeScreenFeedTabs-selector-2">
        <div>
          <div>Mutuals</div>
        </div>
      </div>
      <div role="tab" tabindex="0" data-testid="homeScreenFeedTabs-selector-3">
        <div>
          <div>Game Dev</div>
        </div>
      </div>
    </div>
  </div>
  <div></div>
</div>

What platform(s) does this occur on?

Web (Desktop), Web (Mobile)

Device Info

Not relevant

What version of the app are you using?

Web

Additional Information

A lot of this is listed in the Aria: tab role documentation over at MDN, there is a decent preview at APG and a list of expected featres at the bottom of the overview page of APG.