diff --git a/third_party/aria-practices/src/content/patterns/dialog-modal/examples/datepicker-dialog.html b/third_party/aria-practices/src/content/patterns/dialog-modal/examples/datepicker-dialog.html index f0d3f3b8a9476..a477548fa7c14 100644 --- a/third_party/aria-practices/src/content/patterns/dialog-modal/examples/datepicker-dialog.html +++ b/third_party/aria-practices/src/content/patterns/dialog-modal/examples/datepicker-dialog.html @@ -2,55 +2,13 @@ - Date Picker Dialog Example - - - - - - - - - - -
-

Date Picker Dialog Example

- -
-

About This Example

- -

- The example below includes a date input field and a button that opens a date picker that implements the Dialog (Modal) Pattern. - The dialog contains a calendar that uses the grid pattern to present buttons that enable the user to choose a day from the calendar. - Choosing a date from the calendar closes the dialog and populates the date input field. - When the dialog is opened, if the input field is empty, or does not contain a valid date, then the current date is focused in the calendar. - Otherwise, the focus is placed on the day in the calendar that matches the value of the date input field. -

-

Similar examples include:

- -
- -
-
-

Example

-
-
@@ -165,496 +123,5 @@
- -
- -
-

Accessibility Features

- -
- -
-

Keyboard Support

- -
-

Choose Date Button

- - - - - - - - - - - - - -
KeyFunction
Space,
Enter		 -
    -
  • Open the date picker dialog.
    • -
  • - Move focus to selected date, i.e., the date displayed in the date input text field. - If no date has been selected, places focus on the current date. -
    • -
-
-
- -
-

Date Picker Dialog

- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
ESCCloses the dialog and returns focus to the "Choose Date" button.
Tab -
    -
  • Moves focus to next element in the dialog Tab sequence.
    • -
  • Note that, as specified in the Grid Pattern, only one button 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 button 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: Month/Year Buttons

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

Date Picker Dialog: Date Grid

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
Space,
Enter		 -
    -
  • Select the date, close the dialog, and move focus to the "Choose Date" button.
    • -
  • Update the value of the "Date" input with the selected date.
    • -
  • Update the accessible name of the "Choose Date" button to include the selected date.
    • -
-
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.
Page Up -
    -
  • 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 + Page Up -
    -
  • 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. -
    • -
-
Page Down -
    -
  • 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 + Page Down -
    -
  • 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 "Choose Date" button, does not update date in date input.
    • -
  • "OK": Closes the dialog, moves focus to "Choose Date" button, updates date in date input, updates accessible name of the "Choose Date" button to include the selected date.
    • -
-
-
-
- -
-

Role, Property, State, and Tabindex Attributes

- -
-

Textbox

- - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
aria-describedby="ID_REFERENCE"inputIdentifies the element that provides an accessible description for the textbox, enabling assistive technologies to associate the date format description with the input.
-
- -
-

Choose Date Button

- - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
aria-label="String"button -
    -
  • The initial value of accessible name is "Choose Date".
    • -
  • When users select a date, the accessible name is changed to "Change Date, DATE_STRING" where DATE_STRING is the selected date.
    • -
-
-
- -
-

Date Picker Dialog

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
dialog - div - Identifies the element as a dialog .
aria-modal="true"divIndicates the dialog is modal.
aria-label="string"divDefines the accessible name for the dialog.
aria-live="polite" - h2 - -
    -
  • When the month and/or year changes the content of the h2 element is updated.
    • -
  • Indicates the h2 should be automatically announced by screen readers.
    • -
-
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 read it after information related to change of focus.
    • -
-
-
- -
-

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="ID_REFERENCE"tableIdentifies the element that provides the accessible name for the grid.
- tabindex="0" - - td - -
    -
  • Makes the cell 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 cell focusable and excludes it from the dialog Tab sequence.
    • -
  • Changed dynamically to 0 by the JavaScript when the cell 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 -
    -
  • Identifies the cell containing the currently selected date, i.e., the date value present in the date input.
    • -
  • Only set on the cell containing the currently selected date; no other cells 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 a 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/dialog-modal/examples/js/datepicker-dialog.js b/third_party/aria-practices/src/content/patterns/dialog-modal/examples/js/datepicker-dialog.js index 56e92fa24fc98..44e859a4d318e 100644 --- a/third_party/aria-practices/src/content/patterns/dialog-modal/examples/js/datepicker-dialog.js +++ b/third_party/aria-practices/src/content/patterns/dialog-modal/examples/js/datepicker-dialog.js @@ -61,7 +61,7 @@ class DatePickerDialog { this.days = []; - this.focusDay = new Date(); + this.focusDay = new Date(2025, 4, 15); this.selectedDay = new Date(0, 0, 1); this.lastDate = -1; @@ -443,7 +443,7 @@ class DatePickerDialog { this.selectedDay = new Date(this.focusDay); } else { // If not a valid date (MM/DD/YY) initialize with todays date - this.focusDay = new Date(); + this.focusDay = new Date(2025, 4, 15); this.selectedDay = new Date(0, 0, 1); } }