feat(DateTimePicker): Add WCAG 2.1 AA accessibility improvements for DatePicker and TimePicker components

[mfazil-eightfold]

SUMMARY:

This PR implements WCAG 2.1 AA accessibility improvements for DatePicker and TimePicker components, adding proper ARIA roles, attributes, keyboard navigation, and focus management.

DatePicker Component

1. Calendar Grid Structure ARIA Roles

• Added role="grid" to calendar <table> element
• Added role="row" to each <tr> element
• Added role="columnheader" with scope="col" to <th> elements
• Added role="gridcell" to each <td> element

Files: PartialBody.tsx, DateBody.tsx

2. Date Cell ARIA Attributes

• Added aria-selected="true/false" to date cells based on selection state
• Added aria-disabled="true" when disabledDate returns true
• Verified aria-label is present on all date cells

Files: PartialBody.tsx, Partial.types.ts, useCellProps.ts

3. Keyboard Navigation

• Added Shift + PageUp/PageDown for year navigation
• Maintained existing arrow key and PageUp/PageDown navigation

Files: uiUtil.ts, Date.tsx

4. Focus Management

• Initial focus: Selected date > Today's date > First available date
• Focus returns to input when picker closes or is cancelled

Files: DateBody.tsx, useCellProps.ts, OcPicker.tsx

5. Visible Focus Indicators

• Added :focus-visible styles with proper border-radius matching
• Focus indicators for date cells, navigation buttons, and clear button

Files: ocpicker.module.scss

TimePicker Component

1. Time Selection ARIA Roles

• Verified role="listbox" on container (already implemented)
• Verified role="option" on time options (already implemented)
• Verified role="combobox" on trigger (already implemented)

2. Time Column Labels

• Added aria-label to hours, minutes, seconds, and AM/PM columns
• Added locale support with translations in all 42 locale files

Files: TimeUnitColumn.tsx, TimeBody.tsx, Time.types.ts, OcPicker.types.ts, all locale files

GITHUB ISSUE (Open Source Contributors):

JIRA TASK (Eightfold Employees Only):

https://eightfoldai.atlassian.net/browse/ENG-167824
https://eightfoldai.atlassian.net/browse/ENG-167616
https://eightfoldai.atlassian.net/browse/ENG-167641

CHANGE TYPE:

• Bugfix Pull Request
• Feature Pull Request

TEST COVERAGE:

• Tests for this change already exist
• I have added unittests for this change

TEST PLAN:

Manual Testing

DatePicker Component:

1. Open DatePicker component in Storybook
2. Verify calendar grid structure:
   • Check role="grid" on <table> element
   • Check role="row" on all <tr> elements
   • Check role="columnheader" with scope="col" on <th> elements
   • Check role="gridcell" on all <td> elements
3. Verify date cell ARIA attributes:
   • Selected date has aria-selected="true"
   • Non-selected dates have aria-selected="false"
   • Disabled dates have aria-disabled="true"
   • All cells have descriptive aria-label
4. Test keyboard navigation:
   • Arrow keys navigate between dates
   • PageUp/PageDown changes month
   • Shift + PageUp/PageDown changes year
   • Ctrl + Left/Right changes year
   • Enter/Space selects date
   • Esc closes picker
5. Test focus management:
   • Initial focus on selected date (or today if no selection)
   • Focus returns to input when picker closes
   • Focus returns to input when picker is cancelled
6. Verify visible focus indicators:
   • Focus outline appears on date cells when navigating with keyboard
   • Focus outline matches cell border-radius
   • Focus indicators visible on navigation buttons
   • Focus indicators visible on clear button
7. Test RangePicker:
   • Both start and end dates have aria-selected="true"
   • Range selection works correctly

TimePicker Component:

1. Open TimePicker component in Storybook
2. Verify time columns display with proper ARIA labels
3. Test with screen reader (NVDA/JAWS/VoiceOver) to confirm announcements
4. Test with different locales to verify translations are applied correctly
5. Test 12-hour format to verify AM/PM column has proper label
6. Verify role="listbox" on container
7. Verify role="option" on all time options
8. Verify role="combobox" on trigger input

Accessibility Testing

Screen Reader Testing:

• Test with NVDA/JAWS on Windows
• Test with VoiceOver on macOS
• Verify:
  • The calendar grid structure is announced correctly
  • Date selection is announced
  • Keyboard navigation is announced
  • Time columns are properly announced with their labels
  • Navigation between columns is clear
  • Selected time values are announced correctly
  • All interactive elements are keyboard accessible

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.