From 85b8d85345110e77dcb6b6e96b11511acdc93ad3 Mon Sep 17 00:00:00 2001 From: Bhavya RM Date: Tue, 4 Jun 2019 09:55:19 -0400 Subject: [PATCH] Adding jsx-a11y linter rules (#1952) * Adding jsx-a11y fixes * address mouse-events-have-key-events errors * eslintrc format fix * docs examples updates * EuiComboBox updates * EuiTableHeaderCell update * EuiImage update * EuiSuperSelect updates * more lint fixes * #1952 CL entry --- .eslintrc.js | 27 ++++++++++++ CHANGELOG.md | 2 + src-docs/src/views/guidelines/colors.js | 23 +++++----- .../keyboard_accessible.test.tsx.snap | 2 +- .../keyboard_accessible.test.tsx | 13 ++++-- src/components/color_picker/saturation.tsx | 2 + src/components/combo_box/combo_box.js | 13 +++++- src/components/copy/copy.js | 4 +- .../__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 | 1 + src/components/icon/icon.tsx | 2 + .../image/__snapshots__/image.test.js.snap | 22 ++++++---- src/components/image/image.js | 43 ++++++++++--------- src/components/table/table_header_cell.js | 2 +- src/components/tool_tip/tool_tip.js | 2 + yarn.lock | 7 +++ 18 files changed, 158 insertions(+), 49 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index c91f8dfc9ad..f599c2968bd 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -28,6 +28,7 @@ module.exports = { "plugin:prettier/recommended" ], plugins: [ + "jsx-a11y", "prettier", "local" ], @@ -37,6 +38,32 @@ module.exports = { "no-use-before-define": "off", "quotes": ["warn", "single", "avoid-escape"], + "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", + "@typescript-eslint/array-type": ["error", "array-simple"], "@typescript-eslint/camelcase": "off", "@typescript-eslint/class-name-casing": "off", diff --git a/CHANGELOG.md b/CHANGELOG.md index 02b47e1b450..411752cd5b2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,8 @@ - Removed TSlint and will perform all linting through ESLint ([#1950](https://github.com/elastic/eui/pull/1950)) - Added new component `EuiDelayRender` ([#1876](https://github.com/elastic/eui/pull/1876)) - Replaced `EuiColorPicker` with custom, customizable component ([#1914](https://github.com/elastic/eui/pull/1914)) +- Added `jsx-a11y` `eslint` plugin and rules to match Kibana ([#1952](https://github.com/elastic/eui/pull/1952)) +- Changed `EuiCopy` `beforeMessage` prop to accept `node` instead of just `string` ([#1952](https://github.com/elastic/eui/pull/1952)) **Bug fixes** diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js index 9cfe41e554b..76a377df6a1 100644 --- a/src-docs/src/views/guidelines/colors.js +++ b/src-docs/src/views/guidelines/colors.js @@ -283,17 +283,18 @@ color: $${color2};`; beforeMessage={tooltipContent} textToCopy={textToCopy}> {copy => ( -

- {contrastRating}   {color2} -

+ )} ); 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/color_picker/saturation.tsx b/src/components/color_picker/saturation.tsx index c8e352b5288..6677287a34d 100644 --- a/src/components/color_picker/saturation.tsx +++ b/src/components/color_picker/saturation.tsx @@ -176,6 +176,8 @@ export const EuiSaturation: FunctionComponent = ({ token="euiSaturation.roleDescription" default="HSV color mode saturation and value selection"> {(roleDescription: string) => ( + // Unsure why this element causes errors as `tabIndex` and focus/interactivity (by extension) are accounted for. + // eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex, jsx-a11y/no-noninteractive-element-interactions
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx index fd35bac976f..be405ebc559 100644 --- a/src/components/icon/icon.tsx +++ b/src/components/icon/icon.tsx @@ -524,6 +524,8 @@ export class EuiIcon extends Component { if (typeof icon === 'string') { return ( - alt - +
+ alt +
+ `; diff --git a/src/components/image/image.js b/src/components/image/image.js index 8df838d8670..c31d158e84b 100644 --- a/src/components/image/image.js +++ b/src/components/image/image.js @@ -103,37 +103,40 @@ export class EuiImage extends Component { fullScreenDisplay = ( -
{ - this.figure = node; - }} - className="euiImageFullScreen" +
+
{ + this.figure = node; + }} + className="euiImageFullScreen"> + {alt} + {optionalCaption} +
+ ); } return ( -
- {alt} - {optionalCaption} - - {/* +
+ ); } } 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}>