Tip, Tip Group and Tip Manager - Avoid placing inactive elements in the focus order - (2036570374)

[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: Tip, Tip Group and Tip Manager - Avoid placing inactive elements in the focus order - (2036570374)

• Module: Tip, Tip Group and Tip Manager
  Issue
  There are keyboard-focusable controls with tabindex="0". Examples include:

• Test 5. Tip Manager

• Natural Resources

• Test 6. Tip Manager with heading level

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

<section aria-hidden="false" class="container" tabindex="0">
 <header class="header">
   <h2 class="heading">Natural Resources</h2>
   <calcite-action class="close" appearance="solid" scale="m" calcite-hydrated="">
     <calcite-icon aria-hidden="true" icon="x" scale="m" calcite-hydrated=""></calcite-icon>
   </calcite-action>
 </header>
 <div class="tip-container" tabindex="0">
   (...)
 </div>
 <footer class="pagination">
   (...)
 </footer>
</section>

Suggestion
Avoid placing inactive elements in the focus order. Remove tabindex="0" from <section> and <

``` elements.

Compliant Code Example

<section aria-hidden="false" class="container">
 <header class="header">
   <h2 class="heading">Natural Resources</h2>
   <calcite-action class="close" appearance="solid" scale="m" calcite-hydrated="">
     <calcite-icon aria-hidden="true" icon="x" scale="m" calcite-hydrated=""></calcite-icon>
   </calcite-action>
 </header>
 <div class="tip-container">
   (...)
 </div>
 <footer class="pagination">
   (...)
 </footer>
</section>

---

Additional Resources:

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

[macandcheese]

This is planned to be deprecated following #6536

[geospatialem]

Closing per #7844 (comment)