[Enterprise Search] Fix SchemaFieldTypeSelect axe issues (#100035) (#…

…100069) * 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 Co-authored-by: Constance <[email protected]>
elastic · May 13, 2021 · 24233c6 · 24233c6
1 parent 685e68d
commit 24233c6
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/...prise_search/public/applications/app_search/components/schema/components/schema_table.tsx b/...prise_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/...gins/enterprise_search/public/applications/shared/schema/field_type_select/index.test.tsx b/...gins/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/...k/plugins/enterprise_search/public/applications/shared/schema/field_type_select/index.tsx b/...k/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/...ications/workplace_search/views/content_sources/components/schema/schema_fields_table.tsx b/...ications/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>