feat(TimePickerSelect): updated props for v11 (#9914)

sstrubberg · abbeyhrt · tay1orjones · web-flow · commit 580df55e10f3 · 2021-10-28T01:23:09.000Z
* feat(TimePickerSelect): updated props for v11

* feat(TimePickerSelect): updated public snappy

* feat(TimePickerSelect): re-added hideLabel

* feat(TimePickerSelect): updated public snappy

* Update packages/react/src/components/TimePickerSelect/TimePickerSelect.js

Co-authored-by: Abbey Hart &lt;abbeyhrt@gmail.com&gt;

* Update packages/react/src/components/TimePickerSelect/TimePickerSelect.js

Co-authored-by: Taylor Jones &lt;tay1orjones@users.noreply.github.com&gt;

* feat(TimePickerSelect): added bool back to hideLabel

* Update packages/react/src/components/TimePickerSelect/TimePickerSelect.js

Co-authored-by: Josh Black &lt;josh@josh.black&gt;

* feat(TimePickerSelect): aria-label tweaks

* feat(TimePickerSelect): updated public snapshot

* feat(TimePickerSelect): removed whitespaces

* Update packages/react/src/components/TimePickerSelect/TimePickerSelect.js

Co-authored-by: Josh Black &lt;josh@josh.black&gt;

Co-authored-by: Abbey Hart &lt;abbeyhrt@gmail.com&gt;
Co-authored-by: Taylor Jones &lt;tay1orjones@users.noreply.github.com&gt;
Co-authored-by: Josh Black &lt;josh@josh.black&gt;
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -7054,10 +7054,11 @@ Map {
   "TimePickerSelect" => Object {
     "defaultProps": Object {
       "disabled": false,
-      "iconDescription": "open list of options",
-      "inline": true,
     },
     "propTypes": Object {
+      "aria-label": Object {
+        "type": "string",
+      },
       "children": Object {
         "type": "node",
       },
@@ -7071,17 +7072,11 @@ Map {
         "type": "bool",
       },
       "hideLabel": [Function],
-      "iconDescription": Object {
-        "isRequired": true,
-        "type": "string",
-      },
+      "iconDescription": [Function],
       "id": Object {
         "isRequired": true,
         "type": "string",
       },
-      "inline": Object {
-        "type": "bool",
-      },
       "labelText": Object {
         "isRequired": true,
         "type": "node",
diff --git a/packages/react/src/components/TimePicker/TimePicker-story.js b/packages/react/src/components/TimePicker/TimePicker-story.js
@@ -59,8 +59,8 @@ const props = {
       'Label text (labelText in <TimePickerSelect>)',
       'Please select'
     ),
-    iconDescription: text(
-      'Trigger icon description (iconDescription in <TimePickerSelect>)',
+    ['aria-label']: text(
+      'ARIA label (aria-label in <TimePickerSelect>)',
       'open list of options'
     ),
   }),
diff --git a/packages/react/src/components/TimePickerSelect/TimePickerSelect.js b/packages/react/src/components/TimePickerSelect/TimePickerSelect.js
@@ -16,6 +16,11 @@ const { prefix } = settings;
 
 export default class TimePickerSelect extends Component {
   static propTypes = {
+    /**
+     * Provide aria-label to the <select> element
+     */
+    ['aria-label']: PropTypes.string,
+
     /**
      * Provide the contents of your TimePickerSelect
      */
@@ -37,7 +42,7 @@ export default class TimePickerSelect extends Component {
     disabled: PropTypes.bool,
 
     /**
-     * Specify whether the label should be hidden, or not
+     * hideLabel has been deprecated in v10 and will be removed in v11.
      */
     hideLabel: deprecate(
       PropTypes.bool,
@@ -46,20 +51,19 @@ export default class TimePickerSelect extends Component {
     ),
 
     /**
-     * Provide a description for the twistie icon that can be read by screen readers
+     * iconDescription is deprecated in v10 and will be removed in v11.
      */
-    iconDescription: PropTypes.string.isRequired,
+    iconDescription: deprecate(
+      PropTypes.string,
+      'The `iconDescription` prop for `TimePickerSelect` is no longer needed and has ' +
+        'been deprecated. It will be removed in the next major release. Use `aria-label` instead.'
+    ),
 
     /**
      * Specify a custom `id` for the `<select>`
      */
     id: PropTypes.string.isRequired,
 
-    /**
-     * Specify whether you want the inline version of this control
-     */
-    inline: PropTypes.bool,
-
     /**
      * Provide label text to be read by screen readers when interacting with the
      * control
@@ -69,21 +73,19 @@ export default class TimePickerSelect extends Component {
 
   static defaultProps = {
     disabled: false,
-    inline: true,
-    iconDescription: 'open list of options',
   };
 
   render() {
     const {
-      id,
-      disabled,
+      ['aria-label']: ariaLabel = 'open list of options',
       children,
-      iconDescription,
       className,
+      disabled,
       hideLabel = true,
+      id,
+      iconDescription,
       labelText,
-      inline, // eslint-disable-line
-      ...other
+      ...rest
     } = this.props;
 
     const selectClasses = classNames({
@@ -107,17 +109,17 @@ export default class TimePickerSelect extends Component {
       <div className={selectClasses}>
         {label}
         <select
-          {...other}
-          id={id}
           className={`${prefix}--select-input`}
-          disabled={disabled}>
+          disabled={disabled}
+          id={id}
+          aria-label={ariaLabel}
+          {...rest}>
           {children}
         </select>
         <ChevronDown16
           className={`${prefix}--select__arrow`}
-          aria-label={iconDescription}>
-          {iconDescription && <title>{iconDescription}</title>}
-        </ChevronDown16>
+          aria-label={ariaLabel ? ariaLabel : iconDescription}
+        />
       </div>
     );
   }
