Panel - Avoid placing inactive elements in the focus order - (2036570075)

[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: Panel - Avoid placing inactive elements in the focus order - (2036570075)
• Module: Panel
  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:
• Test 3. Dismissible Panel

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

<article aria-busy="false" class="container" tabindex="0"><header class="header"><div class="header-content"><h3 class="heading">River</h3>
(...)
</article>

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

Compliant Code Example

<article aria-busy="false" class="container"><header class="header"><div class="header-content"><h3 class="heading">River</h3>
(...)
</article>

---

Additional Resources:

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

[driskull]

Scrollable region must have keyboard access

https://dequeuniversity.com/rules/axe/4.8/scrollable-region-focusable

Any scrollable area (HTML element that has one of the following CSS properties: overflow, overflow-x, or overflow-y set to auto or scroll) should be focusable for keyboard-only users to be able to get to it and scroll its content.

Closing as invalid.