[Terra-SearchSelect]SR doesn't announce the placeholder when the input field gains focus. #3984
Conversation
…6586-Terra-SearchSelect
…6586-Terra-SearchSelect
…6586-Terra-SearchSelect
…6586-Terra-SearchSelect
|
|
||
| const defaultAriaLabel = intl.formatMessage({ id: 'Terra.form.select.ariaLabel' }); | ||
| const dimmed = intl.formatMessage({ id: 'Terra.form.select.dimmed' }); | ||
| const isChrome = navigator.userAgent.indexOf('Chrome') !== -1; |
There was a problem hiding this comment.
why are we making chrome specific fix. I can see place holders are not being read on Safari browser as well.
There was a problem hiding this comment.
I was using Safari 16.5 version hence not able to repro the issue, in latest 17.1 version the issue is reproducible, I have ensured uniform functionality across all browsers now.
| @@ -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"> | |||
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Removed as we are passing aria-label.
| @@ -2,6 +2,9 @@ | |||
|
|
|||
| ## Unreleased | |||
|
|
|||
| * Added | |||
| * Added Chrome-specific condition to announce the placeholder. | |||
There was a problem hiding this comment.
is it still chrome specific condition
| return ariaLabel === undefined | ||
| ? `${defaultAriaLabel} ${placeholder} ${dimmed}` | ||
| : `${ariaLabel} ${placeholder} ${dimmed}`; |
There was a problem hiding this comment.
| return ariaLabel === undefined | |
| ? `${defaultAriaLabel} ${placeholder} ${dimmed}` | |
| : `${ariaLabel} ${placeholder} ${dimmed}`; | |
| return ariaLabel === undefined | |
| ? `${defaultAriaLabel}, ${placeholder} ${dimmed}` | |
| : `${ariaLabel}, ${placeholder} ${dimmed}`; |
| return ariaLabel === undefined | ||
| ? `${defaultAriaLabel} ${placeholder}` | ||
| : `${ariaLabel} ${placeholder}`; |
There was a problem hiding this comment.
| return ariaLabel === undefined | |
| ? `${defaultAriaLabel} ${placeholder}` | |
| : `${ariaLabel} ${placeholder}`; | |
| return ariaLabel === undefined | |
| ? `${defaultAriaLabel}, ${placeholder}` | |
| : `${ariaLabel}, ${placeholder}`; |
| aria-disabled="false" | ||
| aria-expanded="false" | ||
| aria-invalid="false" | ||
| aria-label="Terra.form.select.ariaLabel" | ||
| aria-label="Terra.form.select.ariaLabel undefined" |
There was a problem hiding this comment.
undefined should not be part of Aria-label
…6586-Terra-SearchSelect
|
|
||
| return ariaLabel === undefined ? defaultAriaLabel : ariaLabel; | ||
| return placeholder ? `${modifiedAriaLabel}, ${placeholder}` : modifiedAriaLabel; |
There was a problem hiding this comment.
After selection of an item, we still hear the placeholder text being announced along with the item selected when navigated back to searchselect component. Do we still want to hear this?
single-select does not announce this way.
There was a problem hiding this comment.
We have removed placeholder text from aria label.
Placeholder prop has been deprecated and will be Removed on next major version release, Visual label should be used instead for better Accessibility experience.
Reference link => https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research
| @@ -89,7 +89,7 @@ const propTypes = { | |||
| */ | |||
| optionFilter: PropTypes.func, | |||
| /** | |||
| * Placeholder text. defaults to 'Select or Enter' | |||
| * Placeholder prop has been deperecated and will be updated on next major version relase, placeholder can be only visual text. | |||
There was a problem hiding this comment.
| * Placeholder prop has been deperecated and will be updated on next major version relase, placeholder can be only visual text. | |
| *  | |
| * Placeholder prop has been deprecated and will be Removed on next major version release, Visual label should be used instead for better Accessibility experience. |
0fe10ea to
5497751
Compare
4c6c11f to
5891c74
Compare
Summary
Fixed- SR doesn't announce the placeholder when the input field gains focus.
What was changed:
Added a condition to announce input field placeholder upon focus, resolving screen reader issues where placeholder announcement were missing.
Why it was changed:
The placeholder isn't announced across all browsers.
Testing
Post fix:
Screen.Recording.2023-11-27.at.10.55.36.AM.mov
This change was tested using:
Reviews
In addition to engineering reviews, this PR needs:
Additional Details
This PR resolves:
UXPLATFORM-9836
Thank you for contributing to Terra.
@cerner/terra