From 6fc3ed5c07206af6c5f788c6b14c1f7c4a05ad62 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Wed, 11 Sep 2024 12:16:07 +0200 Subject: [PATCH 1/3] Temp commit with a beginning of a solution... --- site/content/docs/5.3/components/accordion.md | 2 +- site/layouts/shortcodes/example.html | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/site/content/docs/5.3/components/accordion.md b/site/content/docs/5.3/components/accordion.md index 8b22686ad50f..8895341d1437 100644 --- a/site/content/docs/5.3/components/accordion.md +++ b/site/content/docs/5.3/components/accordion.md @@ -70,7 +70,7 @@ To render an accordion that's expanded by default: Add `.accordion-flush` to remove some borders and rounded corners to render accordions edge-to-edge with their parent container. -{{< example class="bg-body-secondary" >}} +{{< example class="bg-body-secondary" buttons_labels="flush accordion example">}}

diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html index 5b398e6814fc..a985e022fe3e 100644 --- a/site/layouts/shortcodes/example.html +++ b/site/layouts/shortcodes/example.html @@ -8,6 +8,7 @@ * show_markup: if the markup should be output in the HTML - default: `true` * show_preview: if the preview should be output in the HTML - default: `true` * stackblitz_add_js: if extra JS snippet should be added to StackBlitz - default: `false` + * buttons_labels: label to apply to complete 'Try it on Stackblitz' and 'Copy to clipboard' buttons - default: "" */ -}} {{- $id := .Get "id" -}} @@ -16,10 +17,14 @@ {{- $show_markup := .Get "show_markup" | default true -}} {{- $show_preview := .Get "show_preview" | default true -}} {{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}} +{{- $buttons_labels := .Get "buttons_labels" | default "" -}} {{- $content := .Inner -}}
+ {{- if eq $buttons_labels "" }}toto{{ else }} {{ $buttons_labels }} {{- end }} + {{- if not (eq $buttons_labels "") }} {{ $buttons_labels }} {{- end }} + {{- if eq $show_preview true }} {{ $content }} @@ -31,10 +36,10 @@
{{ $lang }}
- -
From 6da0b87ce423f35e90379f89eba45d0b3946e839 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Thu, 12 Sep 2024 10:55:19 +0200 Subject: [PATCH 2/3] Improve label of copy/stackblitz buttons for accessibility, make an example with Accordion --- site/content/docs/5.3/components/accordion.md | 6 +++--- site/layouts/shortcodes/example.html | 11 ++++------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/site/content/docs/5.3/components/accordion.md b/site/content/docs/5.3/components/accordion.md index 8895341d1437..7b3af3d0901b 100644 --- a/site/content/docs/5.3/components/accordion.md +++ b/site/content/docs/5.3/components/accordion.md @@ -25,7 +25,7 @@ To render an accordion that's expanded by default: - add the `.show` class on the `.accordion-collapse` element. - drop the `.collapsed` class from the `.accordion-button` element and set its `aria-expanded` attribute to `true`. -{{< example >}} +{{< example buttons_label="standard accordion example">}}

@@ -70,7 +70,7 @@ To render an accordion that's expanded by default: Add `.accordion-flush` to remove some borders and rounded corners to render accordions edge-to-edge with their parent container. -{{< example class="bg-body-secondary" buttons_labels="flush accordion example">}} +{{< example class="bg-body-secondary" buttons_label="flush accordion example">}}

@@ -109,7 +109,7 @@ Add `.accordion-flush` to remove some borders and rounded corners to render acco Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accordion items stay open when another item is opened. -{{< example >}} +{{< example buttons_label="always opened accordion example">}}

diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html index a985e022fe3e..1a8124b600e9 100644 --- a/site/layouts/shortcodes/example.html +++ b/site/layouts/shortcodes/example.html @@ -8,7 +8,7 @@ * show_markup: if the markup should be output in the HTML - default: `true` * show_preview: if the preview should be output in the HTML - default: `true` * stackblitz_add_js: if extra JS snippet should be added to StackBlitz - default: `false` - * buttons_labels: label to apply to complete 'Try it on Stackblitz' and 'Copy to clipboard' buttons - default: "" + * buttons_label: label to apply to complete 'Try it on Stackblitz' and 'Copy to clipboard' buttons - default: "" */ -}} {{- $id := .Get "id" -}} @@ -17,14 +17,11 @@ {{- $show_markup := .Get "show_markup" | default true -}} {{- $show_preview := .Get "show_preview" | default true -}} {{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}} -{{- $buttons_labels := .Get "buttons_labels" | default "" -}} +{{- $buttons_label := .Get "buttons_label" | default "" -}} {{- $content := .Inner -}}
- {{- if eq $buttons_labels "" }}toto{{ else }} {{ $buttons_labels }} {{- end }} - {{- if not (eq $buttons_labels "") }} {{ $buttons_labels }} {{- end }} - {{- if eq $show_preview true }} {{ $content }} @@ -36,10 +33,10 @@
{{ $lang }}
- -
From 6d8c293a3f86407929f66064e7bda07205d79cfc Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 13 Sep 2024 09:29:43 +0200 Subject: [PATCH 3/3] Improve label of copy/stackblitz buttons for accessibility, make an example with Accordion and Alerts --- site/content/docs/5.3/components/accordion.md | 6 +++--- site/content/docs/5.3/components/alerts.md | 14 ++++++++------ site/layouts/shortcodes/example.html | 8 ++++---- site/layouts/shortcodes/js-docs.html | 8 ++++++-- site/layouts/shortcodes/scss-docs.html | 6 ++++-- 5 files changed, 25 insertions(+), 17 deletions(-) diff --git a/site/content/docs/5.3/components/accordion.md b/site/content/docs/5.3/components/accordion.md index 7b3af3d0901b..4fb3df9c79d3 100644 --- a/site/content/docs/5.3/components/accordion.md +++ b/site/content/docs/5.3/components/accordion.md @@ -25,7 +25,7 @@ To render an accordion that's expanded by default: - add the `.show` class on the `.accordion-collapse` element. - drop the `.collapsed` class from the `.accordion-button` element and set its `aria-expanded` attribute to `true`. -{{< example buttons_label="standard accordion example">}} +{{< example button_label="standard accordion example">}}

@@ -70,7 +70,7 @@ To render an accordion that's expanded by default: Add `.accordion-flush` to remove some borders and rounded corners to render accordions edge-to-edge with their parent container. -{{< example class="bg-body-secondary" buttons_label="flush accordion example">}} +{{< example class="bg-body-secondary" button_label="flush accordion example">}}

@@ -109,7 +109,7 @@ Add `.accordion-flush` to remove some borders and rounded corners to render acco Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accordion items stay open when another item is opened. -{{< example buttons_label="always opened accordion example">}} +{{< example button_label="always opened accordion example">}}

