From 8b6d2cf9b48a53e413e86f57bf94ae9116941959 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Wed, 26 Jul 2023 22:02:56 +0200
Subject: [PATCH] Use `tabindex="0"` whenever `.table-responsive*` is used

---
 site/content/docs/5.3/content/tables.md          | 16 ++++++++++------
 .../docs/5.3/examples/dashboard-rtl/index.html   |  2 +-
 .../docs/5.3/examples/dashboard/index.html       |  2 +-
 .../content/docs/5.3/examples/pricing/index.html |  2 +-
 site/content/docs/5.3/layout/grid.md             |  2 +-
 site/layouts/shortcodes/bs-table.html            |  2 +-
 6 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md
index b75b233e12..c0285be372 100644
--- a/site/content/docs/5.3/content/tables.md
+++ b/site/content/docs/5.3/content/tables.md
@@ -305,7 +305,7 @@ Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<
 Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed.
 
 <div class="bd-example">
-  <div class="table-responsive">
+  <div class="table-responsive" tabindex="0">
     <table class="table align-middle">
       <thead>
         <tr>
@@ -340,7 +340,7 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
 </div>
 
 ```html
-<div class="table-responsive">
+<div class="table-responsive" tabindex="0">
   <table class="table align-middle">
     <thead>
       <tr>
@@ -665,6 +665,10 @@ You can also put the `<caption>` on the top of the table with `.caption-top`.
 
 Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`.
 
+{{< callout info >}}
+For accessibility reasons, we recommend in most cases using `tabindex="0"` with a `.table-responsive` to ensure a keyboard access when the content is scrollable.
+{{< /callout >}}
+
 {{< callout warning >}}
 ##### Vertical clipping/truncation
 
@@ -676,7 +680,7 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
 Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
 
 <div class="bd-example">
-  <div class="table-responsive">
+  <div class="table-responsive" tabindex="0">
     <table class="table">
       <thead>
         <tr>
@@ -735,7 +739,7 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
 </div>
 
 ```html
-<div class="table-responsive">
+<div class="table-responsive" tabindex="0">
   <table class="table">
     ...
   </table>
@@ -752,7 +756,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
 {{ range $.Site.Data.breakpoints }}
 {{ if not (eq . "xs") }}
 <div class="bd-example">
-  <div class="table-responsive{{ .abbr }}">
+  <div class="table-responsive{{ .abbr }}" tabindex="0">
     <table class="table">
       <thead>
         <tr>
@@ -813,7 +817,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
 {{< tables.inline >}}
 {{- range $.Site.Data.breakpoints -}}
 {{- if not (eq . "xs") }}
-<div class="table-responsive{{ .abbr }}">
+<div class="table-responsive{{ .abbr }}" tabindex="0">
   <table class="table">
     ...
   </table>
diff --git a/site/content/docs/5.3/examples/dashboard-rtl/index.html b/site/content/docs/5.3/examples/dashboard-rtl/index.html
index 6fb4a63aa9..d47b8c30cd 100644
--- a/site/content/docs/5.3/examples/dashboard-rtl/index.html
+++ b/site/content/docs/5.3/examples/dashboard-rtl/index.html
@@ -201,7 +201,7 @@ extra_js:
       <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
 
       <h2>عنوان القسم</h2>
-      <div class="table-responsive small">
+      <div class="table-responsive small" tabindex="0">
         <table class="table table-striped table-sm">
           <thead>
             <tr>
diff --git a/site/content/docs/5.3/examples/dashboard/index.html b/site/content/docs/5.3/examples/dashboard/index.html
index db84bd68d9..1ccbb8f053 100644
--- a/site/content/docs/5.3/examples/dashboard/index.html
+++ b/site/content/docs/5.3/examples/dashboard/index.html
@@ -200,7 +200,7 @@ extra_js:
       <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
 
       <h2>Section title</h2>
-      <div class="table-responsive small">
+      <div class="table-responsive small" tabindex="0">
         <table class="table table-striped table-sm">
           <thead>
             <tr>
diff --git a/site/content/docs/5.3/examples/pricing/index.html b/site/content/docs/5.3/examples/pricing/index.html
index 2f375b36d2..494c0f4202 100644
--- a/site/content/docs/5.3/examples/pricing/index.html
+++ b/site/content/docs/5.3/examples/pricing/index.html
@@ -91,7 +91,7 @@ extra_css:
 
     <h2 class="display-6 text-center mb-4">Compare plans</h2>
 
-    <div class="table-responsive">
+    <div class="table-responsive" tabindex="0">
       <table class="table text-center">
         <thead>
           <tr>
diff --git a/site/content/docs/5.3/layout/grid.md b/site/content/docs/5.3/layout/grid.md
index 1783410f98..0052b6f0d5 100644
--- a/site/content/docs/5.3/layout/grid.md
+++ b/site/content/docs/5.3/layout/grid.md
@@ -63,7 +63,7 @@ Bootstrap's grid system can adapt across all six default breakpoints, and any br
 
 As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints:
 
-<div class="table-responsive">
+<div class="table-responsive" tabindex="0">
   <table class="table mb-4">
     <thead>
       <tr>
diff --git a/site/layouts/shortcodes/bs-table.html b/site/layouts/shortcodes/bs-table.html
index 9eec109cb8..4880c7f2ee 100644
--- a/site/layouts/shortcodes/bs-table.html
+++ b/site/layouts/shortcodes/bs-table.html
@@ -4,6 +4,6 @@
 
 {{- $css_class := .Get 0 | default "table" -}}
 {{- $html_table := .Inner | markdownify -}}
-{{- $html_table = replace $html_table "<table>" (printf `<div class="table-responsive"><table class="%s">` $css_class) -}}
+{{- $html_table = replace $html_table "<table>" (printf `<div class="table-responsive" tabindex="0"><table class="%s">` $css_class) -}}
 {{- $html_table = replace $html_table "</table>" "</table></div>" -}}
 {{- $html_table | safeHTML -}}