Switch Role: Draft Guideance

[jongund]

Adds a guidance section for the switch role.

Preview link for switch

---

Preview | Diff

[carmacleod]

Looks good, @jongund !

[carmacleod]

Remove "the" for consistency with first part of sentence.

Suggested change

	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:

[carmacleod]

This sentence might be a bit confusing. Here's a slightly reordered version to consider:

Suggested change

<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>

[jongund]

@mcking65
The guidance talks about the role native semantics and ARIA properties in creating the switch. It is a simple example the illustrates what developers need to take into account about when using button and input[type=checkbox elements.

[jongund]

@mcking65
Updated guidance to make the Enter key optional.

[jongund]

@mcking65
I updated the switch guidance to reflect the discussion in today's APG meeting.

[jongund]

@mcking65
Made some additional changes that I think make the feature of the switch role clearer.

[mcking65]

@jongund
I like your clarifications based on last week's discussion. I took them a step further and tried to provide some meaningful guidance for choosing between switch and checkbox. I noticed that we even included some reference to visual presentation in the ARIA spec, so I included that in the guidance.

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.