Shell Center Row - Avoid placing inactive elements in the focus order - (2036570587)

[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: Shell Center Row - Avoid placing inactive elements in the focus order - (2036570587)
• Module: Shell Center Row
  Pattern: Keyboard-focusable-list items]

Issue
The below-mentioned content receives focus because it has been provided with tabindex="0" attribute which places them in the focus order.
Examples included:

• Item 1
• Item 2
• Item 3 of "A filter-enabled value list" section.

Occurrences
29 Shell and Shell Panel
30 Shell Center Row

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

<label aria-label="Item 1" class="label" tabindex="0"><div aria-checked="false" class="text-container" role="menuitemcheckbox"><span class="title">Item 1</span>

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

Compliant Code Example

<label aria-label="Item 1" class="label"><div aria-checked="false" class="text-container" role="menuitemcheckbox"><span class="title">Item 1</span>

---

Additional Resources:

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

[geospatialem]

calcite-shell-center-row will be deprecated in the near future once #7513 is fulfilled. Closing this issue out as it will be invalid with the deprecation and eventual removal of the component.