diff --git a/third_party/aria-practices/src/content/patterns/combobox/examples/combobox-datepicker.html b/third_party/aria-practices/src/content/patterns/combobox/examples/combobox-datepicker.html index 67d59c0826130..2e46d307d9558 100644 --- a/third_party/aria-practices/src/content/patterns/combobox/examples/combobox-datepicker.html +++ b/third_party/aria-practices/src/content/patterns/combobox/examples/combobox-datepicker.html @@ -2,58 +2,13 @@ - Date Picker Combobox Example - - - - - - - - - - -
-

Date Picker Combobox Example

- -
-

About This Example

- -

- The below date picker demonstrates an implementation of the Combobox Pattern that opens a dialog. - The date picker dialog is opened by activating the choose date button or by moving keyboard focus to the combobox and pressing Down Arrow or Alt + Down Arrow. - The dialog contains an implementation of the grid pattern for displaying a calendar and enabling selection of a date. - Additional buttons in the dialog are available for changing the month and year shown in the grid. -

-

Similar examples include:

- -
- -
-
-

Example

-
- -
@@ -173,554 +128,5 @@
- -
- -
-

Accessibility Features

- -
- -
-

Keyboard Support

- -
-

Combobox

- - - - - - - - - - - - - -
KeyFunction
Down Arrow,
ALT + Down Arrow		 -
    -
  • Open the date picker dialog.
    • -
  • - If the combobox contains a valid date, moves focus to that date in the calendar grid. - Otherwise, moves focus to current date, i.e., today's date. -
    • -
-
-
- -
-

Date Picker Dialog

- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
ESCCloses the dialog and moves focus to the combobox.
TAB -
    -
  • Moves focus to next element in the dialog Tab sequence.
    • -
  • Note that, as specified in the Grid Pattern, only one element in the calendar grid is in the Tab sequence.
    • -
  • If focus is on the last button (i.e., "OK"), moves focus to the first button (i.e. "Previous Year").
    • -
-
Shift + TAB -
    -
  • Moves focus to previous element in the dialog Tab sequence.
    • -
  • Note that, as specified in the Grid Pattern, only one element in the calendar grid is in the Tab sequence.
    • -
  • If focus is on the first button (i.e., "Previous Year"), moves focus to the last button (i.e. "OK").
    • -
-
-
- -
-

Date Picker Dialog: Calendar Buttons

- - - - - - - - - - - - - -
KeyFunction
- Space,
- Enter - 		Change the month and/or year displayed in the calendar grid.
-
- -
-

Date Picker Dialog: Date Grid

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
Space -
    -
  • Selects the date.
    • -
  • Updates the value of the combobox with the selected date.
    • -
-
Enter -
    -
  • Selects the date.
    • -
  • Updates the value of the combobox with the selected date.
    • -
  • Closes the dialog and moves focus to the combobox.
    • -
-
Up ArrowMoves focus to the same day of the previous week.
Down ArrowMoves focus to the same day of the next week.
Right ArrowMoves focus to the next day.
Left ArrowMoves focus to the previous day.
HomeMoves focus to the first day (e.g. Sunday) of the current week.
EndMoves focus to the last day (e.g. Saturday) of the current week.
PageUp -
    -
  • Changes the grid of dates to the previous month.
    • -
  • - Moves focus to the day of the month that has the same number. - If that day does not exist, moves focus to the last day of the month. -
    • -
-
- Shift+
- PageUp - 		-
    -
  • Changes the grid of dates to the same month in the previous year.
    • -
  • -Moves focus to the day of the month that has the same number. - If that day does not exist, moves focus to the last day of the month. -
    • -
-
PageDown -
    -
  • Changes the grid of dates to the next month.
    • -
  • - Moves focus to the day of the month that has the same number. - If that day does not exist, moves focus to the last day of the month. -
    • -
-
- Shift+
- PageDown - 		-
    -
  • Changes the grid of dates to the same month in the next year.
    • -
  • - Moves focus to the day of the month that has the same number. - If that day does not exist, moves focus to the last day of the month. -
    • -
-
-
- -
-

Date Picker Dialog: OK and Cancel Buttons

- - - - - - - - - - - - - -
KeyFunction
- Space,
- Enter - 		- Activates the button: -
    -
  • "Cancel": Closes the dialog, moves focus to combobox, does not update combobox value.
    • -
  • "OK": Closes the dialog, moves focus to combobox, updates date in combobox.
    • -
-
-
-
- -
-

Role, Property, State, and Tabindex Attributes

- -
-

