Modal - Avoid inappropriate use of ARIA roles, states, and properties - (2036570035)

[dqateam]

Violation:

Avoid inappropriate use of ARIA roles, states, and properties

WCAG Reference:

• 4.1.2 Name, Role, Value

Severity:

5

Media Type:

ARIA

---

Areas for Remediation:

• Title: Modal - Avoid inappropriate use of ARIA roles, states, and properties - (2036570035)
• Module: Modal
  Issue
  There is an element that makes use of ARIA attribute inappropriately.
  Examples include:
• aria-describedby used on modal unnecessarily that renders out all information of dialog.

User Impact
When inappropriate ARIA roles, states, and/or properties are used, screen reader users will mistake these elements for other control structures or the use may prevent users of assistive technology from interacting with the control.

Code Reference

<calcite-modal class="js-modal-s-s" width="s" scale="s" aria-labelledby="modal-title" aria-modal="true" role="dialog" background-color="white" calcite-hydrated="" aria-describedby="div-8a7145fe-6a57-f11e-3faa-f5a5b486953e" active="" open="">
       ....
</calcite-modal>

Suggestion
Developers must avoid inappropriate use of ARIA roles, states, and/or properties. Remove any unnecessary ARIA attributes.

Compliant Code Example

<calcite-modal class="js-modal-s-s" width="s" scale="s" aria-labelledby="modal-title" aria-modal="true" role="dialog" background-color="white" calcite-hydrated="" aria-describedby="div-8a7145fe-6a57-f11e-3faa-f5a5b486953e" active="" open="">
       ....
</calcite-modal>

---

Additional Resources:

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

[geospatialem]

We could explore adding a description property, similar to the accordion-item component, where the aria-describedby could add the component's description, if present.

[geospatialem]

Spike to determine feasibility/need for dialog, if needed and re-scope the above as needed.

[geospatialem]

In looking at cases with calcite-dialog with/without the modal attribute, the above appears to be mitigated. 🙌🏻

🔜 For the next a11y audit we'll conduct another module for testing, but in initial sleuthing the above is mitigated.

1. calcite-dialog: <calcite-dialog open heading="A heading" description="A description"> →

markup: <div aria-description="A description" aria-label="A heading" aria-modal="false" class="dialog dialog--opening-active" role="dialog" style="transform: translate(0px, 0px);">

2. calcite-dialog with modal: <calcite-dialog open modal heading="A heading" description="A description"> →

markup: <div aria-description="A description" aria-label="A heading" aria-modal="true" class="dialog dialog--opening-active" role="dialog" style="transform: translate(0px, 0px);">