Skip to content

Commit ac831aa

Browse files
julien-deramondjulien-deramond
authored
Docs: add aria-hidden="true" to decorative SVGs (#40686)
1 parent 163f1f7 commit ac831aa

File tree

16 files changed

+35
-35
lines changed

16 files changed

+35
-35
lines changed

‎site/content/docs/5.3/examples/buttons/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,11 @@
4040
<div class="d-flex gap-2 justify-content-center py-5">
4141
<button class="btn btn-primary d-inline-flex align-items-center" type="button">
4242
Primary icon
43-
<svg class="bi ms-1" width="20" height="20"><use xlink:href="#arrow-right-short"/></svg>
43+
<svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
4444
</button>
4545
<button class="btn btn-outline-secondary d-inline-flex align-items-center" type="button">
4646
Secondary icon
47-
<svg class="bi ms-1" width="20" height="20"><use xlink:href="#arrow-right-short"/></svg>
47+
<svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
4848
</button>
4949
</div>
5050

‎site/content/docs/5.3/examples/dropdowns/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@
227227
<option value="December">December</option>
228228
</select>
229229
<button class="btn cal-btn" type="button" aria-label="next month">
230-
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
230+
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
231231
</button>
232232
</div>
233233
<div class="cal-weekdays text-body-secondary">
@@ -306,7 +306,7 @@
306306
<option value="December">December</option>
307307
</select>
308308
<button class="btn cal-btn" type="button" aria-label="next month">
309-
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
309+
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
310310
</button>
311311
</div>
312312
<div class="cal-weekdays text-body-secondary">

‎site/content/docs/5.3/examples/jumbotrons/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ <h1 class="text-body-emphasis">Jumbotron with icon</h1>
3030
<div class="d-inline-flex gap-2 mb-5">
3131
<button class="d-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill" type="button">
3232
Call to action
33-
<svg class="bi ms-2" width="24" height="24"><use xlink:href="#arrow-right-short"/></svg>
33+
<svg class="bi ms-2" width="24" height="24" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
3434
</button>
3535
<button class="btn btn-outline-secondary btn-lg px-4 rounded-pill" type="button">
3636
Secondary link

‎site/content/docs/5.3/examples/starter-template/index.html

+9-9
Original file line numberDiff line numberDiff line change
@@ -38,25 +38,25 @@ <h2 class="text-body-emphasis">Starter projects</h2>
3838
<ul class="list-unstyled ps-0">
3939
<li>
4040
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/icons-font" rel="noopener" target="_blank">
41-
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
41+
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
4242
Bootstrap npm starter
4343
</a>
4444
</li>
4545
<li>
4646
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/parcel" rel="noopener" target="_blank">
47-
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
47+
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
4848
Bootstrap Parcel starter
4949
</a>
5050
</li>
5151
<li>
5252
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/vite" rel="noopener" target="_blank">
53-
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
53+
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
5454
Bootstrap Vite starter
5555
</a>
5656
</li>
5757
<li>
5858
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/webpack" rel="noopener" target="_blank">
59-
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
59+
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
6060
Bootstrap Webpack starter
6161
</a>
6262
</li>
@@ -69,31 +69,31 @@ <h2 class="text-body-emphasis">Guides</h2>
6969
<ul class="list-unstyled ps-0">
7070
<li>
7171
<a class="icon-link mb-1" href="{{< docsref "/getting-started/introduction" >}}">
72-
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
72+
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
7373
Bootstrap quick start guide
7474
</a>
7575
</li>
7676
<li>
7777
<a class="icon-link mb-1" href="{{< docsref "/getting-started/webpack" >}}">
78-
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
78+
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
7979
Bootstrap Webpack guide
8080
</a>
8181
</li>
8282
<li>
8383
<a class="icon-link mb-1" href="{{< docsref "/getting-started/parcel" >}}">
84-
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
84+
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
8585
Bootstrap Parcel guide
8686
</a>
8787
</li>
8888
<li>
8989
<a class="icon-link mb-1" href="{{< docsref "/getting-started/vite" >}}">
90-
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
90+
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
9191
Bootstrap Vite guide
9292
</a>
9393
</li>
9494
<li>
9595
<a class="icon-link mb-1" href="{{< docsref "/getting-started/contribute" >}}">
96-
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
96+
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
9797
Contributing to Bootstrap
9898
</a>
9999
</li>

‎site/layouts/partials/examples/main.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
1515
{{ if (eq $i 0) }}<div class="row">{{ end }}
1616
{{ if $entry.external -}}
1717
<div class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
18-
<svg class="bi fs-5 flex-shrink-0 mt-1"><use xlink:href="#box-seam"></use></svg>
18+
<svg class="bi fs-5 flex-shrink-0 mt-1" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
1919
<div>
2020
<h3 class="h5 mb-1">
2121
<a class="d-block link-offset-1" href="{{ urls.JoinPath $.Site.Params.github_org $example.url }}" target="_blank" rel="noopener">
@@ -27,7 +27,7 @@ <h3 class="h5 mb-1">
2727
{{- $indexPath := default "index.html" $example.indexPath -}}
2828
{{- $stackBlitzUrl := printf "%s%s%s" (urls.JoinPath "https://stackblitz.com/github/twbs" $example.url) "?file=" ($indexPath | urlquery) }}
2929
<a class="icon-link small link-secondary link-offset-1" href="{{ $stackBlitzUrl }}" target="_blank" rel="noopener">
30-
<svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
30+
<svg class="bi flex-shrink-0" aria-hidden="true"><use xlink:href="#lightning-charge-fill"></use></svg>
3131
Edit in StackBlitz
3232
</a>
3333
</p>

‎site/layouts/partials/home/components-utilities.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<section class="pb-md-5 mb-5">
22
<div class="col-lg-8 mb-5">
33
<div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);">
4-
<svg class="bi fs-1"><use xlink:href="#menu-button-wide-fill"></use></svg>
4+
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
55
</div>
6-
<svg class="bi me-2 fs-2 text-body-secondary"><use xlink:href="#plus"></use></svg>
6+
<svg class="bi me-2 fs-2 text-body-secondary" aria-hidden="true"><use xlink:href="#plus"></use></svg>
77
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);">
8-
<svg class="bi fs-1"><use xlink:href="#braces-asterisk"></use></svg>
8+
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
99
</div>
1010
<h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility&nbsp;API</h2>
1111
<p class="lead fw-normal">
@@ -55,7 +55,7 @@ <h3 class="fw-semibold">Quickly customize components</h3>
5555
<p class="d-flex justify-content-start mb-md-0">
5656
<a href="/docs/{{ .Site.Params.docs_version }}/examples/#snippets" class="icon-link icon-link-hover fw-semibold">
5757
Explore customized components
58-
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
58+
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
5959
</a>
6060
</p>
6161
</div>
@@ -80,7 +80,7 @@ <h3 class="fw-semibold">Create and extend utilities</h3>
8080
<p class="d-flex justify-content-start mb-md-0">
8181
<a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/" class="icon-link icon-link-hover fw-semibold mb-3">
8282
Explore the utility API
83-
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
83+
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
8484
</a>
8585
</p>
8686
</div>