diff --git a/site/content/docs/5.3/components/alerts.md b/site/content/docs/5.3/components/alerts.md index 8e3d99f537ab..8027b82455c7 100644 --- a/site/content/docs/5.3/components/alerts.md +++ b/site/content/docs/5.3/components/alerts.md @@ -38,7 +38,7 @@ Click the button below to show an alert (hidden with inline styles to start), th We use the following JavaScript to trigger our live alert demo: -{{< js-docs name="live-alert" file="site/assets/js/partials/snippets.js" >}} +{{< js-docs name="live-alert" file="site/assets/js/partials/snippets.js" button_label="JavaScript example to trigger our live alert demo">}} ### Link color @@ -152,23 +152,23 @@ When an alert is dismissed, the element is completely removed from the page stru As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -{{< scss-docs name="alert-css-vars" file="scss/_alert.scss" >}} +{{< scss-docs name="alert-css-vars" file="scss/_alert.scss" button_label="CSS variables for Alerts" >}} ### Sass variables -{{< scss-docs name="alert-variables" file="scss/_variables.scss" >}} +{{< scss-docs name="alert-variables" file="scss/_variables.scss" button_label="Sass variables for Alerts" >}} ### Sass mixins {{< deprecated-in "5.3.0" >}} -{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}} +{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" button_label="Sass mixins for Alerts" >}} ### Sass loops Loop that generates the modifier classes with an overriding of CSS variables. -{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}} +{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" button_label="Sass loops for Alerts" >}} ## JavaScript behavior @@ -176,6 +176,8 @@ Loop that generates the modifier classes with an overriding of CSS variables. Initialize elements as alerts +alerts' initialization example + ```js const alertList = document.querySelectorAll('.alert') const alerts = [...alertList].map(element => new bootstrap.Alert(element)) @@ -189,7 +191,7 @@ See the [triggers](#triggers) section for more details. ### Triggers -{{% js-dismiss "alert" %}} +{{% js-dismiss "alert" 1 %}} **Note that closing an alert will remove it from the DOM.** diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html index 1a8124b600e9..0ff604a2896c 100644 --- a/site/layouts/shortcodes/example.html +++ b/site/layouts/shortcodes/example.html @@ -8,7 +8,7 @@ * show_markup: if the markup should be output in the HTML - default: `true` * show_preview: if the preview should be output in the HTML - default: `true` * stackblitz_add_js: if extra JS snippet should be added to StackBlitz - default: `false` - * buttons_label: label to apply to complete 'Try it on Stackblitz' and 'Copy to clipboard' buttons - default: "" + * button_label: label to apply to complete 'Try it on Stackblitz' and 'Copy to clipboard' buttons - default: "" */ -}} {{- $id := .Get "id" -}} @@ -17,7 +17,7 @@ {{- $show_markup := .Get "show_markup" | default true -}} {{- $show_preview := .Get "show_preview" | default true -}} {{- $stackblitz_add_js := .Get "stackblitz_add_js" | default false -}} -{{- $buttons_label := .Get "buttons_label" | default "" -}} +{{- $button_label := .Get "button_label" | default "" -}} {{- $content := .Inner -}} @@ -33,10 +33,10 @@
{{ $lang }}
- -
diff --git a/site/layouts/shortcodes/js-docs.html b/site/layouts/shortcodes/js-docs.html index 8eed4a0eb18e..1876e9e59b81 100644 --- a/site/layouts/shortcodes/js-docs.html +++ b/site/layouts/shortcodes/js-docs.html @@ -1,12 +1,16 @@ {{- /* - Usage: `js-docs name="name" file="file/_location.js` + Usage: `js-docs name="name" file="file/_location.js button_label="label"` Prints everything between `// js-docs-start "name"` and `// js-docs-end "name"` comments in the docs. + + Optional parameters: + * button_label: label to apply to complete 'Copy to clipboard' button - default: "" */ -}} {{- $name := .Get "name" -}} {{- $file := .Get "file" -}} +{{- $button_label := .Get "button_label" | default "" -}} {{- /* If any parameters are missing, print an error and exit */ -}} {{- if or (not $name) (not $file) -}} @@ -38,7 +42,7 @@ {{- $file -}}
-
diff --git a/site/layouts/shortcodes/scss-docs.html b/site/layouts/shortcodes/scss-docs.html index 6e7c129f4c29..65592e37058c 100644 --- a/site/layouts/shortcodes/scss-docs.html +++ b/site/layouts/shortcodes/scss-docs.html @@ -1,16 +1,18 @@ {{- /* - Usage: `scss-docs name="name" file="file/_location.scss"` + Usage: `scss-docs name="name" file="file/_location.scss" button_label="label"` Prints everything between `// scss-docs-start "name"` and `// scss-docs-end "name"` comments in the docs. Optional parameters: * strip-default: Remove the ` !default` flag from variable assignments - default: `true` + * button_label: label to apply to complete 'Copy to clipboard' button - default: "" */ -}} {{- $name := .Get "name" -}} {{- $file := .Get "file" -}} {{- $strip_default := .Get "strip-default" | default "true" -}} +{{- $button_label := .Get "button_label" | default "" -}} {{- /* If any parameters are missing, print an error and exit */ -}} {{- if or (not $name) (not $file) -}} @@ -51,7 +53,7 @@ {{- $file -}}
-