Date picker Usage and style information needs to be addressed

[mbgower]

This issue covers material additional to the two issues specifically opened up for Date picker carbon-design-system/carbon#11805 and carbon-design-system/carbon#11800

A review of the Usage and Style pages was carried out as part of an accessibility review. A number of design and implementation considerations for the Date picker component have been flagged in the Date picker usage.pdf and Date picker style.pdf documents.

These should be opened in Adobe Acrobat Reader (not in a browser) so that all the comments, replies and markings on status can be reviewed. (Any comments that have been addressed through updates to the Accessibility tab are marked as Complete or Resolved).

There are over 50 comments in the Usage document alone, attesting to the variety of considerations necessary for this component, among them:

[aagonzales]

My notes on actionable tasks from Gowers PDFs

Kits

• Add format by default in helper text (in addition to placeholder or remove placeholder?)
  • [Figma] Date picker: add helper text option carbon-design-kit#561

Website

Content edits

• Images
  • Update all images with correct helper text placement.
• Page:
  • clarify variant vs type language (sub-variants are types)
• Intro paragraph:
  • break apart into two sentences, one for date picker and one for time picker. Better clarity on variants.
• Overview:
  • The kind of date or time (exact, approximate, memorable) you request from the user will determine which picker (simple, calendar or time picker) is best to use.
  • When to use: break into two bullet points? (Instead of paragraph)
  • Variants/Calendar: say there are two types of calendar variants (single and range)
  • Hyperlink variant names
• Anatomy:
  • Add date format as a number, include in helper text or label area.
  • Day: Add link out to calendar variants for specific day type
  • Add weekday call out
• Sizes:
  • clarify the sizes are for the input only. Calendar menu remains is a fixed size and does not change with input size. (Example: show with calendar? Or maybe this is in the calendar variant section).
• Universal behaviors:
  • Add warning state
• Modifiers
  • Remove light variant
• Related
  • Using inputs: remove mention of time input, just for date

Style tab

• Typography:
  • add helper text, warning message, and placeholder

Future work

Future website

#3098
Page structure: Reformat the page

• Potentially give "time picker" it's own page separate from date pickt.
• Combine simple date and calendar picker into one section - include general information
• Make time picker is own specific section - move any general content about time picker into that section (anatomy, content ect)
  • Date picker
    • Simple
    • Calendar
      • Single
      • Range
  • Time pickers

Style tab

• Sections for layers (remove light modifiers from usage page)

Component fixes/enhancements for development

• Menu should not open on focus, only opens with a keyboard arrow prompt or when the user interacts with the input with a mouse (similar to dropdown): [Feature Request]: Date picker should not open on focus (or make it optional) carbon#9865
• Menu should close when focus is removed
• Keyboard cannot interact with anything in the Month/Year control area