diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 06db12c9923e..3a2b25187797 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -970,7 +970,7 @@ Map { "ComboBox" => Object { "$$typeof": Symbol(react.forward_ref), "defaultProps": Object { - "ariaLabel": "Choose an item", + "aria-label": "Choose an item", "direction": "bottom", "disabled": false, "itemToElement": null, @@ -979,9 +979,10 @@ Map { "type": "default", }, "propTypes": Object { - "ariaLabel": Object { + "aria-label": Object { "type": "string", }, + "ariaLabel": [Function], "className": Object { "type": "string", }, diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js index 40119b05da01..923035a48cdc 100644 --- a/packages/react/src/components/ComboBox/ComboBox.stories.js +++ b/packages/react/src/components/ComboBox/ComboBox.stories.js @@ -135,6 +135,11 @@ export const Playground = (args) => ( ); Playground.argTypes = { + ['aria-label']: { + table: { + disable: true, + }, + }, ariaLabel: { table: { disable: true, diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx index 93bcfe1e6071..15e7af471cae 100644 --- a/packages/react/src/components/ComboBox/ComboBox.tsx +++ b/packages/react/src/components/ComboBox/ComboBox.tsx @@ -86,6 +86,13 @@ export interface ComboBoxProps ExcludedAttributes > { /** + * Specify a label to be read by screen readers on the container node + * 'aria-label' of the ListBox component. + */ + ['aria-label']?: string; + + /** + * @deprecated please use `aria-label` instead. * 'aria-label' of the ListBox component. */ ariaLabel?: string; @@ -250,7 +257,8 @@ export interface ComboBoxProps const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => { const { - ariaLabel, + ['aria-label']: ariaLabel, + ariaLabel: deprecatedAriaLabel, className: containerClassName, direction, disabled, @@ -568,7 +576,10 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => { translateWithId={translateWithId} /> - + {isOpen ? filterItems(items, itemToString, inputValue).map( (item, index) => { @@ -634,9 +645,20 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => { ComboBox.displayName = 'ComboBox'; ComboBox.propTypes = { /** + * 'aria-label' of the ListBox component. + * Specify a label to be read by screen readers on the container node + */ + ['aria-label']: PropTypes.string, + + /** + * Deprecated, please use `aria-label` instead. + * Specify a label to be read by screen readers on the container note. * 'aria-label' of the ListBox component. */ - ariaLabel: PropTypes.string, + ariaLabel: deprecate( + PropTypes.string, + 'This prop syntax has been deprecated. Please use the new `aria-label`.' + ), /** * An optional className to add to the container node @@ -813,7 +835,7 @@ ComboBox.defaultProps = { itemToElement: null, shouldFilterItem: defaultShouldFilterItem, type: 'default', - ariaLabel: 'Choose an item', + ['aria-label']: 'Choose an item', direction: 'bottom', };