From 8bb68b04b35765c30038923bd620ee28b21553c8 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Wed, 13 Jul 2022 22:31:15 +0100 Subject: [PATCH] Add accNames to all progress bar examples (#36732) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Julien Déramond Co-authored-by: Abdullah Alaqeel --- site/content/docs/5.2/components/progress.md | 50 ++++++++++--------- .../5.2/examples/cheatsheet-rtl/index.html | 14 +++--- .../docs/5.2/examples/cheatsheet/index.html | 14 +++--- site/content/docs/5.2/utilities/position.md | 2 +- 4 files changed, 42 insertions(+), 38 deletions(-) diff --git a/site/content/docs/5.2/components/progress.md b/site/content/docs/5.2/components/progress.md index 8fbba3be77..aa793683b5 100644 --- a/site/content/docs/5.2/components/progress.md +++ b/site/content/docs/5.2/components/progress.md @@ -13,25 +13,25 @@ Progress components are built with two HTML elements, some CSS to set the width, - We use the `.progress` as a wrapper to indicate the max value of the progress bar. - We use the inner `.progress-bar` to indicate the progress so far. - The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width. -- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible. +- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar). Put that all together, and you have the following examples. {{< example >}}
-
+
-
+
-
+
-
+
-
+
{{< /example >}} @@ -39,7 +39,7 @@ Bootstrap provides a handful of [utilities for setting width]({{< docsref "/util {{< example >}}
-
+
{{< /example >}} @@ -49,7 +49,7 @@ Add labels to your progress bars by placing text within the `.progress-bar`. {{< example >}}
-
25%
+
25%
{{< /example >}} @@ -59,10 +59,10 @@ We only set a `height` value on the `.progress`, so if you change that value the {{< example >}}
-
+
-
+
{{< /example >}} @@ -72,28 +72,32 @@ Use background utility classes to change the appearance of individual progress b {{< example >}}
-
+
-
+
-
+
-
+
{{< /example >}} +{{< callout info >}} +{{< partial "callout-warning-color-assistive-technologies.md" >}} +{{< /callout >}} + ## Multiple bars Include multiple progress bars in a progress component if you need. {{< example >}}
-
-
-
+
+
+
{{< /example >}} @@ -103,19 +107,19 @@ Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gra {{< example >}}
-
+
-
+
-
+
-
+
-
+
{{< /example >}} @@ -125,7 +129,7 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro {{< example >}}
-
+
{{< /example >}} diff --git a/site/content/docs/5.2/examples/cheatsheet-rtl/index.html b/site/content/docs/5.2/examples/cheatsheet-rtl/index.html index 093554ebda..77accc9766 100644 --- a/site/content/docs/5.2/examples/cheatsheet-rtl/index.html +++ b/site/content/docs/5.2/examples/cheatsheet-rtl/index.html @@ -1389,26 +1389,26 @@ direction: rtl
{{< example show_markup="false" >}}
-
0%
+
0%
-
25%
+
25%
-
50%
+
50%
-
75%
+
75%
-
100%
+
100%
{{< /example >}} {{< example show_markup="false" >}}
-
-
+
+
{{< /example >}}
diff --git a/site/content/docs/5.2/examples/cheatsheet/index.html b/site/content/docs/5.2/examples/cheatsheet/index.html index 8bbd5dc261..5627f83750 100644 --- a/site/content/docs/5.2/examples/cheatsheet/index.html +++ b/site/content/docs/5.2/examples/cheatsheet/index.html @@ -1386,26 +1386,26 @@ body_class: "bg-light"
{{< example show_markup="false" >}}
-
0%
+
0%
-
25%
+
25%
-
50%
+
50%
-
75%
+
75%
-
100%
+
100%
{{< /example >}} {{< example show_markup="false" >}}
-
-
+
+
{{< /example >}}
diff --git a/site/content/docs/5.2/utilities/position.md b/site/content/docs/5.2/utilities/position.md index 177464fa06..5a6e849ccc 100644 --- a/site/content/docs/5.2/utilities/position.md +++ b/site/content/docs/5.2/utilities/position.md @@ -107,7 +107,7 @@ You can use these classes with existing components to create new ones. Remember {{< example class="bd-example-position-examples" >}}
-
+