Notice - Avoid placing inactive elements in the focus order - (2036570066)

[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: Notice - Avoid placing inactive elements in the focus order - (2036570066)
• Module: Notice
  Issue
  The "Notice with tabindex" and "Notice message" non interactive content receives focus because it has been provided with tabindex="0" attribute which places them in the focus order.

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 slot="title" tabindex="0">Notice with tabindex</div>
<div slot="message" tabindex="0">Notice message</div>

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

Compliant Code Example

<div slot="title">Notice with tabindex</div>
<div slot="message">Notice message</div>

---

Additional Resources:

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

[macandcheese]

Can we close this one? This is a result of the configuration of slotted elements, nothing supplied by the component should do this.

[geospatialem]

Can we close this one? This is a result of the configuration of slotted elements, nothing supplied by the component should do this.

Good catch, yes, we can close, a tabindex was added in as a test to the audit, which is not the pattern we provide folks.