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

[Terra-SearchSelect]SR doesn't announce the placeholder when the input field gains focus. #3984

Merged
merged 22 commits into from
Dec 5, 2023
Merged

[Terra-SearchSelect]SR doesn't announce the placeholder when the input field gains focus. #3984

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
674fcdc
added aria-invalid attribute and visual label
Nov 15, 2023
8e7621a
Merge branch 'main' of https://github.com/cerner/terra-core into AH10…
Nov 15, 2023
c0e4c12
added changelog
Nov 15, 2023
6e9d248
snap update
Nov 15, 2023
bbd4891
added label in examples
Nov 15, 2023
6762150
modified changelog
Nov 16, 2023
91435b4
Merge branch 'main' of https://github.com/cerner/terra-core into AH10…
Nov 16, 2023
645bd70
removed space
Nov 16, 2023
8afddb4
removed space
Nov 16, 2023
5d1891e
Added line break
Nov 16, 2023
0cf569a
Merge branch 'main' of https://github.com/cerner/terra-core into AH10…
Nov 17, 2023
eb3c2b0
added placeholder
Nov 21, 2023
f941cfe
Merge branch 'main' of https://github.com/cerner/terra-core into AH10…
Nov 21, 2023
42d8b2c
added changelog
Nov 21, 2023
f0231ab
resolved review comments
Nov 23, 2023
b5951b0
Implemented review comments
Nov 23, 2023
c2b4b01
Merge branch 'main' of https://github.com/cerner/terra-core into AH10…
Nov 28, 2023
b86c09b
Merge branch 'main' into AH106586-Terra-SearchSelect
supreethmr Dec 1, 2023
e8fddbd
removed placeholder text from aria label
PK106552 Dec 5, 2023
5497751
Updated CHANGELOG file
PK106552 Dec 5, 2023
5891c74
Updated CHANGELOG file
PK106552 Dec 5, 2023
2069857
Merge branch 'main' into AH106586-Terra-SearchSelect
PK106552 Dec 5, 2023
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-core-docs/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Added
* Added aria-label to announce the visual label.

## 1.52.0 - (November 21, 2023)

