rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Improve label of copy/stackblitz buttons for accessibility, make an example with Accordion

Browse Source
This commit is contained in:
Hannah Issermann 2024-09-12 10:55:19 +02:00
parent 6fc3ed5c07
commit 6da0b87ce4
2 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
site/content/docs/5.3/components/accordion.md
View File

@ -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">}}
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
@ -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">}}
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
@ -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">}}
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header">

11
site/layouts/shortcodes/example.html
View File

@ -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 -}}
<div class="bd-example-snippet bd-code-snippet">
{{- if eq $buttons_labels "" }}toto{{ else }} {{ $buttons_labels }} {{- end }}
{{- if not (eq $buttons_labels "") }} {{ $buttons_labels }} {{- end }}
{{- if eq $show_preview true }}
<div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example m-0 border-0{{ with $class }} {{ . }}{{ end }}">
{{ $content }}
@ -36,10 +33,10 @@
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
<small class="font-monospace text-body-secondary text-uppercase">{{ $lang }}</small>
<div class="d-flex ms-auto">
<button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try {{- if eq $buttons_labels "" }} it{{ else }} {{ $buttons_labels }} {{- end }} on StackBlitz">
<button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try {{- if eq $buttons_label "" }} it{{ else }} {{ $buttons_label }} {{- end }} on StackBlitz">
<svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
</button>
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy {{- if eq $buttons_labels "" }} {{ else }} {{ $buttons_labels }} {{- end }}to clipboard">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy {{- if eq $buttons_label "" }} {{ else }} {{ $buttons_label }} {{- end }}to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
</button>
</div>