Add tabindex="0" whenever .overflow-*-{auto|scroll} are used for a11y

[julien-deramond]

Description

This PR adds tabindex="0" whenever .overflow-*-{auto|scroll} are used in the documentation or examples.

This ensures that the area is focusable with the keyboard on Chrome for instance.

We might add a note in the overflow utilities page about why tabindex="0" is needed 🤷

Motivation & Context

Boosted runs axe tests automatically. With the latest axe-core version (4.7.2), new tests have their impacts changed to serious and are now caught by our pa11y-ci:

scrollable-region-focusable: change impact to serious (dequelabs/axe-core#3959) (e3a5c21)
scrollable-region-focusable: skip native controls (dequelabs/axe-core#3862) (b0bdefa)

Here's the report on our side (which is the same as in Bootstrap):

Errors in http://localhost:9001/docs/5.3/utilities/overflow/:

 • Scrollable region must have keyboard access
   (https://dequeuniversity.com/rules/axe/4.7/scrollable-region-focusable?application=axeAPI)

   (html > body > div:nth-child(6) > main > div:nth-child(3) > div:nth-child(7)
   > div:nth-child(1))

   <div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 w-100 border"
   style="max-width: 200px; max-height: 100px; white-space: nowrap;">
   <div><code>.overflow-x-aut...</div>

 • Scrollable region must have keyboard access
   (https://dequeuniversity.com/rules/axe/4.7/scrollable-region-focusable?application=axeAPI)

   (html > body > div:nth-child(6) > main > div:nth-child(3) > div:nth-child(7)
   > div:nth-child(4))

   <div class="overflow-x-scroll p-3 bg-white w-100 border" style="max-width:
   200px; max-height: 100px;white-space: nowrap;">
   <div><code>.overflow-x-scr...</div>

 • Scrollable region must have keyboard access
   (https://dequeuniversity.com/rules/axe/4.7/scrollable-region-focusable?application=axeAPI)

   (html > body > div:nth-child(6) > main > div:nth-child(3) >
   div:nth-child(11) > div:nth-child(1))

   <div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 w-100 border"
   style="max-width: 200px; max-height: 100px;">
   <code>.overflow-y-auto</co...</div>

 • Scrollable region must have keyboard access
   (https://dequeuniversity.com/rules/axe/4.7/scrollable-region-focusable?application=axeAPI)

   (html > body > div:nth-child(6) > main > div:nth-child(3) >
   div:nth-child(11) > div:nth-child(4))

   <div class="overflow-y-scroll p-3 w-100 border" style="max-width: 200px;
   max-height: 100px;"> <code>.overflow-y-scroll</...</div>

To understand the error, please go to https://codepen.io/julien-deramond/pen/bGQxKej with Chrome and you'll see that without tabindex="0" the area isn't focusable with the keyboard. So the idea to fix it is to add this tabindex="0" where needed as explained by https://dequeuniversity.com/rules/axe/4.7/scrollable-region-focusable?application=axeAPI.

More context on Boosted side: Orange-OpenSource/Orange-Boosted-Bootstrap#2162 (comment)

ℹ️ Another PR will come to fix the .table-responsive usage in the same spirit

Type of changes

• A11y enhancement (non-breaking change which adds functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• (N/A) I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-38963--twbs-bootstrap.netlify.app/docs/5.3/utilities/overflow/
• https://deploy-preview-38963--twbs-bootstrap.netlify.app/docs/5.3/examples/dashboard
• https://deploy-preview-38963--twbs-bootstrap.netlify.app/docs/5.3/examples/dashboard-rtl
• https://deploy-preview-38963--twbs-bootstrap.netlify.app/docs/5.3/examples/cheatsheet-rtl

[patrickhlauke]

@julien-deramond been pondering this recently ... dequelabs/axe-core#3939 (comment)

[mdo]

Same as other PR. Feel free to merge once you're ready and settled with @patrickhlauke.