Spinbutton: Allowed structures?

[mcking65]

After another reading of the ARIA spinbutton specification, I am wondering how we should structure the spinbutton and whether or not we need multiple examples, each with a different structure. The spec says:

Authors MAY create a spinbutton with children or owned elements, but MUST limit those elements to a textbox and/or two buttons.

It also says:

When a spinbutton receives focus, authors SHOULD ensure focus is placed on the textbox element if one is present, and on the spinbutton itself otherwise. Authors SHOULD NOT include contained button elements in the primary navigation ring, e.g., the Tab ring in HTML, because they are superfluous for people using keyboard devices.

The above text is describing a composite structure like:

<div role="spinbutton">
  <button tabindex="-1">decrease</button>
  <input type="text">
  <button tabindex="-1">Increase</button>
</div>

Another structure supported by this spec language is:

<div role="spinbutton" tabindex="0">
  <span>Decrease</span>
  <span>text of value</span>
  <span>Increase</span>
</div>

However, I've normally seen a flat structure like:

<button tabindex="-1">decrease</button>
<input type="text" role="spinbutton">
<button tabindex="-1">Increase</button>

Now, I'm wondering if this latter structure is actually allowed? The spec does not appear to support it. Should it?

Related to issue #125.

[adampage]

Now, I'm wondering if this latter structure is actually allowed? The spec does not appear to support it. Should it?

Heya @mcking65, the ARIA spec does now explicitly support this structure:

Authors MAY create a spinbutton with accessibility children, but MUST limit those elements to a textbox and/or two buttons. Alternatively, authors MAY apply the spinbutton role to a text input and create sibling buttons to support the increment and decrement functions.

I took advantage of this in a draft PR I’ve just pushed up to replace the existing Date Picker Spin Button example.