Scrim - Avoid placing inactive elements in the focus order - (2036570142)

[dqateam]

Violation:

Avoid placing inactive elements in the focus order

WCAG Reference:

• 2.1.1 Keyboard

Severity:

5

Media Type:

Keyboard Accessibility

---

Areas for Remediation:

• Title: Scrim - Avoid placing inactive elements in the focus order - (2036570142)
• Module: Scrim
  Issue
  The following content receives focus because it has been provided with tabindex="0" attribute which places them in the focus order. The inactive element should not receive keyboard focus. Examples include:
• of Test 1. Scrim
• Test 3. Scrim with text.
• Test 5. Loading Scrim (advanced)

User Impact
Keyboard-only users will be able to navigate to this element even if it is off screen. Screen reader users will be able to focus this element if they press Tab, but they will be unable to determine its purpose.

Code Reference

<div tabindex="0" style="position: relative; width: 400px; height: 400px; padding: 25px">
       <calcite-scrim calcite-hydrated=""></calcite-scrim>
       <div style="width: 400px; height: 400px; overflow: auto">
         <p>
           Scrim is used to apply loading visualizations of top of specific sections of content.
         </p>
         
       </div>
     </div>

Suggestion
Developers should remove the tabindex="0" from the mentioned content so that it does not receive keyboard focus.

Compliant Code Example

<div style="position: relative; width: 400px; height: 400px; padding: 25px">
       <calcite-scrim calcite-hydrated=""></calcite-scrim>
       <div style="width: 400px; height: 400px; overflow: auto">
         <p>
           Scrim is used to apply loading visualizations of top of specific sections of content.
         </p>
         
       </div>
     </div>

---

Additional Resources:

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

[driskull]

Not sure if this is valid, the scrim doesn't set any tabindex

[macandcheese]

Agreed - this is a configuration error as shown in Code Reference.

[geospatialem]

Closing as mentioned in the above comments #7809 (comment) and #7809 (comment)