From 37153b39c6837054dc9c854660c5bee39402ed13 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 16 Jan 2019 10:27:47 -0500 Subject: [PATCH 1/6] Make sure hidden selectable inputs are hidden when disabled --- src/components/form/switch/_mixins.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/form/switch/_mixins.scss b/src/components/form/switch/_mixins.scss index 7d952267648..743d915644f 100644 --- a/src/components/form/switch/_mixins.scss +++ b/src/components/form/switch/_mixins.scss @@ -1,6 +1,7 @@ @mixin euiHiddenSelectableInput { position: absolute; - opacity: 0; /* 1 */ + // sass-lint:disable no-important + opacity: 0 !important; // Make sure it's still hidden when :disabled width: 100%; height: 100%; cursor: pointer; From f32bb3105beca79351bb82546022b14a1b437fe7 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 16 Jan 2019 11:04:10 -0500 Subject: [PATCH 2/6] Update accessibility for button groups --- src-docs/src/views/button/button_example.js | 7 ++ src-docs/src/views/button/button_group.js | 21 +++-- .../__snapshots__/button_group.test.js.snap | 12 +-- .../button/button_group/button_group.js | 83 +++++++++++-------- 4 files changed, 80 insertions(+), 43 deletions(-) diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js index c2d5f78374d..678c8bb9cd0 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 f1f349d0179..07aa0775f2e 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 da8f0632c20..617d624825a 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 = { From 0fc6960e86a5ffeda0ed3721c980ae56aa734fc7 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 16 Jan 2019 14:18:06 -0500 Subject: [PATCH 3/6] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b91b44078b1..72ecf5e697a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ No public interface changes since `6.4.0`. **Bug fixes** - Fix mouse interaction with `EuiComboBox` in IE11 ([#1437](https://github.com/elastic/eui/pull/1437)) +- Added `legend` for accessibility of `EuiButtonGroup` and fixed opacity of disabled input ([#1444](https://github.com/elastic/eui/pull/1444)) ## [`6.3.1`](https://github.com/elastic/eui/tree/v6.3.1) From 386d4087aac61f639d1805f59fc69456a29522e8 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 16 Jan 2019 14:25:39 -0500 Subject: [PATCH 4/6] Fix mobile layout with fieldset reset --- src-docs/src/views/button/button_group.js | 4 ---- src/global_styling/reset/_reset.scss | 4 ++++ 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js index 07aa0775f2e..1138751fb77 100644 --- a/src-docs/src/views/button/button_group.js +++ b/src-docs/src/views/button/button_group.js @@ -22,7 +22,6 @@ 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', @@ -34,7 +33,6 @@ 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', @@ -47,7 +45,6 @@ export default class extends Component { id: `${idPrefix3}0`, label: 'Align left', iconType: 'editorAlignLeft', - isDisabled: true, }, { id: `${idPrefix3}1`, label: 'Align center', @@ -63,7 +60,6 @@ export default class extends Component { label: 'Bold', name: 'bold', iconType: 'editorBold', - isDisabled: true, }, { id: `${idPrefix3}4`, label: 'Italic', diff --git a/src/global_styling/reset/_reset.scss b/src/global_styling/reset/_reset.scss index 0cfd6517ee5..3146a2db2f3 100644 --- a/src/global_styling/reset/_reset.scss +++ b/src/global_styling/reset/_reset.scss @@ -133,3 +133,7 @@ table { hr { margin: 0; } + +fieldset { + min-inline-size: auto; +} From 96b26820db088e3beba1d6dce3270f28996a1edc Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 16 Jan 2019 14:27:23 -0500 Subject: [PATCH 5/6] string prop --- src/components/button/button_group/button_group.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/button/button_group/button_group.js b/src/components/button/button_group/button_group.js index 617d624825a..326e09c772a 100644 --- a/src/components/button/button_group/button_group.js +++ b/src/components/button/button_group/button_group.js @@ -128,7 +128,7 @@ EuiButtonGroup.propTypes = { /** * Adds a hidden legend to the group for accessiblity */ - legend: PropTypes.node, + legend: PropTypes.string, }; EuiButtonGroup.defaultProps = { From e2d2af950e5682320e5a5c1016b4deed8e0cf021 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 16 Jan 2019 14:50:52 -0500 Subject: [PATCH 6/6] cl fix --- CHANGELOG.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 72ecf5e697a..44e7729d4fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,9 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `6.4.0`. +**Bug fixes** + +- Added `legend` for accessibility of `EuiButtonGroup` and fixed opacity of disabled input ([#1444](https://github.com/elastic/eui/pull/1444)) + ## [`6.4.0`](https://github.com/elastic/eui/tree/v6.4.0) @@ -11,7 +14,6 @@ No public interface changes since `6.4.0`. **Bug fixes** - Fix mouse interaction with `EuiComboBox` in IE11 ([#1437](https://github.com/elastic/eui/pull/1437)) -- Added `legend` for accessibility of `EuiButtonGroup` and fixed opacity of disabled input ([#1444](https://github.com/elastic/eui/pull/1444)) ## [`6.3.1`](https://github.com/elastic/eui/tree/v6.3.1)