Struggling with ARIA Roles and Azure Static Web Apps for WCAG Compliance
I'm stuck on something that should probably be simple. While developing an accessibility-focused web application hosted on Azure Static Web Apps, I've run into challenges ensuring that all components adhere to WCAG 2.1 standards. Specifically, I'm looking at how to effectively implement ARIA roles in a React application to improve screen reader support. I've been using the `@azure/static-web-apps` package for deployment, and after reading the official documentation, I tried to set `role` attributes on dynamic components that are rendered based on user interaction. Here's a snippet of what I currently have: ```javascript const CustomButton = () => { const handleClick = () => { // button action }; return ( <button role="button" aria-label="Submit" onClick={handleClick}>Submit</button> ); }; ``` This works fine for the button, but I've noticed that when I use complex components like modals, the screen reader doesn't announce their presence correctly. To address this, I wrapped my modal component with a `<div role="dialog" aria-labelledby="modal-title" aria-modal="true">` but still found that focus management was inconsistent. After consulting various resources, I learned about the `tabIndex` attribute to manage focus but applying it hasn't resolved the issues completely. Moreover, I've implemented a simple test using Lighthouse to measure accessibility, and it scores only 70 due to issues around roles and properties not being recognized as expected. I've also experimented with the `react-aria` library for better semantics, but I'm unsure how to combine that with existing components without a complete rewrite. Does anyone have experience with enhancing ARIA roles within Azure environments, particularly with React? Any best practices or patterns that ensure better compliance and user experience would be greatly appreciated. I’m especially interested in how to manage focus when opening and closing dialogs in a way that’s seamless for users relying on assistive technologies. I'm working on a CLI tool that needs to handle this. Is there a better approach? This is for a application running on macOS.