fix(tags): add screen reader improvements

[mukunku]

Summary

This PR addresses some accessibility gaps with regards to our Tags component and screen readers: https://stackoverflow.atlassian.net/browse/A11Y-89

It does the following:

• Makes sure tags are tabbable by appending tabindex when using <span>s instead of <a>s
• Make sure we have screen reader text for the dismiss button in our documentation
• Add screen reader text for the four different tag states: ignored, watched, moderator, required

How to Test

Confirm screen reader improvements in:

• Stacks Docs: https://deploy-preview-2045--stacks.netlify.app/product/components/tags/
• Stacks Svelte: https://deploy-preview-2045--stacks-svelte.netlify.app/?path=/docs/components-tag--docs

[changeset-bot]

🦋 Changeset detected

Latest commit: 2525502

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

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

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	2525502
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/691b6e320ab61500086d459b
😎 Deploy Preview	https://deploy-preview-2045--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	2525502
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/691b6e32e7052e00085222c8
😎 Deploy Preview	https://deploy-preview-2045--stacks-svelte.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[dancormier]

Thanks for tackling these accessibility improvements @mukunku ❤️ I'm 100% on board for the watched/ignored/etc updates and the addition of descriptive text for the dismiss button.

The only real reservation I have is the addition of tabindex="0" to tags that aren't interactive. Screen readers should be able to generally assist with informing the user of static text and should prioritize tabbing for interactive elements. Generally, I reserve it for either elements that are scrollable (like the code examples in the docs) or elements that are not interactive by default but made interactive via JS (this should almost always be avoided but exceptions occasionally arise).

Let me know if this makes sense or not, or if I'm misinterpreting the purpose

[dancormier]

Thanks @mukunku!