Spin button pattern home and end guidance conflicts with basic editing functionality

[mcking65]

Background

The Keyboard Interaction section of the Spin Button Pattern specifies functionality for the 'Home' and 'End' keys that conflict with the guidance to support standard single-line editing keys.

Guidance for 'Home' and 'End' is:

• Home: If the spinbutton has a minimum value, sets the value to its minimum.
• End: If the spinbutton has a maximum value, sets the value to its maximum.

With respect to editing, the guidance includes:

• If the spinbutton text field allows directly editing the value, the following keys are supported:
  • Standard single line text editing keys appropriate for the device platform (see note below).
  • Printable Characters: Type characters in the textbox.

Note 2 defines single-line editing key support:

Standard single line text editing keys appropriate for the device platform:

1. include keys for input, cursor movement, selection, and text manipulation.
2. Standard key assignments for editing functions depend on the device operating system.
3. The most robust approach for providing text editing functions is to rely on browsers, which supply them for HTML inputs with type text and for elements with the contenteditable HTML attribute.
4. IMPORTANT: Be sure that JavaScript does not interfere with browser-provided text editing functions by capturing key events for the keys used to perform them.

The problem

'Home' and 'End are intended to move the cursor to the beginning and end of the input. Screen readers expect that behavior because the type is an editable input. So, co-opting 'Home' and ''End' for min and max value input is counter to note 2.4 and interferes with single-line text editing.

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed Issue 3377: Spin button pattern home and end guidance.

The full IRC log of that discussion

<Matt_King> TOPIC: Issue 3377: Spin button pattern home and end guidance
<Matt_King> GITHUB: https://github.com//issues/3377
<arigilmore> Matt_King: there is something about the spinbutton pattern that turns out to be problematic, but we only discovered when writing screen reader tests in the ARIA AT screen reader group
<arigilmore> Matt_King: in the spinbutton pattern is that Home should set the value to Min Value and End should set the value to Max value
<arigilmore> Matt_King: however if you can type into the box then home/end have specific interactions
<arigilmore> Matt_King: support standard editing keys for single line input and i've listed the four lines that discuss this
<arigilmore> Matt_King: the last note states we should not have any javascript editing the values
<arigilmore> Matt_King: historically we thought of this as a slider, but sliders are not capable of typing a value
<arigilmore> jongund to me it seems like the home/end key should change the number rather than the cursor, but one has to win right?
<arigilmore> Matt_King screenreaders are expecting home to do what it normally does with those keys
<arigilmore> Matt_King lets say the spinbutton was a large value with incorrect value you could arrow left, but home should do that for you to go back to the beginnning
<arigilmore> jongund: we should adopt patterns consistent with how screenreaders use the keys. We will have to wait along time before those get updates
<arigilmore> jongund: honoring the path of least resistence then we should go with that
<arigilmore> Matt_King i don't think screenreaders will agree to change the home/end in cusotm spin button because then they will have to have different behaviour in custom spin button vs standard html with input type=number
<arigilmore> Matt_King browsers don't provide any special home/end behaviour
<arigilmore> the home/end move the cursor to the beginning of the input
<arigilmore> Siri but here you are saying when you click home then it will change to the min value and not bring it to the beginning of the input
<arigilmore> Siri it is changing context without informing me
<arigilmore> Matt_King: we should remove that home/end guidance
<arigilmore> Matt_King: the people spinner you will have to page up and down to hit the max/min values
<arigilmore> Matt_King: in a spinner that takes a long range of values then you can just type the min value
<arigilmore> Matt_King would anyone be opposed to removing the home/end guidance
<arigilmore> jongund: thinks its fine. The most logical thing to do
<Siri> +1
<arigilmore> jongund depend on the range there should be some guidance on page up and down
<arigilmore> jongund maybe page up and down should move to a certain percentage of increments. then eventually go to max/min values
<arigilmore> jongund if the range is 0 to 10 then page up/down should go to 0/10 and then if it's like 100000 then we should increment by percentages
<arigilmore> Matt_King page up/down should move at least 10 steps in each direction if the spinner has a very large range then maybe try dividing by 20?
<arigilmore> Siri thinking from user perspective. How will end user know what will page up/down will bring them to. Can we assign a key for min/max
<arigilmore> Matt_King you can type in the min/max. That's how they are different from sliders
<arigilmore> Matt_King: i think i have enough information to at least unblock the ARIA AT project and propose changes to the existing spin button
<arigilmore> Matt_King: that will effect how we change page up/down. We should test this in ARIA AT and will need to update after the spinner changes