I have a screen reader accessibility issue with an editable custom Combobox with listbox popup widget in Safari. I have tested it with Mac's inbuilt Voiceover. The screen reader doesn't read the list item from the drop down. This custom Combobox is almost similar to the W3C demo component.
The Combobox widget has a multiline textbox field that displays a popup with a list of suggestions. I have followed all the necessary W3C accessibility guidelines to make it screen reader and keyboard accessible. The component is similar to the demo component on W3C website.
The following ARIA attributes are used in the Combobox:
role="combobox"
aria-expanded="false" (will be updated dynamically)
aria-haspopup="listbox"
aria-autocomplete="list"
aria-controls=<listbox id>
aria-owns=<listbox id>
The listbox/popup is a ul element with following ARIA attribute:
role="listbox"
The listbox/popup list options are the li elements with following ARIA attribute:
role="option"
W3C demo link: https://www.w3.org/WAI/ARIA/apg/example-index/combobox/grid-combo.html
Screen reader accessibility works fine on Chrome, Firefox and Brave browsers except Safari. Got the same results for W3C demo component. I tested it in Mac Monterey, safari version 15.3 and Mac Big Sur, safari version 14.1. I tried different ways by adding the role, and aria attribute to the parent but was not successful.
Is this a bug? What would be the best workaround?
Thank you in advance for your help.