diff --git a/third_party/aria-practices/src/content/patterns/spinbutton/examples/datepicker-spinbuttons.html b/third_party/aria-practices/src/content/patterns/spinbutton/examples/datepicker-spinbuttons.html index d105747a6f149..7f4833433146d 100644 --- a/third_party/aria-practices/src/content/patterns/spinbutton/examples/datepicker-spinbuttons.html +++ b/third_party/aria-practices/src/content/patterns/spinbutton/examples/datepicker-spinbuttons.html @@ -2,62 +2,14 @@ - (Deprecated) Date Picker Spin Button Example - - - - - - - - - - -
-

(Deprecated) Date Picker Spin Button Example

- -
-

About This Example

-
-

Deprecation Warning

-

- This pattern has been deprecated, and will be removed in a future version of the ARIA Authoring Practices. - The Quantity Spin Button should be used as an alternative to this pattern. -

-
- -

- The following example uses the Spin Button Pattern to implement a date picker. - It includes three spin buttons: one for setting the day, a second for month, and a third for year. -

-

Similar examples include:

- -
- -
-
-

Example

-
-
Choose a Date
@@ -112,235 +64,5 @@
- -
- -
-

Accessibility Features

- -
- -
-

Keyboard Support

-

The spin buttons provide the following keyboard support described in the Spin Button Pattern.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
Down Arrow -
    -
  • Decreases value 1 step.
    • -
  • When focus is on the Day spin button and the value is the first day of the month, changes value to the last day of the month.
    • -
  • When focus is on the Month spin button and the value is January, changes value to December.
    • -
-
Up Arrow -
    -
  • Increases the value 1 step.
    • -
  • When focus is on the Day spin button and the value is the last day of the month, changes value to the first day of the month.
    • -
  • When focus is on the Month spin button and the value is December, changes value to January.
    • -
-
Page Down -
    -
  • Decreases the value 5 steps.
    • -
  • When focus is on the Day spin button and the value is the fifth day of the month or less, changes value to the last day of the month.
    • -
  • When focus is on the Month spin button and the value is the fifth month of the year or less, changes value to December.
    • -
-
Page Up -
    -
  • Increases the value 5 steps.
    • -
  • When focus is on the Day spin button and the value is any of the last five days of the month, changes value to the first day of the month.
    • -
  • When focus is on the Month spin button and the value is any of the last five months of the year, changes value to January.
    • -
-
HomeDecreases to minimum value.
EndIncreases to maximum value.
-
- -
-

Role, Property, State, and Tabindex Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
groupdiv -
    -
  • Identifies the div as a group.
    • -
  • The group provides a means to inform assistive technology users that the three spin buttons are all related to the single purpose of choosing a date.
    • -
-
aria-labelledby="IDREFs"div -
    -
  • Contains two IDs that reference the div elements that provide the accessible name for the group.
    • -
  • One ID refers to the visible label Choose a Date.
    • -
  • The second ID refers to a hidden div that contains a string specifying the current date represented by the values of the three spin buttons, which is updated by JavaScript as users change the values of the spin buttons.
    • -
-
spinbuttondivIdentifies the div element as a spinbutton.
aria-label="NAME_STRING"divDefines the accessible name for each spin button (e.g. day, month and year).
aria-valuenow="NUMBER"div -
    -
  • Indicates the current numeric value of the spin button.
    • -
  • Updated by JavaScript as users change the value of the spin button.
    • -
-
- aria-valuetext="DAY_NUMBER_STRING" or
- aria-valuetext="MONTH_STRING" - 		div -
    -
  • For the Day spin button, provides screen reader users with a friendlier pronunciation of the number of the day of the month (i.e. first instead of one).
    • -
  • For the Month spin button, provides screen reader users with a friendlier announcement of the month (i.e., January instead of one).
    • -
-
aria-valuemin="NUMBER"divIndicates the minimum allowed value for the spin button.
aria-valuemax="NUMBER"div -
    -
  • Indicates the maximum allowed value for the spin button.
    • -
  • For the Day spin button, this property is updated based on the value of the Month spin button.
    • -
-
aria-hidden="true" -
    -
  • div.next
    • -
  • div.previous
    • -
- 		For assistive technology users, hides the text showing the next and previous values that is displayed adjacent to the up and down arrow icons since it would otherwise add superfluous elements to the screen reader reading order that are likely to be more confusing than helpful.
aria-label="NAME_STRING"buttonDefines the accessible name for each increase and decrease button (Next Day, Previous Day, Next Month, Previous Month, Next year, and Previous Year).
tabindex="-1"buttonRemoves the decrease and increase buttons from the page Tab sequence while keeping them focusable so they can be accessed with touch-based assistive technologies.
-
- -
-

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/spinbutton/examples/js/datepicker-spinbuttons.js b/third_party/aria-practices/src/content/patterns/spinbutton/examples/js/datepicker-spinbuttons.js index 94ea9f1b33c0b..b39955f23014b 100644 --- a/third_party/aria-practices/src/content/patterns/spinbutton/examples/js/datepicker-spinbuttons.js +++ b/third_party/aria-practices/src/content/patterns/spinbutton/examples/js/datepicker-spinbuttons.js @@ -102,7 +102,7 @@ DatePickerSpinButtons.prototype.init = function () { this.minYear = this.spinbuttonYear.getValueMin(); this.maxYear = this.spinbuttonYear.getValueMax(); - this.currentDate = new Date(); + this.currentDate = new Date(2025, 4, 15); this.day = this.currentDate.getDate(); this.month = this.currentDate.getMonth();