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

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>

site/content/docs/5.3/examples/dashboard-rtl/index.html

@@ -201,7 +201,7 @@ <h1 class="h2">لوحة القيادة</h1>
       <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>

site/content/docs/5.3/examples/dashboard/index.html

@@ -200,7 +200,7 @@ <h1 class="h2">Dashboard</h1>
       <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>

site/content/docs/5.3/examples/pricing/index.html

@@ -91,7 +91,7 @@ <h1 class="card-title pricing-card-title">$29<small class="text-body-secondary f
 
     <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>

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>

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 -}}