fix(DatePickerInput): announce keyboard guide

This change adds a content that is referred from `aria-describedby` in
date picker's `<input>` (for single/range mode). The content announces
how to navigate to, and how to navigate within calendar dropdown by
keyboard.

There were a few options in order to announce how to navigate to date
picker; Two of them are from W3C WAI-ARIA Authoring Practices 1.1, a)
Date Picker Dialog Example, b) Combobox with Grid Popup Example.

a) has very different user interaction model from ours, because we want
date picker to be open when the `<input>` gets focus but a) opens date
picker only when the calendar icon is clicked.

b) lets us announce the existence of dropdown, etc. in a similar manner
as our other dropdown components do, but `role="combobox"` does not
sound adequate for a date picker.

Therefore, this change uses a custom content to announce how to
navigate to calendar dropdown, rather than the content screen reader
automatically creates/announces.

Refs carbon-design-system#5310.

packages/react/src/components/DatePickerInput/DatePickerInput.js

@@ -30,13 +30,24 @@ export default class DatePickerInput extends Component {
      * control
      */
     labelText: PropTypes.node.isRequired,
+
+    /**
+     * Provide text to be read to screen readers so we can tell user that
+     * he/she can start using calendar dropdown with down arrow key
+     */
+    calendarDropdownAssistiveText: PropTypes.string,
   };
 
   static defaultProps = {
     pattern: '\\d{1,2}\\/\\d{1,2}\\/\\d{4}',
     type: 'text',
     disabled: false,
     invalid: false,
+    calendarDropdownAssistiveText: [
+      'Use down arrow key to navigate to calendar dropdown.',
+      'Use arrow keys to navigate through dates.',
+      'Use control-arrow keys to increment and decrement year and month.',
+    ].join(' '),
     onClick: () => {},
     onChange: () => {},
   };
@@ -57,6 +68,7 @@ export default class DatePickerInput extends Component {
       pattern,
       iconDescription,
       openCalendar,
+      calendarDropdownAssistiveText,
       ...other
     } = this.props;
 
@@ -75,6 +87,8 @@ export default class DatePickerInput extends Component {
       placeholder,
       type,
       pattern,
+      'aria-describedby':
+        datePickerType === 'simple' ? undefined : `${id}__assistive-text`,
     };
 
     const labelClasses = classNames(`${prefix}--label`, {
@@ -140,6 +154,13 @@ export default class DatePickerInput extends Component {
         <div className={`${prefix}--date-picker-input__wrapper`}>
           {input}
           {datePickerIcon}
+          {datePickerType !== 'simple' && (
+            <div
+              id={`${id}__assistive-text`}
+              className={`${prefix}--assistive-text`}>
+              {calendarDropdownAssistiveText}
+            </div>
+          )}
         </div>
         {error}
       </div>