diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index 04dde7799bd..1ba34fc3731 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Added aria-label to announce the visual label. + ## 1.52.0 - (November 21, 2023) * Added diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/search/Search.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/search/Search.jsx index c6b3ce7d99c..c0797e5404e 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/search/Search.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/search/Search.jsx @@ -8,7 +8,7 @@ const cx = classNames.bind(styles); const SearchSelectExample = () => ( <> - + diff --git a/packages/terra-form-select/CHANGELOG.md b/packages/terra-form-select/CHANGELOG.md index 3e777e1c88d..bf2da8a211e 100644 --- a/packages/terra-form-select/CHANGELOG.md +++ b/packages/terra-form-select/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased * Added + * Added condition to announce the placeholder across all browsers. * Added visual focus dashed border for `terra-form-select` list options. * Fixed diff --git a/packages/terra-form-select/src/Combobox.jsx b/packages/terra-form-select/src/Combobox.jsx index 9e6848d19ea..bc96ff84c13 100644 --- a/packages/terra-form-select/src/Combobox.jsx +++ b/packages/terra-form-select/src/Combobox.jsx @@ -89,7 +89,8 @@ const propTypes = { */ optionFilter: PropTypes.func, /** - * Placeholder text. defaults to 'Select or Enter' + * ![IMPORTANT](https://badgen.net/badge/prop/deprecated/red) + * Placeholder prop has been deprecated and will be Removed on next major version release, Visual label should be used instead for better Accessibility experience. */ placeholder: PropTypes.string, /** diff --git a/packages/terra-form-select/src/SearchSelect.jsx b/packages/terra-form-select/src/SearchSelect.jsx index b5894d13780..191d72e971d 100644 --- a/packages/terra-form-select/src/SearchSelect.jsx +++ b/packages/terra-form-select/src/SearchSelect.jsx @@ -89,7 +89,8 @@ const propTypes = { */ optionFilter: PropTypes.func, /** - * Placeholder text. + * ![IMPORTANT](https://badgen.net/badge/prop/deprecated/red) + * Placeholder prop has been deprecated and will be Removed on next major version release, Visual label should be used instead for better Accessibility experience. */ placeholder: PropTypes.string, /** diff --git a/packages/terra-form-select/src/combobox/Frame.jsx b/packages/terra-form-select/src/combobox/Frame.jsx index c2347eef392..3a6e7111a51 100644 --- a/packages/terra-form-select/src/combobox/Frame.jsx +++ b/packages/terra-form-select/src/combobox/Frame.jsx @@ -100,7 +100,8 @@ const propTypes = { */ optionFilter: PropTypes.func, /** - * Placeholder text. + * ![IMPORTANT](https://badgen.net/badge/prop/deprecated/red) + * Placeholder prop has been deprecated and will be Removed on next major version release, Visual label should be used instead for better Accessibility experience. */ placeholder: PropTypes.string, /** @@ -552,10 +553,10 @@ class Frame extends React.Component { // 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 ? `${placeholder}, ${dimmed}` : `${ariaLabel}, ${placeholder}, ${dimmed}`; + return ariaLabel === undefined ? `${placeholder}, ${dimmed}` : `${ariaLabel}, ${dimmed}`; } - return ariaLabel === undefined ? placeholder : `${ariaLabel}, ${placeholder}`; + return ariaLabel === undefined ? placeholder : ariaLabel; } /** diff --git a/packages/terra-form-select/src/search/Frame.jsx b/packages/terra-form-select/src/search/Frame.jsx index 5cec9dd26bd..cb746e4b9d0 100644 --- a/packages/terra-form-select/src/search/Frame.jsx +++ b/packages/terra-form-select/src/search/Frame.jsx @@ -100,7 +100,8 @@ const propTypes = { */ optionFilter: PropTypes.func, /** - * Placeholder text. + * ![IMPORTANT](https://badgen.net/badge/prop/deprecated/red) + * Placeholder prop has been deprecated and will be Removed on next major version release, Visual label should be used instead for better Accessibility experience. */ placeholder: PropTypes.string, /** @@ -528,8 +529,9 @@ 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, + } = this.props; const defaultAriaLabel = intl.formatMessage({ id: 'Terra.form.select.ariaLabel' }); const dimmed = intl.formatMessage({ id: 'Terra.form.select.dimmed' }); @@ -674,7 +676,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; @@ -712,8 +713,6 @@ class Frame extends React.Component { ref={(select) => { this.select = select; }} >
diff --git a/packages/terra-form-select/tests/jest/__snapshots__/Frame.test.jsx.snap b/packages/terra-form-select/tests/jest/__snapshots__/Frame.test.jsx.snap index 01dc9783ca7..83d6285d487 100644 --- a/packages/terra-form-select/tests/jest/__snapshots__/Frame.test.jsx.snap +++ b/packages/terra-form-select/tests/jest/__snapshots__/Frame.test.jsx.snap @@ -193,12 +193,7 @@ exports[`Frame correctly applies the theme context className for search variant hidden="" > - Terra.form.select.ariaLabel - - Terra.form.select.listOfTotalOptions Terra.form.select.searchUsageGuidance @@ -210,7 +205,7 @@ exports[`Frame correctly applies the theme context className for search variant class="content" > Terra.form.select.ariaLabel Terra.form.select.listOfTotalOptions Terra.form.select.multiSelectUsageGuidance @@ -276,7 +271,7 @@ exports[`Frame correctly applies the theme context className for tag variant 1`] class="search-wrapper" >