Affects Version/s: 3.0.15
Fix Version/s: 3.0.17
Sprint:UI - 2022-11
Quick search button should use the aria-expanded attribute and keep it in sync with the UI so that screen readers can tell if the quick search is activated or not.
The expand/collapse state of a toggle-type element is missing or is used incorrectly.
Element Name: The "Search" button.
Location of the element: At the top right corner of the main content.
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
When collapsible content is used, a screen reader user must be able to determine whether the collapsible content below the toggle element is in the expanded state or in the collapsed state.
- links to