Accordion and Accordion Item - Ensure custom controls provide proper textual name, role, and state information - (2036569668)

[dqateam]

Module:

03 Accordion and Accordion Item

Violation:

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

WCAG Reference:

• 1.1.1 Non-text Content
• 4.1.2 Name, Role, Value

Instance ID:

2036569668

Severity:

7

Description:

[Issue]
Accordions lack full implementation, missing some roles and/or states information.

[User Impact]
Screen reader users will be unable to determine that these controls expand and collapse content. They will also have difficulty determining whether the controls are currently expanded or collapsed.

[Code Reference]

<calcite-accordion appearance="default" icon-position="end" icon-type="chevron" scale="m" selection-mode="single" calcite-hydrated=""> ... </calcite-accordion>

Note:

[Suggestion]
Ensure custom controls provide proper textual name, role, and state information.

For accordions, the following information is expected:

• Each accordion header must be enclosed in a <button> element.
• Each of these buttons must be enclosed in a heading element of an appropriate level. The <button> element must be the only child of this heading element.
• When the panel is visible, the header button must have aria-expanded="true". When it is hidden, the header button must have aria-expanded="false".
• The button must have aria-controls set to the ID of the panel container.
• If a panel is visible and locked in the expanded state, its header button must have aria-disabled="true".

In addition, it is recommended that container elements have a region role as it greatly increases accessibility for non-visual users. This is not required though. More information in the link below.

[Recommended Reading]
For more information about creating accessible accordions, please see the W3C Web Accessibility Initiative's ARIA Authoring Practices Guide: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

Media Type:

Custom Controls

Additional Resources:

• Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.

[github-actions]

It looks like this issue is missing some information:

• A codepen, codesandbox, or jsbin that reproduces the issue. Alternatively, a documentation sample can be used if the issue is reproducible. If you are experiencing build or Node related errors, please provide a GitHub repo for the sample.

Issues without reproduction samples may not be prioritized. If you were unable to create a sample, please try to answer any questions that arise once development begins. Thanks for your understanding.

[geospatialem]

The content isn't easily read back to assistive technology (AT). We should make sure when expanded/collapsed content can be accessed by AT.

[geospatialem]

Similar to https://codepen.io/geospatialem/pen/gOBveyL, to ensure AT users are able to receive context upon expansion/collapsing of accordion-item, we should add the following to the component:

• to the div above the slot
  • aria-live="polite"
  • role="region" and
  • unique id which can be linked in the div with a role="button" (below)
• to the div with a role="button"
  • an aria-labelledby using the id from the div above the slot (above)

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified on the main branch.