Use tabindex="0" whenever .table-responsive* is used

[julien-deramond]

Description

This PR adds tabindex="0" whenever .table-responsive*s are used in the documentation or examples.

This ensures that the area is focusable with the keyboard (on Chrome for instance) when the tables don't fit and render a scrollbar.

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/content/tables/:

 • 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(86) > div)

   <div class="table-responsive"> <table class="table"> ...</div>

Errors in http://localhost:9001/docs/5.3/content/typography/:

 • 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 class="table-responsive"><table class="table"> <thead> <...</div>

This is also linked to #38963 because .table-responsive uses overflow: auto.

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.

You can also go directly to https://getbootstrap.com/docs/5.3/content/tables/#always-responsive in mobile mode and play with focus on Firefox and Chrome.

We can see that Firefox is smarter (probably because of -webkit-overflow-scrolling: touch) and allows the area to be focused only when needed.

However, for Chrome, there's no way (to my knowledge) to differentiate when there's a scroll or not. So the idea here is to use tabindex="0" all the time. It means that even in desktop mode, the keyboard focus is on the tables even if there's nothing to focus really. That's where I have doubts, but I got the feeling that having too much focus is better than not having it...

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

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-38971--twbs-bootstrap.netlify.app/docs/5.3/content/tables/#vertical-alignment
• https://deploy-preview-38971--twbs-bootstrap.netlify.app/docs/5.3/content/tables/#responsive-tables
• https://deploy-preview-38971--twbs-bootstrap.netlify.app/docs/5.3/examples/dashboard/
• https://deploy-preview-38971--twbs-bootstrap.netlify.app/docs/5.3/examples/dashboard-rtl/
• https://deploy-preview-38971--twbs-bootstrap.netlify.app/docs/5.3/examples/pricing/index.html
• https://deploy-preview-38971--twbs-bootstrap.netlify.app/docs/5.3/layout/grid/
• and all pages where we are using {{< bs-table >}} (that's a lot)

[patrickhlauke]

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

[mdo]

Feel free to merge once you're ready and settled with @patrickhlauke.