Make Components Comply to Accessibility Standards

[calebgasser]

Basically, do everything that radix is doing here.
https://www.radix-ui.com/primitives/docs/overview/accessibility

[cyanff]

Also, use Microsoft's A11y testing extension to easily identify key points where we need to improve.

https://accessibilityinsights.io/

[cyanff]

Here's a list of the most crucial A11y features that we need for 1.0

Keyboard Navigation
Action: Implement correct tabindex / focus traps across all components. Use JS Hooks for keyboard navigation (arrow keys).

Aria Attributes
Action: Incorporate aria-label, aria-hidden, and role attributes where needed.

Semantic HTML Structure
Action: Use semantic HTML elements where possible. (e.g., <header>, <nav>).

Alt Text for Images
Action: Make sure all components have an :rest, :global attribute.
This allow users of the component lib to pass in alt text and other DOM attributes.