Tab aria selected

[OliverSpeir]

What

Instead of removing the aria-selected attribute, set it to false for the tabs that are not selected.

Why

When using VoiceOver (built in macos screenreader) if a tab does not have aria-selected="false" it is read as "selected", so right now starlight tabs are all read as selected making it confusing to know which one is actually selected

[changeset-bot]

🦋 Changeset detected

Latest commit: 71876ce

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@astrojs/starlight	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
starlight	✅ Ready (Inspect)	Visit Preview	Apr 8, 2024 1:45pm

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
starlight-i18n	⬜️ Ignored (Inspect)		Apr 8, 2024 1:45pm

[astrobot-houston]

Hello! Thank you for opening your first PR to Starlight! ✨

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any issues you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Vercel 🤩

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

[astrobot-houston]

size-limit report 📦

Path	Size
/index.html	6.1 KB (+0.07% 🔺)
/_astro/*.js	21.56 KB (+0.01% 🔺)
/_astro/*.css	13.45 KB (0%)

[delucis]

Thank you @OliverSpeir!

MDN’s aria-selected docs also says:

All inactive tabs in the tablist should have aria-selected="false" set.

So sounds like is indeed the correct behaviour. Appreciate the fix 💖

[HiDeoo]

Did a bit of manual testing, it looks like this regression was introduced somewhere along Big Sur (as Safari major versions are tied to macOS versions). To my knowledge, omitting aria-selected=false entirely was often a practice used to reduced the noise with some screen readers, e.g. to get X selected, Y, Z instead of X selected, Y not selected, Z not selected but I guess not really usable anymore.

Amazing find and fix 👍

[OliverSpeir]

To my knowledge, omitting aria-selected=false entirely was often a practice used to reduced the noise with some screen readers, e.g. to get X selected, Y, Z instead of X selected, Y not selected, Z not selected but I guess not really usable anymore.

That's a bummer this doesn't work anymore then, I agree not having Y not selected is significantly better UX

[delucis]

To my knowledge, omitting aria-selected=false entirely was often a practice used to reduced the noise with some screen readers

Ah, that is interesting. Thanks for sharing @HiDeoo. Something to monitor then, just in case this change actually makes for a worse experience. But definitely seems like an improvement over all tabs being announced as selected.

Thanks again @OliverSpeir 🙌