A11Y | State information missing on dropdown menu

[hilcurtis]

ID
1847345866

Violation
Ensure custom controls provide proper textual name, role, and state information

Module Name
03b Header Menu - Bottom Row

Description
[Issue]
The Dropdown menu button on responsive design with options Overview, Members, License etc.. custom control does not provide state information (i.e. "expanded", "collapsed", selected, current). It is converted form tab panel to dropdown on magnification to 200% and on responsive design, however it still posses the Tab Panels' aria role and properties.

[User Impact]
When controls do not provide name, role and/or state, screen reader users will not know their purpose and current state (if applicable).

[Code Reference]

<button class="js-subnav-expand subnav-expand ">
        <span class="js-subnav-current-label subnav-expand__current-label no-pointer inline-block margin-right-half margin-left-0">Overview</span>
        <svg class="subnav-expand-icon no-pointer" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
          <path fill="#FFF" d="M8 11.5l-7-7h14z"></path>
        </svg>
      </button>

Note
[Recommendation]
Ensure that all controls communicate name, state, and role. It is suggested first that native HTML elements be utilized as they will automatically have these attributes built in. When custom controls are used, the following will need to be managed.

State: For controls that have multiple states (such as checked, expanded, etc.), these states must be communicated to let the user know what will happen when they interact with it. ARIA can be used to communicate this, such as aria-checked, aria-expanded, aria-selected, etc.

The Tab Panel convert to the dropdown menu listbox. Developer should create the dropdown menu control using listbox markup for the responsive design and delete the aria roles and properties used for tab panel such as aria-controls="tabcontent", role="tablist", aria-controls etc. Developer should use listbox roles and properties as mentioned in https://www.w3.org/TR/wai-aria-practices/#listbox_roles_states_props and provide the associated keyboard support.

[Compliant Code Example]
None

[Recommended Reading]
More information about the listbox-collapsible can be found on the W3C website:

https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html