clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-21 02:27:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Docs: add aria-hidden="true" to decorative SVGs (#40686)

Browse Source
This commit is contained in:
Julien Déramond 2024-08-02 10:18:29 +02:00 committed by GitHub
parent 163f1f732c
commit ac831aa4df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
site/content/docs/5.3/examples/buttons/index.html
View File

@ -40,11 +40,11 @@ body_class: ""
<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>

4
site/content/docs/5.3/examples/dropdowns/index.html
View File

@ -227,7 +227,7 @@ body_class: ""
<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">
@ -306,7 +306,7 @@ body_class: ""
<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">

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

@ -30,7 +30,7 @@ body_class: ""
<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

18
site/content/docs/5.3/examples/starter-template/index.html
View File

@ -38,25 +38,25 @@ title: Starter Template
<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>
@ -69,31 +69,31 @@ title: Starter Template
<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>

4
site/layouts/partials/examples/main.html
View File

@ -15,7 +15,7 @@
{{ 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">
@ -27,7 +27,7 @@
{{- $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>

10
site/layouts/partials/home/components-utilities.html
View File

@ -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">
@ -55,7 +55,7 @@
<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>
@ -80,7 +80,7 @@ $utilities: map-merge(
<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>

4
site/layouts/partials/home/css-variables.html
View File

@ -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">
@ -10,7 +10,7 @@
<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>

4
site/layouts/partials/home/customize.html
View File

@ -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">
@ -9,7 +9,7 @@
<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>

4
site/layouts/partials/home/get-started.html
View File

@ -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">
@ -9,7 +9,7 @@
<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>

2
site/layouts/partials/home/icons.html
View File

@ -10,7 +10,7 @@
<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>

2
site/layouts/partials/home/masthead.html
View File

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

4
site/layouts/partials/home/plugins.html
View File

@ -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">
@ -10,7 +10,7 @@
<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>

2
site/layouts/partials/home/themes.html
View File

@ -10,7 +10,7 @@
<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>

2
site/layouts/partials/icons/circle-square.svg
View File

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" focusable="false" viewBox="0 0 16 16">
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
<path d="M0 6a6 6 0 1112 0A6 6 0 010 6z"/>
<path d="M12.93 5h1.57a.5.5 0 01.5.5v9a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5v-1.57a6.953 6.953 0 01-1-.22v1.79A1.5 1.5 0 005.5 16h9a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0014.5 4h-1.79c.097.324.17.658.22 1z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 482 B

After

Width:  |  Height:  |  Size: 483 B

2
site/layouts/partials/icons/droplet-fill.svg
View File

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" focusable="false" viewBox="0 0 16 16">
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
<path fill-rule="evenodd" d="M8 16a6 6 0 006-6c0-1.655-1.122-2.904-2.432-4.362C10.254 4.176 8.75 2.503 8 0c0 0-6 5.686-6 10a6 6 0 006 6zM6.646 4.646c-.376.377-1.272 1.489-2.093 3.13l.894.448c.78-1.559 1.616-2.58 1.907-2.87l-.708-.708z" clip-rule="evenodd"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 494 B

After

Width:  |  Height:  |  Size: 495 B

2
site/layouts/shortcodes/placeholder.html
View File

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