Skip to content

Commit

Permalink
Role spinbutton: allow empty values, no min, no max, and structure wi…
Browse files Browse the repository at this point in the history
…th sibling steppers (#813)

* Change prose to author SHOULD from author MUST specify value for
  aria-valuenow.
* Change aria-valuemin and aria-valuemax from required to supported
  properties.
* Revise prose of paragraph with normative statements.
* Change description to clearly state that a text field with sibling
  buttons outside the spinbutton is permitted.
* Make related editorial change to consolidate keyboard requirements
  into a single paragraph.
* Make other related editorial revisions for clarity.
  • Loading branch information
mcking65 authored and joanmarie committed Oct 24, 2018
1 parent 2cbbe31 commit d6a99de
Showing 1 changed file with 8 additions and 17 deletions.
25 changes: 8 additions & 17 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6606,16 +6606,11 @@ <h5>Presentational Roles Conflict Resolution</h5>
<rdef>spinbutton</rdef>
<div class="role-description">
<p>A form of <rref>range</rref> that expects the user to select from among discrete choices.</p>
<p>A <code>spinbutton</code> typically allows the user to select from the given range through the use of an up and down button on the keyboard. Visibly, the current value is incremented or decremented until a maximum or minimum value is reached. Authors SHOULD ensure this functionality is accomplished programmatically through the use of <kbd>up</kbd> and <kbd>down</kbd> arrows on the keyboard.</p>
<p>A <code>spinbutton</code> typically allows users to change its displayed value by activating increment and decrement buttons that step through a set of allowed values. Some implementations display the value in an text field that allows editing and typing but typically limits input in ways that help prevent invalid values.</p>
<p>Although a <code>spinbutton</code> is similar in appearance to many presentations of <code>select</code>, it is advisable to use <code>spinbutton</code> when working with known ranges (especially in the case of large ranges) as opposed to distinct options. For example, a <code>spinbutton</code> representing a range from 1 to 1,000,000 would provide much better performance than a <code>select</code> <a>widget</a> representing the same values.</p>
<p>Authors MAY create a <code>spinbutton</code> with children or owned elements, but MUST limit those elements to a <rref>textbox</rref> and/or two <rref title="button">buttons</rref>.</p>
<p>To be <a>keyboard accessible</a>, authors SHOULD manage focus of descendants for all instances of this <a>role</a>, as described in <a href="#managingfocus">Managing Focus</a>. When a <code>spinbutton</code> receives focus, authors SHOULD ensure focus is placed on the <rref>textbox</rref> element if one is present, and on the <code>spinbutton</code> itself otherwise. Authors SHOULD NOT include contained <rref>button</rref> elements in the primary navigation ring, e.g., the Tab ring in <abbr title="Hypertext Markup Language">HTML</abbr>, because they are superfluous for people using keyboard devices.</p>
<p>Authors MUST set the <pref>aria-valuenow</pref> attribute. Authors SHOULD set the <pref>aria-valuemin</pref> attribute when there is a minimum value, and the <pref>aria-valuemax</pref> attribute when there is a maximum value. If missing or not a <a href="#valuetype_number">number</a>, the implicit values of these attributes are as follows:</p>
<ul>
<li>The implicit value of <code>aria-valuemin</code> is that there is no minimum value.</li>
<li>The implicit value of <code>aria-valuemax</code> is that there is no maximum value.</li>
<li>The implicit value of <code>aria-valuenow</code> is <code>0</code>.</li>
</ul>
<p>Authors MAY create a <code>spinbutton</code> with children or owned elements, but MUST limit those elements to a <rref>textbox</rref> and/or two <rref title="button">buttons</rref>. Alternatively, authors MAY apply the <rref>spinbutton</rref> role to a text input and create sibling buttons to support the increment and decrement functions.</p>
<p>To be <a>keyboard accessible</a>, authors SHOULD manage focus of descendants for all instances of this <a>role</a>, as described in <a href="#managingfocus">Managing Focus</a>. When a <code>spinbutton</code> receives focus, authors SHOULD ensure focus is placed on the <rref>textbox</rref> element if one is present, and on the <code>spinbutton</code> itself otherwise. Authors SHOULD also ensure the <kbd>up</kbd> and <kbd>down</kbd> arrows on a keyboard perform the increment and decrement functions and that the increment and decrement <rref>button</rref> elements are <em>NOT</em> included in the primary navigation ring, e.g., the Tab ring in <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
<p>Authors SHOULD set the <pref>aria-valuenow</pref> attribute when the <rref>spinbutton</rref> has a value. Authors SHOULD set the <pref>aria-valuemin</pref> attribute when there is a minimum value, and the <pref>aria-valuemax</pref> attribute when there is a maximum value.</p>
</div>
<table class="role-features">
<caption>Characteristics:</caption>
Expand Down Expand Up @@ -6662,20 +6657,17 @@ <h5>Presentational Roles Conflict Resolution</h5>
</tr>
<tr>
<th class="role-required-properties-head">Required States and Properties:</th>
<td class="role-required-properties">
<ul>
<li><pref>aria-valuemax</pref></li>
<li><pref>aria-valuemin</pref></li>
<li><pref>aria-valuenow</pref></li>
</ul>
</td>
<td class="role-required-properties"></td>
</tr>
<tr>
<th class="role-properties-head" scope="row">Supported States and Properties:</th>
<td class="role-properties">
<ul>
<li><pref>aria-readonly</pref></li>
<li><pref>aria-required</pref></li>
<li><pref>aria-valuemax</pref></li>
<li><pref>aria-valuemin</pref></li>
<li><pref>aria-valuenow</pref></li>
</ul>
</td>
</tr>
Expand Down Expand Up @@ -6708,7 +6700,6 @@ <h5>Presentational Roles Conflict Resolution</h5>
<td class="implicit-values">
Default for <pref>aria-valuemin</pref> is that there is no minimum value.<br/>
Default for <pref>aria-valuemax</pref> is that there is no maximum value.<br/>
Default for <pref>aria-valuenow</pref> is <code>0</code>.<br/>
</td>
</tr>
</tbody>
Expand Down

0 comments on commit d6a99de

Please sign in to comment.