@elastic/eslint-plugin-eui 2.8.0 → 2.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/lib/cjs/rules/a11y/icon_accessibility_rules.d.ts.map +1 -1
- package/lib/cjs/rules/a11y/icon_accessibility_rules.js +10 -8
- package/lib/cjs/rules/a11y/require_aria_label_for_modals.d.ts +1 -1
- package/lib/cjs/rules/a11y/require_aria_label_for_modals.d.ts.map +1 -1
- package/lib/cjs/rules/a11y/require_aria_label_for_modals.js +8 -2
- package/lib/esm/rules/a11y/icon_accessibility_rules.js +9 -13
- package/lib/esm/rules/a11y/icon_accessibility_rules.js.map +1 -1
- package/lib/esm/rules/a11y/require_aria_label_for_modals.d.ts +1 -1
- package/lib/esm/rules/a11y/require_aria_label_for_modals.js +28 -1
- package/lib/esm/rules/a11y/require_aria_label_for_modals.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -129,7 +129,7 @@ It's worth pointing out that although the examples provided are specific to EUI
|
|
|
129
129
|
|
|
130
130
|
### `@elastic/eui/require-aria-label-for-modals`
|
|
131
131
|
|
|
132
|
-
Ensure that EUI modal components (`EuiModal`, `EuiFlyout`, `EuiFlyoutResizable` ,`EuiConfirmModal`) have either an `aria-label` or `aria-labelledby` prop for accessibility. This helps screen reader users understand the purpose and content of modal dialogs.
|
|
132
|
+
Ensure that EUI modal components (`EuiModal`, `EuiFlyout`, `EuiFlyoutResizable` ,`EuiConfirmModal`, `EuiPopover`, `EuiWrappingPopover`) have either an `aria-label` or `aria-labelledby` prop for accessibility. This helps screen reader users understand the purpose and content of modal dialogs.
|
|
133
133
|
|
|
134
134
|
### `@elastic/eui/consistent-is-invalid-props`
|
|
135
135
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon_accessibility_rules.d.ts","sourceRoot":"","sources":["../../../../src/rules/a11y/icon_accessibility_rules.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAY,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"icon_accessibility_rules.d.ts","sourceRoot":"","sources":["../../../../src/rules/a11y/icon_accessibility_rules.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAY,MAAM,0BAA0B,CAAC;AAMjE,eAAO,MAAM,yBAAyB,sHAiFpC,CAAC"}
|
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.EuiIconAccessibilityRules = void 0;
|
|
7
7
|
var _utils = require("@typescript-eslint/utils");
|
|
8
8
|
var _remove_attr = require("../../utils/remove_attr");
|
|
9
|
+
var _has_spread = require("../../utils/has_spread");
|
|
9
10
|
const COMPONENT = 'EuiIcon';
|
|
10
11
|
const EuiIconAccessibilityRules = exports.EuiIconAccessibilityRules = _utils.ESLintUtils.RuleCreator.withoutDocs({
|
|
11
12
|
create(context) {
|
|
@@ -17,6 +18,12 @@ const EuiIconAccessibilityRules = exports.EuiIconAccessibilityRules = _utils.ESL
|
|
|
17
18
|
if (openingElement.name.type !== 'JSXIdentifier' || openingElement.name.name !== COMPONENT) {
|
|
18
19
|
return;
|
|
19
20
|
}
|
|
21
|
+
|
|
22
|
+
// Skip fixing when spread props are present (e.g., <EuiIcon {...props} />)
|
|
23
|
+
// because we cannot safely determine or modify aria-related attributes.
|
|
24
|
+
if ((0, _has_spread.hasSpread)(openingElement.attributes)) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
20
27
|
let ariaHiddenAttr;
|
|
21
28
|
let tabIndexAttr;
|
|
22
29
|
let isIconNamed = false;
|
|
@@ -29,14 +36,9 @@ const EuiIconAccessibilityRules = exports.EuiIconAccessibilityRules = _utils.ESL
|
|
|
29
36
|
isIconNamed = true;
|
|
30
37
|
}
|
|
31
38
|
}
|
|
32
|
-
const hasAriaHiddenTrue = !!ariaHiddenAttr && ariaHiddenAttr.value && (
|
|
33
|
-
// aria-hidden={true}
|
|
34
|
-
ariaHiddenAttr.value.type === 'JSXExpressionContainer' && ariaHiddenAttr.value.expression.type === 'Literal' && ariaHiddenAttr.value.expression.value === true ||
|
|
35
|
-
// aria-hidden='true'
|
|
36
|
-
ariaHiddenAttr.value.type === 'Literal' && ariaHiddenAttr.value.value === 'true');
|
|
37
39
|
|
|
38
40
|
// Case: `tabIndex` and `aria-hidden` cannot be used together
|
|
39
|
-
if (tabIndexAttr &&
|
|
41
|
+
if (tabIndexAttr && ariaHiddenAttr) {
|
|
40
42
|
context.report({
|
|
41
43
|
node: openingElement,
|
|
42
44
|
messageId: 'tabIndexWithAriaHidden',
|
|
@@ -49,8 +51,8 @@ const EuiIconAccessibilityRules = exports.EuiIconAccessibilityRules = _utils.ESL
|
|
|
49
51
|
return;
|
|
50
52
|
}
|
|
51
53
|
|
|
52
|
-
// Require accessible name or `aria-hidden
|
|
53
|
-
if (!isIconNamed && !
|
|
54
|
+
// Require accessible name or `aria-hidden`; if `aria-hidden` exists, do not insert a value
|
|
55
|
+
if (!isIconNamed && !ariaHiddenAttr) {
|
|
54
56
|
context.report({
|
|
55
57
|
node: openingElement,
|
|
56
58
|
messageId: 'missingTitleOrAriaHidden',
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ESLintUtils } from '@typescript-eslint/utils';
|
|
2
|
-
export declare const RequireAriaLabelForModals: ESLintUtils.RuleModule<"modalAriaMissing" | "confirmModalAriaMissing", [], unknown, ESLintUtils.RuleListener>;
|
|
2
|
+
export declare const RequireAriaLabelForModals: ESLintUtils.RuleModule<"modalAriaMissing" | "confirmModalAriaMissing" | "popoverAriaMissing", [], unknown, ESLintUtils.RuleListener>;
|
|
3
3
|
//# sourceMappingURL=require_aria_label_for_modals.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"require_aria_label_for_modals.d.ts","sourceRoot":"","sources":["../../../../src/rules/a11y/require_aria_label_for_modals.ts"],"names":[],"mappings":"AAQA,OAAO,EAAY,WAAW,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"require_aria_label_for_modals.d.ts","sourceRoot":"","sources":["../../../../src/rules/a11y/require_aria_label_for_modals.ts"],"names":[],"mappings":"AAQA,OAAO,EAAY,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAOjE,eAAO,MAAM,yBAAyB,sIAsHpC,CAAC"}
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.RequireAriaLabelForModals = void 0;
|
|
7
7
|
var _utils = require("@typescript-eslint/utils");
|
|
8
|
+
var _has_spread = require("../../utils/has_spread");
|
|
8
9
|
/*
|
|
9
10
|
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
10
11
|
* or more contributor license agreements. Licensed under the Elastic License
|
|
@@ -15,6 +16,7 @@ var _utils = require("@typescript-eslint/utils");
|
|
|
15
16
|
|
|
16
17
|
const modalComponents = ['EuiModal', 'EuiFlyout', 'EuiFlyoutResizable'];
|
|
17
18
|
const confirmModalComponents = ['EuiConfirmModal'];
|
|
19
|
+
const popoverComponents = ['EuiPopover', 'EuiWrappingPopover'];
|
|
18
20
|
const RequireAriaLabelForModals = exports.RequireAriaLabelForModals = _utils.ESLintUtils.RuleCreator.withoutDocs({
|
|
19
21
|
create(context) {
|
|
20
22
|
function checkAttributes(node, componentName, messageId) {
|
|
@@ -31,13 +33,16 @@ const RequireAriaLabelForModals = exports.RequireAriaLabelForModals = _utils.ESL
|
|
|
31
33
|
}
|
|
32
34
|
return {
|
|
33
35
|
JSXOpeningElement(node) {
|
|
34
|
-
if (node.name.type === 'JSXIdentifier') {
|
|
36
|
+
if (node.name.type === 'JSXIdentifier' && !(0, _has_spread.hasSpread)(node.attributes)) {
|
|
35
37
|
if (modalComponents.includes(node.name.name)) {
|
|
36
38
|
checkAttributes(node, node.name.name, 'modalAriaMissing');
|
|
37
39
|
}
|
|
38
40
|
if (confirmModalComponents.includes(node.name.name)) {
|
|
39
41
|
checkAttributes(node, node.name.name, 'confirmModalAriaMissing');
|
|
40
42
|
}
|
|
43
|
+
if (popoverComponents.includes(node.name.name)) {
|
|
44
|
+
checkAttributes(node, node.name.name, 'popoverAriaMissing');
|
|
45
|
+
}
|
|
41
46
|
}
|
|
42
47
|
return;
|
|
43
48
|
}
|
|
@@ -51,7 +56,8 @@ const RequireAriaLabelForModals = exports.RequireAriaLabelForModals = _utils.ESL
|
|
|
51
56
|
schema: [],
|
|
52
57
|
messages: {
|
|
53
58
|
modalAriaMissing: ['{{ component }} must have either \'aria-label\' or \'aria-labelledby\' prop for accessibility.', '\n', 'Option 1: Using \'aria-labelledby\' (preferred):', '1. Import \'useGeneratedHtmlId\':', ' import { useGeneratedHtmlId } from \'@elastic/eui\';', '2. Update your component:', ' const modalTitleId = useGeneratedHtmlId();', ' ...', ' <{{ component }}', ' aria-labelledby={modalTitleId}', ' {...props} ', ' />', ' <{{ component }}Header>', ' <EuiTitle id={modalTitleId}>', ' {\'Descriptive title for the {{ component }}\'}', ' </EuiTitle>', ' </{ component }}Header>', ' ...', ' </{{ component }}>', '\n', 'Option 2: Using \'aria-label\':', ' <{{ component }} aria-label="Descriptive title for the {{ component }}" {...props} />'].join('\n'),
|
|
54
|
-
confirmModalAriaMissing: ['{{ component }} must have either \'aria-label\' or \'aria-labelledby\' prop for accessibility.', '\n', 'Option 1: Using \'aria-labelledby\' (preferred):', '1. Import \'useGeneratedHtmlId\':', ' import { useGeneratedHtmlId } from \'@elastic/eui\';', '2. Update your component:', ' const modalTitleId = useGeneratedHtmlId();', ' ...', ' <{{ component }}', ' title="Descriptive title for the {{ component }}"', ' aria-labelledby={modalTitleId}', ' titleProps={({id: modalTitleId })}', ' {...props} ', ' />', '\n', 'Option 2: Using \'aria-label\':', ' <{{ component }} aria-label="Descriptive title for the {{ component }}" {...props} />'].join('\n')
|
|
59
|
+
confirmModalAriaMissing: ['{{ component }} must have either \'aria-label\' or \'aria-labelledby\' prop for accessibility.', '\n', 'Option 1: Using \'aria-labelledby\' (preferred):', '1. Import \'useGeneratedHtmlId\':', ' import { useGeneratedHtmlId } from \'@elastic/eui\';', '2. Update your component:', ' const modalTitleId = useGeneratedHtmlId();', ' ...', ' <{{ component }}', ' title="Descriptive title for the {{ component }}"', ' aria-labelledby={modalTitleId}', ' titleProps={({id: modalTitleId })}', ' {...props} ', ' />', '\n', 'Option 2: Using \'aria-label\':', ' <{{ component }} aria-label="Descriptive title for the {{ component }}" {...props} />'].join('\n'),
|
|
60
|
+
popoverAriaMissing: ['{{ component }} must have either \'aria-label\' or \'aria-labelledby\' prop for accessibility.', '\n', 'Option 1: Using \'aria-labelledby\' (preferred):', '1. Import \'useGeneratedHtmlId\':', ' import { useGeneratedHtmlId } from \'@elastic/eui\';', '2. Update your component:', ' const popoverTitleId = useGeneratedHtmlId();', ' ...', ' <{{ component }}', ' aria-labelledby={popoverTitleId}', ' {...props} ', ' />', ' <EuiPopoverTitle id={popoverTitleId}>' + ' {\'Descriptive title for the {{ component }}\'}', ' </EuiPopoverTitle>', ' ...', ' </{{ component }}>', '\n', 'Option 2: Using \'aria-label\':', ' <{{ component }} aria-label="Descriptive title for the {{ component }}" {...props} />'].join('\n')
|
|
55
61
|
}
|
|
56
62
|
},
|
|
57
63
|
defaultOptions: []
|
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.EuiIconAccessibilityRules = void 0;
|
|
4
4
|
const utils_1 = require("@typescript-eslint/utils");
|
|
5
5
|
const remove_attr_1 = require("../../utils/remove_attr");
|
|
6
|
+
const has_spread_1 = require("../../utils/has_spread");
|
|
6
7
|
const COMPONENT = 'EuiIcon';
|
|
7
8
|
exports.EuiIconAccessibilityRules = utils_1.ESLintUtils.RuleCreator.withoutDocs({
|
|
8
9
|
create(context) {
|
|
@@ -13,6 +14,11 @@ exports.EuiIconAccessibilityRules = utils_1.ESLintUtils.RuleCreator.withoutDocs(
|
|
|
13
14
|
openingElement.name.name !== COMPONENT) {
|
|
14
15
|
return;
|
|
15
16
|
}
|
|
17
|
+
// Skip fixing when spread props are present (e.g., <EuiIcon {...props} />)
|
|
18
|
+
// because we cannot safely determine or modify aria-related attributes.
|
|
19
|
+
if ((0, has_spread_1.hasSpread)(openingElement.attributes)) {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
16
22
|
let ariaHiddenAttr;
|
|
17
23
|
let tabIndexAttr;
|
|
18
24
|
let isIconNamed = false;
|
|
@@ -28,18 +34,8 @@ exports.EuiIconAccessibilityRules = utils_1.ESLintUtils.RuleCreator.withoutDocs(
|
|
|
28
34
|
isIconNamed = true;
|
|
29
35
|
}
|
|
30
36
|
}
|
|
31
|
-
const hasAriaHiddenTrue = !!ariaHiddenAttr &&
|
|
32
|
-
ariaHiddenAttr.value &&
|
|
33
|
-
(
|
|
34
|
-
// aria-hidden={true}
|
|
35
|
-
(ariaHiddenAttr.value.type === 'JSXExpressionContainer' &&
|
|
36
|
-
ariaHiddenAttr.value.expression.type === 'Literal' &&
|
|
37
|
-
ariaHiddenAttr.value.expression.value === true) ||
|
|
38
|
-
// aria-hidden='true'
|
|
39
|
-
(ariaHiddenAttr.value.type === 'Literal' &&
|
|
40
|
-
ariaHiddenAttr.value.value === 'true'));
|
|
41
37
|
// Case: `tabIndex` and `aria-hidden` cannot be used together
|
|
42
|
-
if (tabIndexAttr &&
|
|
38
|
+
if (tabIndexAttr && ariaHiddenAttr) {
|
|
43
39
|
context.report({
|
|
44
40
|
node: openingElement,
|
|
45
41
|
messageId: 'tabIndexWithAriaHidden',
|
|
@@ -52,8 +48,8 @@ exports.EuiIconAccessibilityRules = utils_1.ESLintUtils.RuleCreator.withoutDocs(
|
|
|
52
48
|
});
|
|
53
49
|
return;
|
|
54
50
|
}
|
|
55
|
-
// Require accessible name or `aria-hidden
|
|
56
|
-
if (!isIconNamed && !
|
|
51
|
+
// Require accessible name or `aria-hidden`; if `aria-hidden` exists, do not insert a value
|
|
52
|
+
if (!isIconNamed && !ariaHiddenAttr) {
|
|
57
53
|
context.report({
|
|
58
54
|
node: openingElement,
|
|
59
55
|
messageId: 'missingTitleOrAriaHidden',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon_accessibility_rules.js","sourceRoot":"","sources":["../../../../src/rules/a11y/icon_accessibility_rules.ts"],"names":[],"mappings":";;;AAAA,oDAAiE;AACjE,yDAA0D;
|
|
1
|
+
{"version":3,"file":"icon_accessibility_rules.js","sourceRoot":"","sources":["../../../../src/rules/a11y/icon_accessibility_rules.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ESLintUtils } from '@typescript-eslint/utils';
|
|
2
|
-
export declare const RequireAriaLabelForModals: ESLintUtils.RuleModule<"modalAriaMissing" | "confirmModalAriaMissing", [], unknown, ESLintUtils.RuleListener>;
|
|
2
|
+
export declare const RequireAriaLabelForModals: ESLintUtils.RuleModule<"modalAriaMissing" | "confirmModalAriaMissing" | "popoverAriaMissing", [], unknown, ESLintUtils.RuleListener>;
|
|
@@ -9,8 +9,10 @@
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.RequireAriaLabelForModals = void 0;
|
|
11
11
|
const utils_1 = require("@typescript-eslint/utils");
|
|
12
|
+
const has_spread_1 = require("../../utils/has_spread");
|
|
12
13
|
const modalComponents = ['EuiModal', 'EuiFlyout', 'EuiFlyoutResizable'];
|
|
13
14
|
const confirmModalComponents = ['EuiConfirmModal'];
|
|
15
|
+
const popoverComponents = ['EuiPopover', 'EuiWrappingPopover'];
|
|
14
16
|
exports.RequireAriaLabelForModals = utils_1.ESLintUtils.RuleCreator.withoutDocs({
|
|
15
17
|
create(context) {
|
|
16
18
|
function checkAttributes(node, componentName, messageId) {
|
|
@@ -27,13 +29,16 @@ exports.RequireAriaLabelForModals = utils_1.ESLintUtils.RuleCreator.withoutDocs(
|
|
|
27
29
|
}
|
|
28
30
|
return {
|
|
29
31
|
JSXOpeningElement(node) {
|
|
30
|
-
if (node.name.type === 'JSXIdentifier') {
|
|
32
|
+
if (node.name.type === 'JSXIdentifier' && !(0, has_spread_1.hasSpread)(node.attributes)) {
|
|
31
33
|
if (modalComponents.includes(node.name.name)) {
|
|
32
34
|
checkAttributes(node, node.name.name, 'modalAriaMissing');
|
|
33
35
|
}
|
|
34
36
|
if (confirmModalComponents.includes(node.name.name)) {
|
|
35
37
|
checkAttributes(node, node.name.name, 'confirmModalAriaMissing');
|
|
36
38
|
}
|
|
39
|
+
if (popoverComponents.includes(node.name.name)) {
|
|
40
|
+
checkAttributes(node, node.name.name, 'popoverAriaMissing');
|
|
41
|
+
}
|
|
37
42
|
}
|
|
38
43
|
return;
|
|
39
44
|
},
|
|
@@ -88,6 +93,28 @@ exports.RequireAriaLabelForModals = utils_1.ESLintUtils.RuleCreator.withoutDocs(
|
|
|
88
93
|
'\n',
|
|
89
94
|
'Option 2: Using \'aria-label\':',
|
|
90
95
|
' <{{ component }} aria-label="Descriptive title for the {{ component }}" {...props} />',
|
|
96
|
+
].join('\n'),
|
|
97
|
+
popoverAriaMissing: [
|
|
98
|
+
'{{ component }} must have either \'aria-label\' or \'aria-labelledby\' prop for accessibility.',
|
|
99
|
+
'\n',
|
|
100
|
+
'Option 1: Using \'aria-labelledby\' (preferred):',
|
|
101
|
+
'1. Import \'useGeneratedHtmlId\':',
|
|
102
|
+
' import { useGeneratedHtmlId } from \'@elastic/eui\';',
|
|
103
|
+
'2. Update your component:',
|
|
104
|
+
' const popoverTitleId = useGeneratedHtmlId();',
|
|
105
|
+
' ...',
|
|
106
|
+
' <{{ component }}',
|
|
107
|
+
' aria-labelledby={popoverTitleId}',
|
|
108
|
+
' {...props} ',
|
|
109
|
+
' />',
|
|
110
|
+
' <EuiPopoverTitle id={popoverTitleId}>' +
|
|
111
|
+
' {\'Descriptive title for the {{ component }}\'}',
|
|
112
|
+
' </EuiPopoverTitle>',
|
|
113
|
+
' ...',
|
|
114
|
+
' </{{ component }}>',
|
|
115
|
+
'\n',
|
|
116
|
+
'Option 2: Using \'aria-label\':',
|
|
117
|
+
' <{{ component }} aria-label="Descriptive title for the {{ component }}" {...props} />',
|
|
91
118
|
].join('\n')
|
|
92
119
|
},
|
|
93
120
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"require_aria_label_for_modals.js","sourceRoot":"","sources":["../../../../src/rules/a11y/require_aria_label_for_modals.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;;AAEH,oDAAiE;
|
|
1
|
+
{"version":3,"file":"require_aria_label_for_modals.js","sourceRoot":"","sources":["../../../../src/rules/a11y/require_aria_label_for_modals.ts"],"names":[],"mappings":"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"}
|