In web ui
Trigger a search
Switch to queue view
Select an item in the list
=> Screen reader doesn't narrate the item as selected
Expected: selected item should leverage the aria-expanded property, and this property should be kept in sync with the UI.
<div class="vertical layout center">
<span class="list-item-title ellipsis">000291</span>
The expand/collapse state of a toggle-type element is missing or is used incorrectly.
Select item under Queue view
Homepage-> Select Search from Left Navigation-> Select 'Switch to Queue view'
NVDA is not narrating the state as 'Selected' for the list of options in Queue pane
Recommendation to fix
The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.
HOW TO FIX:
Fix this issue by using the aria-expanded attribute on the actionable toggle element (e.g. the <button> element) with a value of "true" (when the section is expanded) or "false" (when the section is collapsed).
<h3><button aria-expanded="true">When will I receive my refund?</button></h3>
<div class="faq-expanded">You should receive your refund within 5 business days....</div>
W3C ARIA Recommendation: https://www.w3.org/TR/wai-aria-1.1/#aria-expanded
The aria-expanded attribute is placed on the toggle element (not the content that is hidden/shown).