mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-03 10:23:05 +02:00
Code Issues 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
16 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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