From f28704565c78afe5a6b18fa832892aaa99412114 Mon Sep 17 00:00:00 2001 From: bhavyarm Date: Wed, 22 May 2019 12:11:58 -0400 Subject: [PATCH 01/10] Adding jsx-a11y fixes --- .eslintrc.js | 31 ++++++++++++++++++++++-- package.json | 2 +- yarn.lock | 68 +++++++++++++++++++++++++++++++--------------------- 3 files changed, 71 insertions(+), 30 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 8773f073887..ed15c86a4a9 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -15,15 +15,42 @@ module.exports = { // rules. "prettier/react", "prettier/standard", + //"plugin:jsx-a11y/recommended", "plugin:prettier/recommended" ], plugins: [ "prettier", + "jsx-a11y", "local" ], rules: { - "prefer-template": "error", - "local/i18n": "error" + "prefer-template": "error", + "jsx-a11y/accessible-emoji": "error", + "jsx-a11y/alt-text": "error", + "jsx-a11y/anchor-has-content": "error", + "jsx-a11y/aria-activedescendant-has-tabindex": "error", + "jsx-a11y/aria-props": "error", + "jsx-a11y/aria-proptypes": "error", + "jsx-a11y/aria-role": "error", + "jsx-a11y/aria-unsupported-elements": "error", + "jsx-a11y/heading-has-content": "error", + "jsx-a11y/html-has-lang": "error", + "jsx-a11y/iframe-has-title": "error", + "jsx-a11y/interactive-supports-focus": "error", + "jsx-a11y/media-has-caption": "error", + "jsx-a11y/mouse-events-have-key-events": "error", + "jsx-a11y/no-access-key": "error", + "jsx-a11y/no-distracting-elements": "error", + "jsx-a11y/no-interactive-element-to-noninteractive-role": "error", + "jsx-a11y/no-noninteractive-element-interactions": "error", + "jsx-a11y/no-noninteractive-element-to-interactive-role": "error", + "jsx-a11y/no-redundant-roles": "error", + "jsx-a11y/role-has-required-aria-props": "error", + "jsx-a11y/role-supports-aria-props": "error", + "jsx-a11y/scope": "error", + "jsx-a11y/tabindex-no-positive": "error", + "jsx-a11y/label-has-associated-control": "error", + "local/i18n": "error" }, env: { jest: true diff --git a/package.json b/package.json index 1249496dae0..3bc34142af2 100644 --- a/package.json +++ b/package.json @@ -120,7 +120,7 @@ "eslint-plugin-babel": "^4.1.2", "eslint-plugin-import": "^2.8.0", "eslint-plugin-jest": "^21.6.2", - "eslint-plugin-jsx-a11y": "^6.0.2", + "eslint-plugin-jsx-a11y": "^6.2.1", "eslint-plugin-local": "^1.0.0", "eslint-plugin-mocha": "^4.11.0", "eslint-plugin-prefer-object-spread": "^1.2.1", diff --git a/yarn.lock b/yarn.lock index ff4296115d7..7baa61eba39 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1673,12 +1673,13 @@ argparse@^1.0.7: dependencies: sprintf-js "~1.0.2" -aria-query@^0.7.0: - version "0.7.0" - resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.7.0.tgz#4af10a1e61573ddea0cf3b99b51c52c05b424d24" - integrity sha512-/r2lHl09V3o74+2MLKEdewoj37YZqiQZnfen1O4iNlrOjUgeKuu1U2yF3iKh6HJxqF+OXkLMfQv65Z/cvxD6vA== +aria-query@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc" + integrity sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w= dependencies: ast-types-flow "0.0.7" + commander "^2.11.0" arr-diff@^2.0.0: version "2.0.0" @@ -1837,7 +1838,7 @@ assign-symbols@^1.0.0: resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367" integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c= -ast-types-flow@0.0.7: +ast-types-flow@0.0.7, ast-types-flow@^0.0.7: version "0.0.7" resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad" integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0= @@ -1955,10 +1956,10 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f" integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ== -axobject-query@^0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-0.1.0.tgz#62f59dbc59c9f9242759ca349960e7a2fe3c36c0" - integrity sha1-YvWdvFnJ+SQnWco0mWDnov48NsA= +axobject-query@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.0.2.tgz#ea187abe5b9002b377f925d8bf7d1c561adf38f9" + integrity sha512-MCeek8ZH7hKyO1rWUbKNQBbl4l2eY0ntk7OGi+q0RlafrCnfPxC06WZA+uebCfmYp4mNU9jRBP1AhGyf8+W3ww== dependencies: ast-types-flow "0.0.7" @@ -3298,6 +3299,11 @@ commander@2.12.x: resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555" integrity sha512-BFnaq5ZOGcDN7FlrtBT4xxkgIToalIIxwjxLWVJ8bGTpe1LroqMiqQXdA7ygc7CRvaYS+9zfPGFnJqFSayx+AA== +commander@^2.11.0: + version "2.20.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422" + integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ== + commander@^2.12.1: version "2.16.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.16.0.tgz#f16390593996ceb4f3eeb020b31d78528f7f8a50" @@ -4119,10 +4125,10 @@ d@1: dependencies: es5-ext "^0.10.9" -damerau-levenshtein@^1.0.0: - version "1.0.4" - resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514" - integrity sha1-AxkcQyy27qFou3fzpV/9zLiXhRQ= +damerau-levenshtein@^1.0.4: + version "1.0.5" + resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.5.tgz#780cf7144eb2e8dbd1c3bb83ae31100ccc31a414" + integrity sha512-CBCRqFnpu715iPmw1KrdOrzRqbdFwQTwAWyyyYS42+iAgHCuXZ+/TdMgQkUENPomxEz9z1BEzuQU2Xw0kUuAgA== dargs@^5.1.0: version "5.1.0" @@ -4650,10 +4656,10 @@ elliptic@^6.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.0" -emoji-regex@^6.1.0: - version "6.5.1" - resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.5.1.tgz#9baea929b155565c11ea41c6626eaa65cef992c2" - integrity sha512-PAHp6TxrCy7MGMFidro8uikr+zlJJKJ/Q6mm2ExZ7HwkyR9lSVFfE3kt36qcwa24BQL7y0G9axycGjK1A/0uNQ== +emoji-regex@^7.0.2: + version "7.0.3" + resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156" + integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA== emojis-list@^2.0.0: version "2.1.0" @@ -5004,18 +5010,19 @@ eslint-plugin-jest@^21.6.2: resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-21.7.0.tgz#651f1c6ce999af3ac59ab8bf8a376d742fd0fc23" integrity sha512-ccXTDOiHe2c7e0riu9UIh3l9INIJaK1aZckwtl7luX9TymtKL0htAE+epNo/4w6uvj0vFc2hRvasHoLOCXVdtQ== -eslint-plugin-jsx-a11y@^6.0.2: - version "6.0.3" - resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.0.3.tgz#54583d1ae442483162e040e13cc31865465100e5" - integrity sha1-VFg9GuRCSDFi4EDhPMMYZUZRAOU= +eslint-plugin-jsx-a11y@^6.2.1: + version "6.2.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.2.1.tgz#4ebba9f339b600ff415ae4166e3e2e008831cf0c" + integrity sha512-cjN2ObWrRz0TTw7vEcGQrx+YltMvZoOEx4hWU8eEERDnBIU00OTq7Vr+jA7DFKxiwLNv4tTh5Pq2GUNEa8b6+w== dependencies: - aria-query "^0.7.0" + aria-query "^3.0.0" array-includes "^3.0.3" - ast-types-flow "0.0.7" - axobject-query "^0.1.0" - damerau-levenshtein "^1.0.0" - emoji-regex "^6.1.0" - jsx-ast-utils "^2.0.0" + ast-types-flow "^0.0.7" + axobject-query "^2.0.2" + damerau-levenshtein "^1.0.4" + emoji-regex "^7.0.2" + has "^1.0.3" + jsx-ast-utils "^2.0.1" eslint-plugin-local@^1.0.0: version "1.0.0" @@ -8463,6 +8470,13 @@ jsx-ast-utils@^2.0.0: dependencies: array-includes "^3.0.3" +jsx-ast-utils@^2.0.1: + version "2.1.0" + resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.1.0.tgz#0ee4e2c971fb9601c67b5641b71be80faecf0b36" + integrity sha512-yDGDG2DS4JcqhA6blsuYbtsT09xL8AoLuUR2Gb5exrw7UEM19sBcOTq+YBBhrNbl0PUC4R4LnFu+dHg2HKeVvA== + dependencies: + array-includes "^3.0.3" + just-extend@^1.1.27: version "1.1.27" resolved "https://registry.yarnpkg.com/just-extend/-/just-extend-1.1.27.tgz#ec6e79410ff914e472652abfa0e603c03d60e905" From c6eeeded7640f314ee7357b2a6c00ad740cffc1c Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 29 May 2019 16:39:18 -0500 Subject: [PATCH 02/10] address mouse-events-have-key-events errors --- src/components/copy/copy.js | 2 ++ src/components/tool_tip/tool_tip.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/components/copy/copy.js b/src/components/copy/copy.js index c79c1215333..f072c519b87 100644 --- a/src/components/copy/copy.js +++ b/src/components/copy/copy.js @@ -37,6 +37,8 @@ export class EuiCopy extends React.Component { } = this.props; return ( + // See `src/components/tool_tip/tool_tip.js` for explaination of below eslint-disable + // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events (this.anchor = anchor)} className={anchorClasses} onMouseOver={this.showToolTip} onMouseOut={this.onMouseOut}> {/** + * Re: jsx-a11y/mouse-events-have-key-events * We apply onFocus, onBlur, etc to the children element because that's the element * the user will be interacting with, as opposed to the enclosing anchor element. * For example, if the inner component is a button and the user tabs to it, we want From f538150ae2160654d4423aae4d6d9db82e3fe7cf Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 30 May 2019 11:41:28 -0500 Subject: [PATCH 03/10] eslintrc format fix --- .eslintrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index ed15c86a4a9..4da996b8511 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -49,7 +49,7 @@ module.exports = { "jsx-a11y/role-supports-aria-props": "error", "jsx-a11y/scope": "error", "jsx-a11y/tabindex-no-positive": "error", - "jsx-a11y/label-has-associated-control": "error", + "jsx-a11y/label-has-associated-control": "error", "local/i18n": "error" }, env: { From f2f2f0dac3360b90bb372caea7a18f04c6d31bb9 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 30 May 2019 11:42:05 -0500 Subject: [PATCH 04/10] docs examples updates --- .../views/color_picker/color_picker_clear.js | 5 +++- .../color_picker_no_color_label.js | 5 +++- src-docs/src/views/guidelines/colors.js | 23 ++++++++++--------- src/components/copy/copy.js | 2 +- 4 files changed, 21 insertions(+), 14 deletions(-) diff --git a/src-docs/src/views/color_picker/color_picker_clear.js b/src-docs/src/views/color_picker/color_picker_clear.js index abbb5012dc0..e48c47170c2 100644 --- a/src-docs/src/views/color_picker/color_picker_clear.js +++ b/src-docs/src/views/color_picker/color_picker_clear.js @@ -27,11 +27,14 @@ export class ColorPickerLabelAndClear extends Component { return ( - + diff --git a/src-docs/src/views/color_picker/color_picker_no_color_label.js b/src-docs/src/views/color_picker/color_picker_no_color_label.js index a60c5233b7a..f1144e1603d 100644 --- a/src-docs/src/views/color_picker/color_picker_no_color_label.js +++ b/src-docs/src/views/color_picker/color_picker_no_color_label.js @@ -22,11 +22,14 @@ export class ColorPickerNoColorLabel extends Component { return ( - + {copy => ( -

- {contrastRating}   {color2} -

+ )} ); diff --git a/src/components/copy/copy.js b/src/components/copy/copy.js index f072c519b87..9ac6f8a2f81 100644 --- a/src/components/copy/copy.js +++ b/src/components/copy/copy.js @@ -58,7 +58,7 @@ EuiCopy.propTypes = { /** * Tooltip message displayed before copy function is called. */ - beforeMessage: PropTypes.string, + beforeMessage: PropTypes.node, /** * Tooltip message displayed after copy function is called that lets the user know that From 40a87da0db89cb35f9aaf1c4d911d56d4c7dbedf Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 30 May 2019 11:42:32 -0500 Subject: [PATCH 05/10] EuiComboBox updates --- src/components/combo_box/combo_box.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js index a135c5e0e42..6cb6e09d937 100644 --- a/src/components/combo_box/combo_box.js +++ b/src/components/combo_box/combo_box.js @@ -729,13 +729,24 @@ export class EuiComboBox extends Component { } return ( + /** + * Re: jsx-a11y/interactive-supports-focus + * Focus is managed and is placed on the textbox element (`EuiComboBoxInput`) + * + * Re: jsx-a11y/role-has-required-aria-props + * Expansion is managed and required `aria-controls` prop is placed on the textbox element (`EuiComboBoxInput`) + * + * Reference for both: https://www.w3.org/TR/2017/REC-wai-aria-1.1-20171214/#combobox, + * which verifies that this implementation follows the spec. + */ + // eslint-disable-next-line jsx-a11y/interactive-supports-focus
Date: Thu, 30 May 2019 11:43:19 -0500 Subject: [PATCH 06/10] EuiTableHeaderCell update --- src/components/table/table_header_cell.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/table/table_header_cell.js b/src/components/table/table_header_cell.js index d0fe0fd0fd3..dfb1866dff5 100644 --- a/src/components/table/table_header_cell.js +++ b/src/components/table/table_header_cell.js @@ -65,7 +65,7 @@ export const EuiTableHeaderCell = ({ scope={scope} role="columnheader" aria-sort={ariaSortValue} - aria-live + aria-live="polite" {...rest}> ); } return ( -
- {alt} - {optionalCaption} - - {/* +
+ ); } } From a2dc420ce9fbff7132b159c80f842c97c1475075 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 30 May 2019 11:49:56 -0500 Subject: [PATCH 08/10] EuiSuperSelect updates --- .../__snapshots__/super_select.test.js.snap | 28 +++++++++++++++++++ .../super_select_control.test.js.snap | 8 ++++++ .../form/super_select/super_select.js | 6 +++- .../form/super_select/super_select_control.js | 4 +++ .../image/__snapshots__/image.test.js.snap | 22 +++++++++------ 5 files changed, 58 insertions(+), 10 deletions(-) diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap index df80cd834ed..8c5d0163611 100644 --- a/src/components/form/super_select/__snapshots__/super_select.test.js.snap +++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap @@ -27,6 +27,7 @@ exports[`EuiSuperSelect is rendered 1`] = ` aria-haspopup="true" aria-label="aria-label" aria-labelledby="undefined generated-id" + aria-selected="true" class="euiSuperSelectControl testClass1 testClass2" data-test-subj="test subject string" role="option" @@ -81,6 +82,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = ` diff --git a/src/components/image/__snapshots__/image.test.js.snap b/src/components/image/__snapshots__/image.test.js.snap index b8cdc299489..10a6524c3f6 100644 --- a/src/components/image/__snapshots__/image.test.js.snap +++ b/src/components/image/__snapshots__/image.test.js.snap @@ -1,14 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiImage is rendered 1`] = ` -
- alt -
+
+ alt +
+ `; From b2b1581caf853ff56e7e957b50aa7cc55cd42f36 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Fri, 31 May 2019 11:35:17 -0500 Subject: [PATCH 09/10] more lint fixes --- .../__snapshots__/keyboard_accessible.test.tsx.snap | 2 +- .../accessibility/keyboard_accessible.test.tsx | 13 +++++++++---- .../form/super_select/super_select_control.js | 3 --- src/components/icon/icon.tsx | 2 ++ 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/accessibility/__snapshots__/keyboard_accessible.test.tsx.snap b/src/components/accessibility/__snapshots__/keyboard_accessible.test.tsx.snap index 01e6a516e61..81a060516d4 100644 --- a/src/components/accessibility/__snapshots__/keyboard_accessible.test.tsx.snap +++ b/src/components/accessibility/__snapshots__/keyboard_accessible.test.tsx.snap @@ -9,7 +9,7 @@ exports[`EuiKeyboardAccessible adds accessibility attributes tabindex and role 1 exports[`EuiKeyboardAccessible doesn't override pre-existing accessibility attributes role 1`] = `
`; diff --git a/src/components/accessibility/keyboard_accessible.test.tsx b/src/components/accessibility/keyboard_accessible.test.tsx index 14b83c27920..6c8b7f585c7 100644 --- a/src/components/accessibility/keyboard_accessible.test.tsx +++ b/src/components/accessibility/keyboard_accessible.test.tsx @@ -57,7 +57,9 @@ describe('EuiKeyboardAccessible', () => { // @ts-ignore unused var const component = ( // eslint-disable-line @typescript-eslint/no-unused-vars - + + Click me + ); @@ -119,7 +121,7 @@ describe('EuiKeyboardAccessible', () => { // @ts-ignore unused var const component = ( // eslint-disable-line @typescript-eslint/no-unused-vars - + Click me ); @@ -143,7 +145,10 @@ describe('EuiKeyboardAccessible', () => { test('tabindex', () => { const $button = render( -
+
); @@ -153,7 +158,7 @@ describe('EuiKeyboardAccessible', () => { test('role', () => { const $button = render( -
+
); diff --git a/src/components/form/super_select/super_select_control.js b/src/components/form/super_select/super_select_control.js index 00e4888c516..c1670c42cb3 100644 --- a/src/components/form/super_select/super_select_control.js +++ b/src/components/form/super_select/super_select_control.js @@ -82,9 +82,6 @@ export const EuiSuperSelectControl = ({ - {/* - TODO: Not sure this should be role=option. - */}