1801983 - Decide if the increment size for PageUp and PageDown keypresses needs to be adjusted for datepicker Spinners

Status: NEW

(Core :: Layout: Form Controls, enhancement)

Description

[Anna Yeddi [:ayeddi]]

STR

1. Open a new tab with URI data:text/html,<input type=date value=2001-01-01><input type=datetime-local value=2001-01-01T01:01>
2. Navigate to and activate the Calendar button within a field and open a datepicker by pressing Enter or Space on the Calendar
3. When a datepicker panel is opened, navigate to and activate the month-year toggle button
4. Confirm that the month and year selection panel is opened and press Tab once to focus the month spinbutton
5. Press PageUp (Fn+Up) and observe the behavior
6. Press PageDown (Fn+Down) and observe the behavior
7. Press Tab once to focus the year spinbutton
8. Press PageUp (Fn+Up) and observe the behavior
9. Press PageDown (Fn+Down) and observe the behavior

Actual:

step of 5 is used for both spinbuttons:

1. For the month spinner:
   1. On PageUp the value changes from January 2001 to August 2001 (5 steps up for the month, no year change), repeating the keypress would select March 2001
   2. On PageDown the value changes from January 2001 to June 2001 (5 steps down for the month, no year change), repeating the keypress would select November 2001
2. For the year spinner:
   1. On PageUp the value changes from January 2001 to January 1996 (5 steps up for the year, no month change), repeating the keypress would select January 1991
   2. On PageDown the value changes from January 2001 to January 2006 (5 steps down for the year, no month change), repeating the keypress would select January 2011

Possible:

Step of 6 is used for month spinner (half year) or for both year and month spinners

Form fields

1. <input type=date>
2. <input type=datetime-local>
3. Likely to be affected spinbuttons are on <input type=time> too

Question

Shall I update the ARIA Spinner keyboard behaviors for PageUp and PageDown - they used to be mentioned as +/- 5 values, but now the WAI ARIA 1.2 general design pattern mentions any value, larger than default/1 (quoted below), and the Date spinner example uses the following logic that goes a bit beyond just 5 increments, but manages the first or second halves of the year differently:

1. Page Down: Decreases the value 5 steps. When focus is on the “Month” spin button and the value is the fifth month of the year or less, changes value to “December”.
2. Page Up: Increases the value 5 steps. 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”.

Note that the example on ARIA page is not production-ready, and it is not expected to follow it too.

Maybe the spinbuttons for month can navigate by half years (increments of 6 - January to July to January, May to November to May, but years 2000 to 2006 to 2012) or by increments of 5 (January to June to November, December to May to October, but year would be 2000 to 2005 to 2010)?

As an option, we can pass down from the parent (i.e. from the 'calendar.js` for the datepicker dialog) to the Spinner component the step size, if we want to handle month with 6 and years with 5 increments and allow other Spinner use cases (like the time elements spinbuttons, I assume) to be customized, or we can choose 1 size fits all.

From the general Spinbutton pattern:

Page Up (Optional): Increases the value by a larger step than Up Arrow.
Page Down (Optional): Decreases the value by a larger step than Down Arrow.