‎site/layouts/partials/home/css-variables.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<section class="row g-md-5 pb-md-5 mb-5 align-items-center">
22
<div class="col-lg-8 mb-5">
33
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-pink-rgb);">
4-
<svg class="bi fs-1"><use xlink:href="#braces"></use></svg>
4+
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#braces"></use></svg>
55
</div>
66
<h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with CSS&nbsp;variables</h2>
77
<p class="lead fw-normal">
@@ -10,7 +10,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with
1010
<p class="d-flex align-items-start flex-column lead fw-normal mb-0">
1111
<a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/" class="icon-link icon-link-hover fw-semibold mb-3">
1212
Learn more about CSS variables
13-
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
13+
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
1414
</a>
1515
</p>
1616
</div>

‎site/layouts/partials/home/customize.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<section class="col-lg-7 mb-5">
22
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-primary-rgb);">
3-
<svg class="bi fs-1"><use xlink:href="#palette2"></use></svg>
3+
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
44
</div>
55
<h2 class="display-5 mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass</h2>
66
<p class="lead fw-normal">
@@ -9,7 +9,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass
99
<p class="d-flex justify-content-start lead fw-normal">
1010
<a href="/docs/{{ .Site.Params.docs_version }}/customize/overview/" class="icon-link icon-link-hover fw-semibold">
1111
Learn more about customizing
12-
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
12+
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
1313
</a>
1414
</p>
1515
</section>

