mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

Rename sr-only/sr-only-focusable (#31139)

Browse Source 
* Rename `sr-only`/`sr-only-focusable`

To be more representative of the fact that these are not necessarily "screen reader" specific, but actually apply to assistive technologies in general (and also things like Alexa/Siri/etc). Goes hand-in-hand with #31133

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Patrick H. Lauke
2020-07-03 12:38:11 +01:00
committed by GitHub
parent 0a6cf9036c
commit 10690dd317
21 changed files with 104 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.0/components/badge.md
+1 -1
View File
@@ -34,7 +34,7 @@ Unless the context is clear (as with the "Notifications" example, where it is un
{{< example >}}
<button type="button" class="btn btn-primary">
Profile <span class="badge bg-secondary">9</span>
<span class="sr-only">unread messages</span>
<span class="visually-hidden">unread messages</span>
</button>
{{< /example >}}
site/content/docs/5.0/components/carousel.md
+10 -10
View File
@@ -63,11 +63,11 @@ Adding in the previous and next controls:
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<span class="visually-hidden">Next</span>
</a>
</div>
{{< /example >}}
@@ -96,11 +96,11 @@ You can also add the indicators to the carousel, alongside the controls, too.
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<span class="visually-hidden">Next</span>
</a>
</div>
{{< /example >}}
@@ -141,11 +141,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<span class="visually-hidden">Next</span>
</a>
</div>
{{< /example >}}
@@ -169,11 +169,11 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<span class="visually-hidden">Next</span>
</a>
</div>
{{< /example >}}
@@ -197,11 +197,11 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
<span class="visually-hidden">Next</span>
</a>
</div>
{{< /example >}}
site/content/docs/5.0/components/dropdowns.md
+18 -18
View File
@@ -148,7 +148,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@@ -161,7 +161,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group">
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@@ -174,7 +174,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@@ -187,7 +187,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@@ -200,7 +200,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@@ -213,7 +213,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@@ -230,7 +230,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@@ -263,7 +263,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<div class="btn-group ml-2">
<button type="button" class="btn btn-lg btn-secondary">Large split button</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@@ -290,7 +290,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<div class="btn-group ml-2">
<button type="button" class="btn btn-sm btn-secondary">Small split button</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@@ -318,7 +318,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
Large split button
</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
@@ -339,7 +339,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
Small split button
</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
@@ -371,7 +371,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@@ -400,7 +400,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
@@ -430,7 +430,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
<span class="visually-hidden">Toggle Dropright</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@@ -459,7 +459,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
<span class="visually-hidden">Toggle Dropright</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
@@ -487,7 +487,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
<span class="visually-hidden">Toggle Dropleft</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
@@ -518,7 +518,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
<span class="visually-hidden">Toggle Dropleft</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
@@ -754,7 +754,7 @@ Use `data-offset` or `data-reference` to change the location of the dropdown.
<div class="btn-group">
<button type="button" class="btn btn-secondary">Reference</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<li><a class="dropdown-item" href="#">Action</a></li>
site/content/docs/5.0/components/pagination.md
+4 -4
View File
@@ -62,7 +62,7 @@ While the `.disabled` class uses `pointer-events: none` to _try_ to disable the
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
<a class="page-link" href="#">2 <span class="visually-hidden">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
@@ -84,7 +84,7 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
<li class="page-item active" aria-current="page">
<span class="page-link">
2
<span class="sr-only">(current)</span>
<span class="visually-hidden">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
@@ -105,7 +105,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
<li class="page-item active" aria-current="page">
<span class="page-link">
1
<span class="sr-only">(current)</span>
<span class="visually-hidden">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
@@ -120,7 +120,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
<li class="page-item active" aria-current="page">
<span class="page-link">
1
<span class="sr-only">(current)</span>
<span class="visually-hidden">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
site/content/docs/5.0/components/spinners.md
+15 -15
View File
@@ -10,7 +10,7 @@ toc: true
Bootstrap "spinners" can be used to show the loading state in your projects. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.
For accessibility purposes, each loader here includes `role="status"` and a nested `<span class="sr-only">Loading...</span>`.
For accessibility purposes, each loader here includes `role="status"` and a nested `<span class="visually-hidden">Loading...</span>`.
## Border spinner
@@ -18,7 +18,7 @@ Use the border spinners for a lightweight loading indicator.
{{< example >}}
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
{{< /example >}}
@@ -30,7 +30,7 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c
{{< spinner.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="spinner-border text-{{ .name }}" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
{{- end -}}
{{< /spinner.inline >}}
@@ -46,7 +46,7 @@ If you don't fancy a border spinner, switch to the grow spinner. While it doesn'
{{< example >}}
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
{{< /example >}}
@@ -56,7 +56,7 @@ Once again, this spinner is built with `currentColor`, so you can easily change
{{< spinner.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="spinner-grow text-{{ .name }}" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
{{- end -}}
{{< /spinner.inline >}}
@@ -72,7 +72,7 @@ Use [margin utilities][margin] like `.m-5` for easy spacing.
{{< example >}}
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
{{< /example >}}
@@ -85,7 +85,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
{{< example >}}
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
</div>
{{< /example >}}
@@ -102,7 +102,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
{{< example >}}
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
</div>
{{< /example >}}
@@ -112,7 +112,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
{{< example >}}
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
</div>
{{< /example >}}
@@ -123,10 +123,10 @@ Add `.spinner-border-sm` and `.spinner-grow-sm` to make a smaller spinner that c
{{< example >}}
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
{{< /example >}}
@@ -134,10 +134,10 @@ Or, use custom CSS or inline styles to change the dimensions as needed.
{{< example >}}
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</div>
{{< /example >}}
@@ -148,7 +148,7 @@ Use spinners within buttons to indicate an action is currently processing or tak
{{< example >}}
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
@@ -159,7 +159,7 @@ Use spinners within buttons to indicate an action is currently processing or tak
{{< example >}}
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>