diff options
Diffstat (limited to 'docs/components/button-group.md')
| -rw-r--r-- | docs/components/button-group.md | 21 |
1 files changed, 12 insertions, 9 deletions
diff --git a/docs/components/button-group.md b/docs/components/button-group.md index 3b90e61c9..9f223c7de 100644 --- a/docs/components/button-group.md +++ b/docs/components/button-group.md @@ -5,16 +5,19 @@ title: Button group 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](../javascript/#buttons). -<div class="bd-callout bd-callout-warning"> - <h4>Tooltips & popovers in button groups require special setting</h4> - <p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p> -</div> +{% callout warning %} +#### Tooltips & popovers in button groups require special setting -<div class="bd-callout bd-callout-warning"> - <h4>Ensure correct <code>role</code> and provide a label</h4> - <p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p> - <p>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 <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p> -</div> +When using tooltips or popovers on elements within a `.btn-group`, 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). +{% endcallout %} + +{% 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 |