Integrating ARIA Attributes for Custom HTML Elements - Accessibility Concerns
I'm having a hard time understanding During development of a custom web component using LitElement (version 2.5), I’m trying to ensure that my elements are fully accessible. The component consists of a dropdown menu that utilizes a combination of custom `<my-dropdown>` and native `<button>` elements. I’ve added roles and ARIA attributes to help with this, but some screen readers still struggle to identify the dropdown correctly. Here’s a simplified version of how I'm configuring it: ```html <my-dropdown role="combobox" aria-haspopup="listbox" aria-expanded="false"> <button id="dropdown-button" aria-controls="dropdown-list">Select an option</button> <ul id="dropdown-list" role="listbox" aria-hidden="true"> <li role="option">Option 1</li> <li role="option">Option 2</li> </ul> </my-dropdown> ``` What I've tried so far includes: 1) ensuring that the button controls the dropdown list by matching the `aria-controls` attribute, 2) toggling the `aria-expanded` state on click events to reflect whether the dropdown is open or closed, and 3) managing the `aria-hidden` attribute on the list items based on the dropdown's state. Despite these implementations, screen reader users still report issues when interacting with the dropdown, particularly in Chrome and Firefox. I’ve also confirmed that the browser versions are up-to-date. My suspicion is that the way the dropdown is rendered or how the events are managed might not be triggering the correct accessibility notifications to assistive technologies. If anyone has insights or specific configurations that could resolve the accessibility issues with custom elements, it would be greatly appreciated. Are there additional ARIA practices I should be aware of, or perhaps a different approach to handle the event listeners for accessibility purposes? Any help would be greatly appreciated! Is there a simpler solution I'm overlooking?