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.
______________________________
Source Code
<div class="list-item-info">
<div class="vertical layout center">
<nuxeo-document-thumbnail></nuxeo-document-thumbnail>
</div>
<span class="list-item-title ellipsis">000291</span>
</div>
Description
The expand/collapse state of a toggle-type element is missing or is used incorrectly.
Element Name:
Select item under Queue view
Location:
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
RULE :
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>
REFERENCE:
W3C ARIA Recommendation: https://www.w3.org/TR/wai-aria-1.1/#aria-expanded
BACKGROUND:
The aria-expanded attribute is placed on the toggle element (not the content that is hidden/shown).