Conversation
carmacleod
left a comment
There was a problem hiding this comment.
Looks good, @jongund !
aria-practices.html
Outdated
| <section class="widget" id="switch"> | ||
| <h3>Switch</h3> | ||
| <p> | ||
| A <a href="#switch" class="role-reference">switch</a> is a type of checkbox that has on/off values, rather than the checked/unchecked values. There are three main patterns for using the <a href="#switch" class="role-reference">switch</a> role: |
There was a problem hiding this comment.
Remove "the" for consistency with first part of sentence.
| A <a href="#switch" class="role-reference">switch</a> is a type of checkbox that has on/off values, rather than the checked/unchecked values. There are three main patterns for using the <a href="#switch" class="role-reference">switch</a> role: | |
| A <a href="#switch" class="role-reference">switch</a> is a type of checkbox that has on/off values, rather than checked/unchecked values. There are three main patterns for using the <a href="#switch" class="role-reference">switch</a> role: |
aria-practices.html
Outdated
| <li>When "off", it has state <a href="#aria-checked" class="state-reference" >aria-checked</a> set to <code>false</code>. | ||
| </li> | ||
| <li>When using <code>input[type="checkbox"]</code> as the switch the <code>.checked</code> property should be used instead of <code>aria-checked</code> attribute, see <a href="https://www.w3.org/TR/wai-aria-1.2/#requiredState">Required States and Properties</a>.</li> | ||
| <li>If a set of switches is presented as a logical group with a visible label, the switches are included in an element with role <a href="#group" class="role-reference" >group</a> that has the property <a href="#aria-labelledby" class="property-reference" >aria-labelledby</a> set to the ID of the element containing the label or using the HTML <code>fieldset/legend</code> elements.</li> |
There was a problem hiding this comment.
This sentence might be a bit confusing. Here's a slightly reordered version to consider:
| <li>If a set of switches is presented as a logical group with a visible label, the switches are included in an element with role <a href="#group" class="role-reference" >group</a> that has the property <a href="#aria-labelledby" class="property-reference" >aria-labelledby</a> set to the ID of the element containing the label or using the HTML <code>fieldset/legend</code> elements.</li> | |
| <li>If a set of switches is presented as a logical group with a visible label, the switches are either included in an HTML <code>fieldset</code> with a <code>legend</code>, or in an element with role <a href="#group" class="role-reference" >group</a> that has the property <a href="#aria-labelledby" class="property-reference" >aria-labelledby</a> set to the ID of the element containing the group label.</li> |
|
@mcking65 |
|
@mcking65 |
|
@mcking65 |
|
@mcking65 |
cbaeff4 to
c4eb345
Compare
|
@jongund I'm not clear on the motivation for including implementation details in the description. We can talk about it during the meeting. My editorial preference is that we stick to our design pattern template, and like with all other patterns, rely on the examples to illustrate implementation. |
Adds a guidance section for the switch role.
Preview link for switch
Preview | Diff