From 63cd4e96b3511853361b1c47dff05496e62c4e9a Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Thu, 30 Mar 2017 22:45:36 +0100 Subject: Add explicit aria-label to placeholder-only inputs While `placeholder` is nominally valid per spec http://rawgit.com/w3c/html-api-map/master/index.html#accessible-name-and-description-calculation it is inelegant, a fallback, and not supported in ios/safari/voiceover and android/chrome/talkback, to name a few combinations `aria-describedby` is also not really the right tool for providing a name/label equivalent, so remove that from the list of possible alternative methods / clarify how it can be used --- docs/components/button-group.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/components/button-group.md') diff --git a/docs/components/button-group.md b/docs/components/button-group.md index 59a18e262..5c21e51f7 100644 --- a/docs/components/button-group.md +++ b/docs/components/button-group.md @@ -59,7 +59,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
@ - +
@@ -72,7 +72,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
@ - +
{% endexample %} -- cgit v1.2.3 From c0f068bc73aedac2c16e0c731729b85544ea0265 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 18 Apr 2017 15:14:07 +0100 Subject: Port button group accessibility callout from v3 to v4 --- docs/components/button-group.md | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'docs/components/button-group.md') diff --git a/docs/components/button-group.md b/docs/components/button-group.md index 5c21e51f7..d2d5140ed 100644 --- a/docs/components/button-group.md +++ b/docs/components/button-group.md @@ -12,6 +12,14 @@ Group a series of buttons together on a single line with the button group. Add o * Will be replaced with the ToC, excluding the "Contents" header {:toc} +{% callout warning %} +## Ensure correct `role` and provide a label + +In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`. + +In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used. +{% endcallout %} + ## Basic example Wrap a series of buttons with `.btn` in `.btn-group`. -- cgit v1.2.3 From c72cc98bd56fb50259c84a1fced38751009eb930 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 27 May 2017 23:01:14 -0700 Subject: update components docs --- docs/components/button-group.md | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) (limited to 'docs/components/button-group.md') diff --git a/docs/components/button-group.md b/docs/components/button-group.md index d2d5140ed..f328b9422 100644 --- a/docs/components/button-group.md +++ b/docs/components/button-group.md @@ -3,26 +3,12 @@ layout: docs title: Button group description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript. group: components +toc: true --- -Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/components/buttons/#button-plugin). - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -{% callout warning %} -## Ensure correct `role` and provide a label - -In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`. - -In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used. -{% endcallout %} - ## Basic example -Wrap a series of buttons with `.btn` in `.btn-group`. +Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/components/buttons/#button-plugin). {% example html %}
@@ -32,6 +18,13 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
{% endexample %} +{% callout warning %} +#### Ensure correct `role` and provide a label + +In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`. + +In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used. +{% endcallout %} ## Button toolbar Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more. -- cgit v1.2.3 From 3e76d6565603fafa2c85ad81d7b6345c4e279c72 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 28 May 2017 22:50:57 -0700 Subject: Rearrange all the docs to allow for a docs/major.minor/ setup --- docs/components/button-group.md | 201 ---------------------------------------- 1 file changed, 201 deletions(-) delete mode 100644 docs/components/button-group.md (limited to 'docs/components/button-group.md') diff --git a/docs/components/button-group.md b/docs/components/button-group.md deleted file mode 100644 index f328b9422..000000000 --- a/docs/components/button-group.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -layout: docs -title: Button group -description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript. -group: components -toc: true ---- - -## Basic example - -Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/components/buttons/#button-plugin). - -{% example html %} -
- - - -
-{% endexample %} - -{% callout warning %} -#### Ensure correct `role` and provide a label - -In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`. - -In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used. -{% endcallout %} -## Button toolbar - -Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more. - -{% example html %} - -{% endexample %} - -Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly. - -{% example html %} - - - -{% endexample %} - -## Sizing - -Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups. - -
-
- - - -
-
-
- - - -
-
-
- - - -
-
- -{% highlight html %} -
...
-
...
-
...
-{% endhighlight %} - -## Nesting - -Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons. - -{% example html %} -
- - - -
- -
- Dropdown link - Dropdown link -
-
-
-{% endexample %} - -## Vertical variation - -Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.** - -
-
- - - - - - -
-
- - -
-
- - -
- -
- Dropdown link - Dropdown link -
-
- - -
- -
- Dropdown link - Dropdown link -
-
-
- -
- Dropdown link - Dropdown link -
-
-
- -
- Dropdown link - Dropdown link -
-
-
-
- -{% highlight html %} -
- ... -
-{% endhighlight %} - -## Tooltips and popovers - -Due to the specific implementation (and some other components), a bit of special casing is required for tooltips and popovers within button groups. **You'll have to specify the option `container: 'body'`** to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered). -- cgit v1.2.3