Skip to content

docs: add aria-hidden='true' to decorative SVGs #40686

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
julien-deramond merged 1 commit into from
Aug 2, 2024
Merged

docs: add aria-hidden='true' to decorative SVGs #40686

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions site/content/docs/5.3/examples/buttons/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,11 @@
<div class="d-flex gap-2 justify-content-center py-5">
<button class="btn btn-primary d-inline-flex align-items-center" type="button">
Primary icon
<svg class="bi ms-1" width="20" height="20"><use xlink:href="#arrow-right-short"/></svg>
<svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
</button>
<button class="btn btn-outline-secondary d-inline-flex align-items-center" type="button">
Secondary icon
<svg class="bi ms-1" width="20" height="20"><use xlink:href="#arrow-right-short"/></svg>
<svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
</button>
</div>

Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.3/examples/dropdowns/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@
<option value="December">December</option>
</select>
<button class="btn cal-btn" type="button" aria-label="next month">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
</button>
</div>
<div class="cal-weekdays text-body-secondary">
Expand Down Expand Up @@ -306,7 +306,7 @@
<option value="December">December</option>
</select>
<button class="btn cal-btn" type="button" aria-label="next month">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
</button>
</div>
<div class="cal-weekdays text-body-secondary">
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/examples/jumbotrons/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ <h1 class="text-body-emphasis">Jumbotron with icon</h1>
<div class="d-inline-flex gap-2 mb-5">
<button class="d-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill" type="button">
Call to action
<svg class="bi ms-2" width="24" height="24"><use xlink:href="#arrow-right-short"/></svg>
<svg class="bi ms-2" width="24" height="24" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
</button>
<button class="btn btn-outline-secondary btn-lg px-4 rounded-pill" type="button">
Secondary link
Expand Down
18 changes: 9 additions & 9 deletions site/content/docs/5.3/examples/starter-template/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,25 +38,25 @@ <h2 class="text-body-emphasis">Starter projects</h2>
<ul class="list-unstyled ps-0">
<li>
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/icons-font" rel="noopener" target="_blank">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
Bootstrap npm starter
</a>
</li>
<li>
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/parcel" rel="noopener" target="_blank">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
Bootstrap Parcel starter
</a>
</li>
<li>
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/vite" rel="noopener" target="_blank">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
Bootstrap Vite starter
</a>
</li>
<li>
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/webpack" rel="noopener" target="_blank">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
Bootstrap Webpack starter
</a>
</li>
Expand All @@ -69,31 +69,31 @@ <h2 class="text-body-emphasis">Guides</h2>
<ul class="list-unstyled ps-0">
<li>
<a class="icon-link mb-1" href="{{< docsref "/getting-started/introduction" >}}">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
Bootstrap quick start guide
</a>
</li>
<li>
<a class="icon-link mb-1" href="{{< docsref "/getting-started/webpack" >}}">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
Bootstrap Webpack guide
</a>
</li>
<li>
<a class="icon-link mb-1" href="{{< docsref "/getting-started/parcel" >}}">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
Bootstrap Parcel guide
</a>
</li>
<li>
<a class="icon-link mb-1" href="{{< docsref "/getting-started/vite" >}}">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
Bootstrap Vite guide
</a>
</li>
<li>
<a class="icon-link mb-1" href="{{< docsref "/getting-started/contribute" >}}">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg>
<svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
Contributing to Bootstrap
</a>
</li>
Expand Down
4 changes: 2 additions & 2 deletions site/layouts/partials/examples/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
{{ if (eq $i 0) }}<div class="row">{{ end }}
{{ if $entry.external -}}
<div class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
<svg class="bi fs-5 flex-shrink-0 mt-1"><use xlink:href="#box-seam"></use></svg>
<svg class="bi fs-5 flex-shrink-0 mt-1" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
<div>
<h3 class="h5 mb-1">
<a class="d-block link-offset-1" href="{{ urls.JoinPath $.Site.Params.github_org $example.url }}" target="_blank" rel="noopener">
Expand All @@ -27,7 +27,7 @@ <h3 class="h5 mb-1">
{{- $indexPath := default "index.html" $example.indexPath -}}
{{- $stackBlitzUrl := printf "%s%s%s" (urls.JoinPath "https://stackblitz.com/github/twbs" $example.url) "?file=" ($indexPath | urlquery) }}
<a class="icon-link small link-secondary link-offset-1" href="{{ $stackBlitzUrl }}" target="_blank" rel="noopener">
<svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
<svg class="bi flex-shrink-0" aria-hidden="true"><use xlink:href="#lightning-charge-fill"></use></svg>
Edit in StackBlitz
</a>
</p>
Expand Down
10 changes: 5 additions & 5 deletions site/layouts/partials/home/components-utilities.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<section class="pb-md-5 mb-5">
<div class="col-lg-8 mb-5">
<div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);">
<svg class="bi fs-1"><use xlink:href="#menu-button-wide-fill"></use></svg>
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
</div>
<svg class="bi me-2 fs-2 text-body-secondary"><use xlink:href="#plus"></use></svg>
<svg class="bi me-2 fs-2 text-body-secondary" aria-hidden="true"><use xlink:href="#plus"></use></svg>
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);">
<svg class="bi fs-1"><use xlink:href="#braces-asterisk"></use></svg>
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility&nbsp;API</h2>
<p class="lead fw-normal">
Expand Down Expand Up @@ -55,7 +55,7 @@ <h3 class="fw-semibold">Quickly customize components</h3>
<p class="d-flex justify-content-start mb-md-0">
<a href="/docs/{{ .Site.Params.docs_version }}/examples/#snippets" class="icon-link icon-link-hover fw-semibold">
Explore customized components
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
</p>
</div>
Expand All @@ -80,7 +80,7 @@ <h3 class="fw-semibold">Create and extend utilities</h3>
<p class="d-flex justify-content-start mb-md-0">
<a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/" class="icon-link icon-link-hover fw-semibold mb-3">
Explore the utility API
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions site/layouts/partials/home/css-variables.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<section class="row g-md-5 pb-md-5 mb-5 align-items-center">
<div class="col-lg-8 mb-5">
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-pink-rgb);">
<svg class="bi fs-1"><use xlink:href="#braces"></use></svg>
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#braces"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with CSS&nbsp;variables</h2>
<p class="lead fw-normal">
Expand All @@ -10,7 +10,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with
<p class="d-flex align-items-start flex-column lead fw-normal mb-0">
<a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/" class="icon-link icon-link-hover fw-semibold mb-3">
Learn more about CSS variables
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions site/layouts/partials/home/customize.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<section class="col-lg-7 mb-5">
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-primary-rgb);">
<svg class="bi fs-1"><use xlink:href="#palette2"></use></svg>
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass</h2>
<p class="lead fw-normal">
Expand All @@ -9,7 +9,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass
<p class="d-flex justify-content-start lead fw-normal">
<a href="/docs/{{ .Site.Params.docs_version }}/customize/overview/" class="icon-link icon-link-hover fw-semibold">
Learn more about customizing
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
</p>
</section>
Expand Down
4 changes: 2 additions & 2 deletions site/layouts/partials/home/get-started.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
<svg class="bi fs-1"><use xlink:href="#code"></use></svg>
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#code"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you&nbsp;want</h2>
<p class="lead fw-normal">
Expand All @@ -9,7 +9,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you&nbsp;want</
<p class="d-flex justify-content-md-start justify-content-md-center lead fw-normal">
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link icon-link-hover fw-semibold ps-md-4">
Read installation docs
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion site/layouts/partials/home/icons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap&nbsp;
<p class="d-flex justify-content-start lead fw-normal mb-md-0">
<a href="{{ .Site.Params.icons }}" class="icon-link icon-link-hover fw-semibold">
Get Bootstrap Icons
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion site/layouts/partials/home/masthead.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<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">
<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">
Get Security Updates for Bootstrap 3 &amp; 4
<svg class="bi" style="width: 20px; height: 20px;"><use xlink:href="#arrow-right-short"></use></svg>
<svg class="bi" style="width: 20px; height: 20px;" aria-hidden="true"><use xlink:href="#arrow-right-short"></use></svg>
</span>
</a>
{{ partial "responsive-img" (dict "context" .
Expand Down
4 changes: 2 additions & 2 deletions site/layouts/partials/home/plugins.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<section class="pb-md-5 mb-5">
<div class="col-lg-8 mb-5">
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-warning-rgb);">
<svg class="bi fs-1"><use xlink:href="#plugin"></use></svg>
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#plugin"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without&nbsp;jQuery</h2>
<p class="lead fw-normal">
Expand All @@ -10,7 +10,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without
<p class="d-flex justify-content-start lead fw-normal mb-md-0">
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/" class="icon-link icon-link-hover fw-semibold">
Learn more about Bootstrap JavaScript
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion site/layouts/partials/home/themes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Make it yours with official Bootstr
<p class="d-flex justify-content-start lead fw-normal mb-md-0">
<a href="{{ .Site.Params.themes }}" class="icon-link icon-link-hover fw-semibold">
Browse Bootstrap Themes
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion site/layouts/partials/icons/circle-square.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion site/layouts/partials/icons/droplet-fill.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion site/layouts/shortcodes/placeholder.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
{{- if $show_text }}%3Ctext%20x='50%25'%20y='50%25'%20fill='{{ replace $color "#" "%23" }}'%20dy='.3em'%3E{{ $text }}%3C/text%3E{{ end -}}
%3C/svg%3E">
{{- else -}}
<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">
<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">
{{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
<rect width="100%" height="100%" fill="{{ $background }}"/>
{{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
Expand Down