* Added
Expand Down
2 changes: 1 addition & 1 deletion packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/search/Search.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const cx = classNames.bind(styles);
const SearchSelectExample = () => (
<>
<label htmlFor="color-field-1"><strong>Colors</strong></label>
<SearchSelect placeholder="Select a color" className={cx('form-select')} inputId="color-field-1">
<SearchSelect placeholder="Select a color" ariaLabel="Colors" className={cx('form-select')} inputId="color-field-1">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this code updates Colors in two places, one at input control as aria-label prop and another at added for label values Since input has got role as combobox I think aria-label should be sufficient for all both VO and JAWS .
I think we can remove the label span and keep the prop aria-label on form-search-select.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed as we are passing aria-label.

<SearchSelect.Option value="blue" display="Blue" />
<SearchSelect.Option value="green" display="Green" />
<SearchSelect.Option value="purple" display="Purple" />
Expand Down
3 changes: 3 additions & 0 deletions packages/terra-form-select/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Added
* Added Chrome-specific condition to announce the placeholder.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it still chrome specific condition

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.


## 6.51.0 - (November 21, 2023)

* Added
Expand Down
16 changes: 9 additions & 7 deletions packages/terra-form-select/src/search/Frame.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -510,18 +510,23 @@ class Frame extends React.Component {
* Falls back to the string 'Search' if no label is provided
*/
ariaLabel() {
const { ariaLabel, disabled, intl } = this.props;
const {
ariaLabel, disabled, intl, placeholder,
} = this.props;

const defaultAriaLabel = intl.formatMessage({ id: 'Terra.form.select.ariaLabel' });
const dimmed = intl.formatMessage({ id: 'Terra.form.select.dimmed' });

// VO on iOS doesn't do a good job of announcing disabled stated. Here we append the phrase that
// VO associates with disabled form controls.
if ('ontouchstart' in window && disabled) {
return ariaLabel === undefined ? `${defaultAriaLabel} ${dimmed}` : `${ariaLabel} ${dimmed}`;
return ariaLabel === undefined
? `${defaultAriaLabel} ${placeholder} ${dimmed}`
: `${ariaLabel} ${placeholder} ${dimmed}`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
return ariaLabel === undefined
? `${defaultAriaLabel} ${placeholder} ${dimmed}`
: `${ariaLabel} ${placeholder} ${dimmed}`;
return ariaLabel === undefined
? `${defaultAriaLabel}, ${placeholder} ${dimmed}`
: `${ariaLabel}, ${placeholder} ${dimmed}`;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

}

return ariaLabel === undefined ? defaultAriaLabel : ariaLabel;
return ariaLabel === undefined
? `${defaultAriaLabel} ${placeholder}`
: `${ariaLabel} ${placeholder}`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
return ariaLabel === undefined
? `${defaultAriaLabel} ${placeholder}`
: `${ariaLabel} ${placeholder}`;
return ariaLabel === undefined
? `${defaultAriaLabel}, ${placeholder}`
: `${ariaLabel}, ${placeholder}`;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

}

/**
Expand Down Expand Up @@ -654,7 +659,6 @@ class Frame extends React.Component {
customProps.className,
);

const labelId = `terra-select-screen-reader-label-${uniqueid()}`;
const descriptionId = `terra-select-screen-reader-description-${uniqueid()}`;
const customAriaDescribedbyIds = customProps['aria-describedby'];
const ariaDescribedBy = customAriaDescribedbyIds ? `${descriptionId} ${customAriaDescribedbyIds}` : descriptionId;
Expand Down Expand Up @@ -692,8 +696,6 @@ class Frame extends React.Component {
ref={(select) => { this.select = select; }}
>
<div className={cx('visually-hidden-component')} hidden>
{/* Hidden attribute used to prevent VoiceOver on desktop from announcing this content twice */}
<span id={labelId}>{this.ariaLabel()}</span>
<span id={descriptionId}>{this.renderDescriptionText()}</span>
</div>
<div className={cx('display')}>
Expand Down
19 changes: 7 additions & 12 deletions packages/terra-form-select/tests/jest/__snapshots__/Frame.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,12 +195,7 @@ exports[`Frame correctly applies the theme context className for search variant
hidden=""
>
<span
id="terra-select-screen-reader-label-13"
>
Terra.form.select.ariaLabel
</span>
<span
id="terra-select-screen-reader-description-14"
id="terra-select-screen-reader-description-13"
>
Terra.form.select.listOfTotalOptions Terra.form.select.searchUsageGuidance
</span>
Expand All @@ -212,11 +207,11 @@ exports[`Frame correctly applies the theme context className for search variant
class="content"
>
<input
aria-describedby="terra-select-screen-reader-description-14"
aria-describedby="terra-select-screen-reader-description-13"
aria-disabled="false"
aria-expanded="false"
aria-invalid="false"
aria-label="Terra.form.select.ariaLabel"
aria-label="Terra.form.select.ariaLabel undefined"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

undefined should not be part of Aria-label

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Modified.

aria-required="false"
class="search-input"
role="combobox"
Expand All @@ -243,7 +238,7 @@ exports[`Frame correctly applies the theme context className for search variant

exports[`Frame correctly applies the theme context className for tag variant 1`] = `
<div
aria-describedby="terra-select-screen-reader-description-18"
aria-describedby="terra-select-screen-reader-description-17"
aria-disabled="false"
aria-expanded="false"
aria-haspopup="true"
Expand All @@ -257,12 +252,12 @@ exports[`Frame correctly applies the theme context className for tag variant 1`]
hidden=""
>
<span
id="terra-select-screen-reader-label-16"
id="terra-select-screen-reader-label-15"
>
Terra.form.select.ariaLabel
</span>
<span
id="terra-select-screen-reader-description-18"
id="terra-select-screen-reader-description-17"
>
Terra.form.select.listOfTotalOptions Terra.form.select.multiSelectUsageGuidance
</span>
Expand All @@ -278,7 +273,7 @@ exports[`Frame correctly applies the theme context className for tag variant 1`]
class="search-wrapper"
>
<input
aria-describedby="terra-select-screen-reader-display-17 terra-select-screen-reader-description-18"
aria-describedby="terra-select-screen-reader-display-16 terra-select-screen-reader-description-17"
aria-disabled="false"
aria-label="Terra.form.select.ariaLabel"
aria-required="false"
Expand Down
Loading