diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
index c2d5f78374de..678c8bb9cd04 100644
--- a/src-docs/src/views/button/button_example.js
+++ b/src-docs/src/views/button/button_example.js
@@ -15,6 +15,7 @@ import {
EuiCode,
EuiButtonGroup,
EuiButtonToggle,
+ EuiCallOut,
} from '../../../../src/components';
import Button from './button';
@@ -251,6 +252,12 @@ export const ButtonExample = {
(default) or "primary" . If your just displaying a group of
icons, add the prop isIconOnly .
+
+
+ In order for groups to be properly read as groups with a title, add the legend prop.
+ This is only for accessiblity, however, so it will be visibly hidden.
+
+
),
demo: ,
diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js
index f1f349d0179e..07aa0775f2e9 100644
--- a/src-docs/src/views/button/button_group.js
+++ b/src-docs/src/views/button/button_group.js
@@ -22,6 +22,7 @@ export default class extends Component {
this.toggleButtons = [{
id: `${idPrefix}0`,
label: 'Option one',
+ isDisabled: true,
}, {
id: `${idPrefix}1`,
label: 'Option two is selected by default',
@@ -33,6 +34,7 @@ export default class extends Component {
this.toggleButtonsMulti = [{
id: `${idPrefix2}0`,
label: 'Option 1',
+ isDisabled: true,
}, {
id: `${idPrefix2}1`,
label: 'Option 2 is selected by default',
@@ -45,6 +47,7 @@ export default class extends Component {
id: `${idPrefix3}0`,
label: 'Align left',
iconType: 'editorAlignLeft',
+ isDisabled: true,
}, {
id: `${idPrefix3}1`,
label: 'Align center',
@@ -58,18 +61,23 @@ export default class extends Component {
this.toggleButtonsIconsMulti = [{
id: `${idPrefix3}3`,
label: 'Bold',
+ name: 'bold',
iconType: 'editorBold',
+ isDisabled: true,
}, {
id: `${idPrefix3}4`,
label: 'Italic',
+ name: 'italic',
iconType: 'editorItalic',
}, {
id: `${idPrefix3}5`,
label: 'Underline',
+ name: 'underline',
iconType: 'editorUnderline',
}, {
id: `${idPrefix3}6`,
label: 'Strikethrough',
+ name: 'strikethrough',
iconType: 'editorStrike',
}];
@@ -119,7 +127,7 @@ export default class extends Component {
return (
+
+
+
`;
diff --git a/src/components/button/button_group/button_group.js b/src/components/button/button_group/button_group.js
index da8f0632c20f..617d624825ac 100644
--- a/src/components/button/button_group/button_group.js
+++ b/src/components/button/button_group/button_group.js
@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
+import { EuiScreenReaderOnly } from '../../accessibility';
import { EuiButtonToggle } from '../button_toggle';
import { TOGGLE_TYPES } from '../../toggle';
@@ -15,6 +16,7 @@ export const EuiButtonGroup = ({
isFullWidth,
isIconOnly,
name,
+ legend,
onChange,
options,
type,
@@ -29,40 +31,50 @@ export const EuiButtonGroup = ({
className,
);
+ let legendNode;
+ if (legend) {
+ legendNode = (
+ {legend}
+ );
+ }
+
return (
-
- {options.map((option, index) => {
-
- let isSelectedState;
- if (type === 'multi') {
- isSelectedState = idToSelectedMap[option.id] || false;
- } else {
- isSelectedState = option.id === idSelected;
- }
-
- return (
-
- );
- })}
-
+
+ {legendNode}
+
+
+ {options.map((option, index) => {
+ let isSelectedState;
+ if (type === 'multi') {
+ isSelectedState = idToSelectedMap[option.id] || false;
+ } else {
+ isSelectedState = option.id === idSelected;
+ }
+
+ return (
+
+ );
+ })}
+
+
);
};
@@ -112,6 +124,11 @@ EuiButtonGroup.propTypes = {
* Map of ids of selected options for `type="multi"`
*/
idToSelectedMap: PropTypes.objectOf(PropTypes.bool),
+
+ /**
+ * Adds a hidden legend to the group for accessiblity
+ */
+ legend: PropTypes.node,
};
EuiButtonGroup.defaultProps = {