From 1a955a28841773d75e43c31cec01aa3a9b00a39c Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Thu, 13 May 2021 12:11:30 -0700
Subject: [PATCH] [Enterprise Search] Fix SchemaFieldTypeSelect axe issues
 (#100035)

* Update SchemaFieldTypeSelect to allow passing any aria props

- We'll specifically be using aria-labelledby in this PR, but theoretically any aria prop should be fine.

* Update AS & WS schema tables to use the type table column heading as an aria-labelledby ID
---
 .../components/schema/components/schema_table.tsx           | 5 ++++-
 .../shared/schema/field_type_select/index.test.tsx          | 6 ++++++
 .../applications/shared/schema/field_type_select/index.tsx  | 2 ++
 .../components/schema/schema_fields_table.tsx               | 3 ++-
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/components/schema_table.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/components/schema_table.tsx
index d9187bb65adf0..8fff01b268b12 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/components/schema_table.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/schema/components/schema_table.tsx
@@ -35,7 +35,9 @@ export const SchemaTable: React.FC = () => {
       <EuiTableHeader>
         <EuiTableHeaderCell>{FIELD_NAME}</EuiTableHeaderCell>
         <EuiTableHeaderCell aria-hidden />
-        <EuiTableHeaderCell align="right">{FIELD_TYPE}</EuiTableHeaderCell>
+        <EuiTableHeaderCell align="right" id="schemaFieldType">
+          {FIELD_TYPE}
+        </EuiTableHeaderCell>
       </EuiTableHeader>
       <EuiTableBody>
         <EuiTableRow style={{ height: 56 }}>
@@ -74,6 +76,7 @@ export const SchemaTable: React.FC = () => {
                   fieldName={fieldName}
                   fieldType={fieldType}
                   updateExistingFieldType={updateSchemaFieldType}
+                  aria-labelledby="schemaFieldType"
                 />
               </EuiTableRowCell>
             </EuiTableRow>
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/schema/field_type_select/index.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/schema/field_type_select/index.test.tsx
index df28719839011..6d51a06273712 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/schema/field_type_select/index.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/schema/field_type_select/index.test.tsx
@@ -39,4 +39,10 @@ describe('SchemaFieldTypeSelect', () => {
 
     expect(wrapper.find(EuiSelect).prop('disabled')).toEqual(true);
   });
+
+  it('passes arbitrary props', () => {
+    const wrapper = shallow(<SchemaFieldTypeSelect {...props} disabled aria-label="Test label" />);
+
+    expect(wrapper.find(EuiSelect).prop('aria-label')).toEqual('Test label');
+  });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/schema/field_type_select/index.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/schema/field_type_select/index.tsx
index 8dfd87f4015d6..fb6c0f2047b12 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/schema/field_type_select/index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/schema/field_type_select/index.tsx
@@ -23,10 +23,12 @@ export const SchemaFieldTypeSelect: React.FC<Props> = ({
   fieldType,
   updateExistingFieldType,
   disabled,
+  ...rest
 }) => {
   const fieldTypeOptions = Object.values(SchemaType).map((type) => ({ value: type, text: type }));
   return (
     <EuiSelect
+      {...rest}
       name={fieldName}
       required
       value={fieldType}
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_fields_table.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_fields_table.tsx
index db8a816f81cb4..0f9a91cf312e6 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_fields_table.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_fields_table.tsx
@@ -38,7 +38,7 @@ export const SchemaFieldsTable: React.FC = () => {
     <EuiTable tableLayout="auto">
       <EuiTableHeader>
         <EuiTableHeaderCell>{SCHEMA_ERRORS_TABLE_FIELD_NAME_HEADER}</EuiTableHeaderCell>
-        <EuiTableHeaderCell align="right">
+        <EuiTableHeaderCell align="right" id="schemaDataType">
           {SCHEMA_ERRORS_TABLE_DATA_TYPE_HEADER}
         </EuiTableHeaderCell>
       </EuiTableHeader>
@@ -58,6 +58,7 @@ export const SchemaFieldsTable: React.FC = () => {
                 fieldName={fieldName}
                 fieldType={filteredSchemaFields[fieldName]}
                 updateExistingFieldType={updateExistingFieldType}
+                aria-labelledby="schemaDataType"
               />
             </EuiTableRowCell>
           </EuiTableRow>