[EuiColorPicker] Ensure EuiFormRow label is applied to EuiColorPicker (#9436)

Author: mgadewoll

packages/eslint-plugin/changelogs/upcoming/9436.md

@@ -0,0 +1 @@
+- Updated `no-unnamed-interactive-element` to include checking `EuiColorPicker`

packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.test.ts

@@ -44,6 +44,10 @@ ruleTester.run('NoUnnamedInteractiveElement', NoUnnamedInteractiveElement, {
       code: '<EuiBreadcrumbs aria-label="Breadcrumbs label" />',
       languageOptions,
     },
+    {
+      code: '<EuiColorPicker aria-label="ColorPicker label" />',
+      languageOptions,
+    },
     // Wrapped in EuiFormRow with label
     {
       code: '<EuiFormRow label="Row label"><EuiComboBox /></EuiFormRow>',
@@ -53,6 +57,10 @@ ruleTester.run('NoUnnamedInteractiveElement', NoUnnamedInteractiveElement, {
       code: '<EuiFormRow label="Row label"><EuiSelect /></EuiFormRow>',
       languageOptions,
     },
+    {
+      code: '<EuiFormRow label="Row label"><EuiColorPicker /></EuiFormRow>',
+      languageOptions,
+    },
   ],
   invalid: [
     // Missing a11y prop for interactive components
@@ -101,6 +109,11 @@ ruleTester.run('NoUnnamedInteractiveElement', NoUnnamedInteractiveElement, {
       languageOptions,
       errors: [{ messageId: 'missingA11y' }],
     },
+    {
+      code: '<EuiColorPicker />',
+      languageOptions,
+      errors: [{ messageId: 'missingA11y' }],
+    },
     // Wrapped but missing label
     {
       code: '<EuiFormRow><EuiComboBox /></EuiFormRow>',
@@ -112,5 +125,10 @@ ruleTester.run('NoUnnamedInteractiveElement', NoUnnamedInteractiveElement, {
       languageOptions,
       errors: [{ messageId: 'missingA11y' }],
     },
+    {
+      code: '<EuiFormRow><EuiColorPicker /></EuiFormRow>',
+      languageOptions,
+      errors: [{ messageId: 'missingA11y' }],
+    },
   ],
 });

packages/eslint-plugin/src/rules/a11y/no_unnamed_interactive_element.ts

@@ -24,6 +24,7 @@ const interactiveComponents = [
   'EuiPagination',
   'EuiTreeView',
   'EuiBreadcrumbs',
+  'EuiColorPicker',
 ] as const;
 
 const wrappingComponents = ['EuiFormRow'] as const;
@@ -54,7 +55,10 @@ export const NoUnnamedInteractiveElement = ESLintUtils.RuleCreator.withoutDocs({
     function report(opening: TSESTree.JSXOpeningElement) {
       if (opening.name.type !== 'JSXIdentifier') return;
       const component = opening.name.name;
-      const allowed = getAllowedA11yPropNamesForComponent(component, a11yConfig).join(', ');
+      const allowed = getAllowedA11yPropNamesForComponent(
+        component,
+        a11yConfig
+      ).join(', ');
       context.report({
         node: opening,
         messageId: 'missingA11y',

packages/eui/changelogs/upcoming/9436.md

@@ -0,0 +1,3 @@
+**Accessibility**
+
+- Fixed `aria-label` not being applied to `EuiColorPicker`'s input element