Skip to content

Commit

Permalink
[Enterprise Search] Fix SchemaFieldTypeSelect axe issues (#100035)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
Constance authored May 13, 2021
1 parent 4300977 commit 609fed3
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}>
Expand Down Expand Up @@ -74,6 +76,7 @@ export const SchemaTable: React.FC = () => {
fieldName={fieldName}
fieldType={fieldType}
updateExistingFieldType={updateSchemaFieldType}
aria-labelledby="schemaFieldType"
/>
</EuiTableRowCell>
</EuiTableRow>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -58,6 +58,7 @@ export const SchemaFieldsTable: React.FC = () => {
fieldName={fieldName}
fieldType={filteredSchemaFields[fieldName]}
updateExistingFieldType={updateExistingFieldType}
aria-labelledby="schemaDataType"
/>
</EuiTableRowCell>
</EuiTableRow>
Expand Down

0 comments on commit 609fed3

Please sign in to comment.