Add ARIA attributes to improve accessibility

[stevepiercy]

Would the maintainers of Sphinx Design be interested in a pull request to add support for ARIA attributes to improve accessibility (a11y)? This would be specifically for the tab panel interface.

sphinxcontrib-httpexample implements dynamic ARIA attributes through JavaScript, injecting them on load, then changing them as various tabs are selected. See video for demo.

Screen.Recording.2024-08-17.at.2.33.57.PM.mov

As far as I know, the only way to have dynamic ARIA attributes is through JavaScript. According to the note on ARIA states and properties:

When not using semantic HTML elements for their intended purpose and default functionality, you must use JavaScript to manage behavior, focus, and ARIA states.

We could also implement initial ARIA states through Python, but I don't see the value in that extra work if it can already be done via JavaScript.

I'd appreciate your thoughts. Thank you!