refactor(ComboBox): ariaLabel to aria-label (#13273)

* refactor(ComboBox): ariaLabel to aria-label * fix: formatting --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Andrea N. Cardona <[email protected]>
carbon-design-system · Mar 3, 2023 · b0f39f3 · b0f39f3
1 parent c38e1a8
commit b0f39f3
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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}
                 />
               </div>
-              <ListBox.Menu {...getMenuProps({ 'aria-label': ariaLabel })}>
+              <ListBox.Menu
+                {...getMenuProps({
+                  'aria-label': deprecatedAriaLabel || ariaLabel,
+                })}>
                 {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',
 };