Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

[terra-search-field] Fixed a11y error caused due to empty aria label. #4044

Merged
merged 2 commits into from
Feb 27, 2024
Merged

[terra-search-field] Fixed a11y error caused due to empty aria label. #4044

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eeb5249
Fixed aria label issue
saket2403 Feb 27, 2024
572c3b5
Merge branch 'main' of https://github.com/cerner/terra-core into sear…
saket2403 Feb 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/terra-search-field/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Fixed
* Fixed empty aria-label issue.

## 3.100.0 - (February 15, 2024)

* Fixed
Expand Down
2 changes: 1 addition & 1 deletion packages/terra-search-field/src/SearchField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@ class SearchField extends React.Component {
customProps.className,
);

const groupNameValue = groupName !== 'Search' ? groupName : '';
const groupNameValue = groupName === 'Search' ? intl.formatMessage({ id: 'Terra.searchField.search' }) : groupName;
const inputAriaLabelText = inputAttributes && Object.prototype.hasOwnProperty.call(inputAttributes, 'aria-label') ? inputAttributes['aria-label'] : groupNameValue;
const buttonText = intl.formatMessage({ id: 'Terra.searchField.submit-search' });
const clearText = intl.formatMessage({ id: 'Terra.searchField.clear' });
Expand Down
2 changes: 1 addition & 1 deletion packages/terra-search-field/tests/jest/SearchField.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ describe('Snapshots', () => {

it('renders a search field with an aria-label using prop', () => {
const searchField = enzymeIntl.shallowWithIntl(<SearchField inputAttributes={{ ariaLabel: 'Search Field' }} />).dive();
expect(searchField.find('input').prop('aria-label')).toEqual('');
expect(searchField.find('input').prop('aria-label')).toEqual('Terra.searchField.search');
expect(searchField).toMatchSnapshot();
});

Expand Down
22 changes: 11 additions & 11 deletions packages/terra-search-field/tests/jest/__snapshots__/SearchField.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ exports[`Snapshots correctly applies the theme context className 1`] = `
>
<input
aria-disabled={false}
aria-label=""
aria-label="Terra.searchField.search"
className="input"
disabled={false}
onChange={[Function]}
Expand Down Expand Up @@ -196,7 +196,7 @@ exports[`Snapshots passes in inputRefCallback as the refCallback prop of the Inp
Array [
<input
aria-disabled="false"
aria-label=""
aria-label="Terra.searchField.search"
class="input"
placeholder=""
type="search"
Expand Down Expand Up @@ -262,7 +262,7 @@ exports[`Snapshots passes in inputRefCallback as the refCallback prop of the Inp
>
<input
aria-disabled={false}
aria-label=""
aria-label="Terra.searchField.search"
className="input"
disabled={false}
onChange={[Function]}
Expand Down Expand Up @@ -374,7 +374,7 @@ exports[`Snapshots renders a basic search field 1`] = `
>
<input
aria-disabled={false}
aria-label=""
aria-label="Terra.searchField.search"
className="input"
disabled={false}
onChange={[Function]}
Expand Down Expand Up @@ -427,7 +427,7 @@ exports[`Snapshots renders a disabled search field with a value 1`] = `
>
<input
aria-disabled={true}
aria-label=""
aria-label="Terra.searchField.search"
className="input"
disabled={true}
onChange={[Function]}
Expand Down Expand Up @@ -480,7 +480,7 @@ exports[`Snapshots renders a search field such that custom styles are applied 1`
>
<input
aria-disabled={false}
aria-label=""
aria-label="Terra.searchField.search"
className="input test-class"
disabled={false}
onChange={[Function]}
Expand Down Expand Up @@ -533,7 +533,7 @@ exports[`Snapshots renders a search field that displays as a block to fill its c
>
<input
aria-disabled={false}
aria-label=""
aria-label="Terra.searchField.search"
className="input"
disabled={false}
onChange={[Function]}
Expand Down Expand Up @@ -604,7 +604,7 @@ exports[`Snapshots renders a search field with a defaulted value 1`] = `
>
<input
aria-disabled={false}
aria-label=""
aria-label="Terra.searchField.search"
className="input"
defaultValue="Default"
disabled={false}
Expand Down Expand Up @@ -734,7 +734,7 @@ exports[`Snapshots renders a search field with a placeholder 1`] = `
>
<input
aria-disabled={false}
aria-label=""
aria-label="Terra.searchField.search"
className="input"
disabled={false}
onChange={[Function]}
Expand Down Expand Up @@ -787,7 +787,7 @@ exports[`Snapshots renders a search field with a value 1`] = `
>
<input
aria-disabled={false}
aria-label=""
aria-label="Terra.searchField.search"
className="input"
disabled={false}
onChange={[Function]}
Expand Down Expand Up @@ -912,7 +912,7 @@ exports[`Snapshots renders a search field with an aria-label using prop 1`] = `
>
<input
aria-disabled={false}
aria-label=""
aria-label="Terra.searchField.search"
ariaLabel="Search Field"
className="input"
disabled={false}
Expand Down
Loading