elastic · alexwizp · Jun 20, 2025 · Jun 20, 2025 · Jun 20, 2025 · Jun 20, 2025
@@ -125,9 +125,13 @@ function MyComponent() {
     )
 }
 ```
-
 It's worth pointing out that although the examples provided are specific to EUI components, this rule applies to all JSX elements.
 
+### `@elastic/eui/require-aria-label-for-modals`
+
+Ensures that EUI modal components (`EuiModal`, `EuiFlyout`, `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.
+
+
 ## Testing
 
 ### Running unit tests

@@ -0,0 +1 @@
+- Added new `require-aria-label-for-modals` rule.
@@ -21,11 +21,14 @@ import { HrefOnClick } from './rules/href_or_on_click';
 import { NoRestrictedEuiImports } from './rules/no_restricted_eui_imports';
 import { NoCssColor } from './rules/no_css_color';
 
+import { RequireAriaLabelForModals } from './rules/a11y/require_aria_label_for_modals';
+
 const config = {
   rules: {
     'href-or-on-click': HrefOnClick,
     'no-restricted-eui-imports': NoRestrictedEuiImports,
     'no-css-color': NoCssColor,
+    'require-aria-label-for-modals': RequireAriaLabelForModals,
   },
   configs: {
     recommended: {
@@ -34,6 +37,7 @@ const config = {
         '@elastic/eui/href-or-on-click': 'warn',
         '@elastic/eui/no-restricted-eui-imports': 'warn',
         '@elastic/eui/no-css-color': 'warn',
+        '@elastic/eui/require-aria-label-for-modals': 'warn',
       },
     },
   },

@@ -0,0 +1,115 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import dedent from 'dedent';
+import { RuleTester } from '@typescript-eslint/rule-tester';
+
+import { RequireAriaLabelForModals } from './require_aria_label_for_modals';
+
+const languageOptions = {
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+};
+
+const ruleTester = new RuleTester();
+
+ruleTester.run('require-aria-label-for-modals', RequireAriaLabelForModals, {
+  valid: [
+    {
+      code: dedent`
+        module.export = () => (
+          <EuiModal aria-label="Modal title" />
+        )
+      `,
+      languageOptions,
+    },
+    {
+      code: dedent`
+        module.export = () => (
+          <EuiFlyout aria-labelledby="modalTitleId" />
+        )
+      `,
+      languageOptions,
+    },
+    {
+      code: dedent`
+        module.export = () => (
+          <EuiConfirmModal aria-label="Confirm action" />
+        )
+      `,
+      languageOptions,
+    },
+    {
+      code: dedent`
+        module.export = () => (
+          <div>Regular component without aria</div>
+        )
+      `,
+      languageOptions,
+    },
+  ],
+
+  invalid: [
+    {
+      code: dedent`
+        module.export = () => (
+          <EuiModal />
+        )
+      `,
+      languageOptions,
+      errors: [
+        {
+          messageId: 'modalAriaMissing',
+          data: { component: 'EuiModal' },
+        },
+      ],
+    },
+    {
+      code: dedent`
+        module.export = () => (
+          <EuiFlyout title="Some title" />
+        )
+      `,
+      languageOptions,
+      errors: [
+        {
+          messageId: 'modalAriaMissing',
+          data: { component: 'EuiFlyout' },
+        },
+      ],
+    },
+    {
+      code: dedent`
+        module.export = () => (
+          <EuiConfirmModal title="Delete item?" />
+        )
+      `,
+      languageOptions,
+      errors: [
+        {
+          messageId: 'confirmModalAriaMissing',
+          data: { component: 'EuiConfirmModal' },
+        },
+      ],
+    },
+  ],
+});
@@ -0,0 +1,117 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { TSESTree, ESLintUtils } from '@typescript-eslint/utils';
+
+const modalComponents = ['EuiModal', 'EuiFlyout'];
+const confirmModalComponents = ['EuiConfirmModal'];
+
+export const RequireAriaLabelForModals = ESLintUtils.RuleCreator.withoutDocs({
+  create(context) {
+    function checkAttributes(node: TSESTree.JSXOpeningElement, componentName: string, messageId: 'modalAriaMissing' | 'confirmModalAriaMissing') {
+      const hasAriaLabel = node.attributes.some(
+        (attr) =>
+          attr.type === 'JSXAttribute' &&
+          typeof attr.name.name === 'string' &&
+          ['aria-label', 'aria-labelledby'].includes(attr.name.name)
+      );
+
+      if (!hasAriaLabel) {
+        context.report({
+          node,
+          messageId: messageId,
+          data: { component: componentName },
+        });
+      }
+    }
+
+    return {
+      JSXOpeningElement(node) {
+        if (
+          node.name.type === 'JSXIdentifier'
+        ) {
+          if (modalComponents.includes(node.name.name)) {
+            checkAttributes(node, node.name.name, 'modalAriaMissing')
+          }
+
+          if (confirmModalComponents.includes(node.name.name)) {
+            checkAttributes(node, node.name.name, 'confirmModalAriaMissing')
+          }
+        }
+        return
+      },
+    };
+  },
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Ensure modals have \'aria-label\' or \'aria-labelledby\'',
+    },
+    schema: [],
+    messages: {
+      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'),
+
+      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')
+    },
+  },
+  defaultOptions: [],
+});
+
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Added new `require-aria-label-for-modals` rule.