Combobox

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
comboboxinputIdentifies the input element as a combobox.
aria-haspopup="dialog"inputIndicates that the combobox opens a dialog.
aria-expanded="false"inputIndicates that the combobox is collapsed, i.e., the "Choose Date" dialog is not displayed.
aria-expanded="true"inputIndicates that the combobox is expanded, i.e., the "Choose Date" dialog is open.
aria-autocomplete="none"inputIndicates the combobox does not support autocomplete.
aria-controls="IDREF"inputIdentifies the element controlled by the combobox.
aria-describedby="IDREF"inputIdentifies the element that provides an accessible description for the combobox, enabling assistive technologies to associate the date format description with the input.
-
- -
-

Choose Date Button

- - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
tabindex="-1"buttonExcludes the button (i.e., the down arrow icon) from the Tab sequence as specified by the combobox design pattern.
aria-label="string"buttonDefines the accessible name as "Choose Date", which matches the title of the dialog opened by activating the button.
-
- -
-

Date Picker Dialog

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
dialog - div - Identifies the element as a dialog.
aria-modal="true"divIndicates the dialog is modal.
aria-label="Choose Date"divDefines the accessible name for the dialog.
aria-live="polite"h2 -
    -
  • Indicates that screen readers should automatically announce the element containing the currently displayed month and year when they change.
    • -
  • The polite value indicates that other announcements should not be interrupted.
    • -
-
aria-live="polite"div -
    -
  • Indicates the element that displays information about keyboard commands for navigating the grid should be automatically announced by screen readers.
    • -
  • The script slightly delays display of the information, so screen readers are more likely to announce it after announcing focus change events.
    • -
  • The polite value indicates that other announcements should not be interrupted.
    • -
-
-
- -
-

Date Picker Dialog: Calendar Navigation Buttons

- - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
aria-label="String"buttonDefines the accessible name of the button (e.g. "Next Year").
-
- -
-

Date Picker Dialog: Date Grid

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
grid - table - -
    -
  • Identifies the table element as a grid widget.
    • -
  • Since the grid role is applied to a table element, the row, columnheader, and gridcell roles do not need to be specified because they are implied by tr, th, and td tags.
    • -
-
aria-labelledby="IDREF"tableIdentifies the element that provides the accessible name for the grid, which is the h2 that shows the month and year of the dates displayed in the grid.
- tabindex="0" - - td - -
    -
  • Makes the gridcell focusable and includes it in the dialog Tab sequence.
    • -
  • Set dynamically by the JavaScript when the element is to be included in the dialog Tab sequence.
    • -
  • At any given time, only one gridcell within the grid is in the dialog Tab sequence.
    • -
  • - This approach to managing focus is described in the section on - Managing Focus Within Components Using a Roving tabindex. -
    • -
-
- tabindex="-1" - - td - -
    -
  • Makes the gridcell focusable and excludes it from the dialog Tab sequence.
    • -
  • Changed dynamically to 0 by the JavaScript when the gridcell is to be included in the dialog Tab sequence.
    • -
  • At any given time, only one gridcell within the grid is in the dialog Tab sequence.
    • -
  • - This approach to managing focus is described in the section on - Managing Focus Within Components Using a Roving tabindex. -
    • -
-
aria-selected="true"td -
    -
  • Indicates the cell is selected.
    • -
  • Set on the gridcell representing the current value of the combobox; no other gridcells have aria-selected specified.
    • -
-
-

- Note: Since the names of the days of the week in the column headers are abbreviated to two characters, they may be difficult to understand when announced by a screen reader. - An alternative column header name can be provided to screen readers by applying the abbr attribute to the th elements. - So, each th element includes an abbr attribute containing the full spelling of the name of the day for that column. -

-
-
- -
-

JavaScript and CSS Source Code

- -
- -
-

HTML Source Code

-

To copy the following HTML code, please open it in CodePen.

- -
- - -
-
diff --git a/third_party/aria-practices/src/content/patterns/combobox/examples/js/combobox-datepicker.js b/third_party/aria-practices/src/content/patterns/combobox/examples/js/combobox-datepicker.js index 4a2b38da1c876..e9fee075dc335 100644 --- a/third_party/aria-practices/src/content/patterns/combobox/examples/js/combobox-datepicker.js +++ b/third_party/aria-practices/src/content/patterns/combobox/examples/js/combobox-datepicker.js @@ -52,7 +52,7 @@ class ComboboxDatePicker { this.days = []; - this.focusDay = new Date(); + this.focusDay = new Date(2025, 4, 15); this.selectedDay = new Date(0, 0, 1); this.isMouseDownOnBackground = false; @@ -776,7 +776,7 @@ class ComboboxDatePicker { this.selectedDay = new Date(this.focusDay); } else { // If not a valid date (MM/DD/YY) initialize with today's date - this.focusDay = new Date(); + this.focusDay = new Date(2025, 4, 15); this.selectedDay = new Date(0, 0, 1); } }