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; }}
>
- {/* Hidden attribute used to prevent VoiceOver on desktop from announcing this content twice */}
- {this.ariaLabel()}
{this.renderDescriptionText()}
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"
>