rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-21 18:54:30 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source
This commit is contained in:
Julien Déramond 2023-07-26 22:02:56 +02:00
parent 2a1bf52b73
commit 8b6d2cf9b4
No known key found for this signature in database
GPG Key ID: DCD226672FC08F31
6 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
site/content/docs/5.3/content/tables.md
View File

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

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

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

2
site/content/docs/5.3/examples/dashboard/index.html
View File

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

2
site/content/docs/5.3/examples/pricing/index.html
View File

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

2
site/content/docs/5.3/layout/grid.md
View File

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

2
site/layouts/shortcodes/bs-table.html
View File

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