Shell and Shell Panel - Avoid placing inactive elements in the focus order - (2036570586)

[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 and Shell Panel - Avoid placing inactive elements in the focus order - (2036570586)
• Module: Shell and Shell Panel
  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.

[driskull]

I think this is for the pick-list? Its not a shell/panel thing.

[macandcheese]

Agreed - referenced code is not part of these components. Could we close this one?

[geospatialem]

This relates to our deprecated value-list, closing out as no effort is planned on the deprecated component.