‎site/layouts/partials/home/get-started.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
22
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
3-
<svg class="bi fs-1"><use xlink:href="#code"></use></svg>
3+
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#code"></use></svg>
44
</div>
55
<h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you&nbsp;want</h2>
66
<p class="lead fw-normal">
@@ -9,7 +9,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you&nbsp;want</
99
<p class="d-flex justify-content-md-start justify-content-md-center lead fw-normal">
1010
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link icon-link-hover fw-semibold ps-md-4">
1111
Read installation docs
12-
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
12+
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
1313
</a>
1414
</p>
1515
</div>

‎site/layouts/partials/home/icons.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap&nbsp;
1010
<p class="d-flex justify-content-start lead fw-normal mb-md-0">
1111
<a href="{{ .Site.Params.icons }}" class="icon-link icon-link-hover fw-semibold">
1212
Get Bootstrap Icons
13-
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
13+
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
1414
</a>
1515
</p>
1616
</div>

‎site/layouts/partials/home/masthead.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol" rel="noopener" target="_blank">
55
<span class="d-sm-inline-flex align-items-center gap-1 py-2 px-3 me-2 mb-2 mb-lg-0 rounded-5 masthead-notice">
66
Get Security Updates for Bootstrap 3 &amp; 4
7-
<svg class="bi" style="width: 20px; height: 20px;"><use xlink:href="#arrow-right-short"></use></svg>
7+
<svg class="bi" style="width: 20px; height: 20px;" aria-hidden="true"><use xlink:href="#arrow-right-short"></use></svg>
88
</span>
99
</a>
1010
{{ partial "responsive-img" (dict "context" .

‎site/layouts/partials/home/plugins.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<section class="pb-md-5 mb-5">
22
<div class="col-lg-8 mb-5">
33
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-warning-rgb);">
4-
<svg class="bi fs-1"><use xlink:href="#plugin"></use></svg>
4+
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#plugin"></use></svg>
55
</div>
66
<h2 class="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without&nbsp;jQuery</h2>
77
<p class="lead fw-normal">
@@ -10,7 +10,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without
1010
<p class="d-flex justify-content-start lead fw-normal mb-md-0">
1111
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/" class="icon-link icon-link-hover fw-semibold">
1212
Learn more about Bootstrap JavaScript
13-
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
13+
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
1414
</a>
1515
</p>
1616
</div>

‎site/layouts/partials/home/themes.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Make it yours with official Bootstr
1010
<p class="d-flex justify-content-start lead fw-normal mb-md-0">
1111
<a href="{{ .Site.Params.themes }}" class="icon-link icon-link-hover fw-semibold">
1212
Browse Bootstrap Themes
13-
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
13+
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
1414
</a>
1515
</p>
1616
</div>

‎site/layouts/partials/icons/circle-square.svg

+1-1
Loading

‎site/layouts/partials/icons/droplet-fill.svg

+1-1
Loading

‎site/layouts/shortcodes/placeholder.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
{{- if $show_text }}%3Ctext%20x='50%25'%20y='50%25'%20fill='{{ replace $color "#" "%23" }}'%20dy='.3em'%3E{{ $text }}%3C/text%3E{{ end -}}
3737
%3C/svg%3E">
3838
{{- else -}}
39-
<svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice" focusable="false">
39+
<svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice">
4040
{{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
4141
<rect width="100%" height="100%" fill="{{ $background }}"/>
4242
{{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}

0 commit comments

Comments
 (0)