Review updates to checkbox example pages

[mcking65]

When resolving issue #457, I made a sufficient number of editorial revisions to warrant additional review of the checkbox example pages:

• Simple two-state checkbox example
• Tri-state checkbox example page

Reviews request as of October 10, 2017

• Review by Ann (@annabbott)
• Review by Siri (@shirsha)

[annabbott]

"Simple two-state checkbox example" looks good.

[annabbott]

On "Checkbox Example (Mixed-State)" > Keyboard support > Space > third bullet
I don't seem to be able to make this happen:
When the tri-state checkbox is mixed, the controlled checkboxes return to the last combination of states they had when the tri-state checkbox was last mixed or to the default combination of states they had when the page loaded.

[devarshipant]

The mixed-state indicator (partially checked) resembles an expand / collapse widget.

Example that may work:

[mcking65]

@annabbott commented:

On "Checkbox Example (Mixed-State)" > Keyboard support > Space > third bullet
I don't seem to be able to make this happen:
When the tri-state checkbox is mixed, the controlled checkboxes return to the last combination of states they had when the tri-state checkbox was last mixed or to the default combination of states they had when the page loaded.

Ann, this is working for me in all browsers. For the simplest test, immediately after page loads, here is what should happen:

1. Click 1: All boxes are checked.
2. Click 2: No boxes are checked.
3. Click 3: the box that was check on page load (tomato) is checked.

Is that not happening for you? If not, what browser?

[mcking65]

@devarshipant commented:

The mixed-state indicator (partially checked) resembles an expand / collapse widget.

Thank you for the suggestion. Not being able to see the graphics, I'll leave it up to others to provide feedback on your suggested design improvement.

@jongund, @annabbott, @shirsha, have input here?

[annabbott]

Ok, "Checkbox Example (Mixed-State)" > Keyboard Support > Space > third bullet works fine (here comes the gotcha) as long as I don't attempt to interact with any other checkbox at any point between your "Click 1" and "Click 3" instructions. The Keyboard Support section does not mention this use case limitation and I'd be willing to bet I won't be the only one that gets tripped up by this limitation. Language must be added to Keyboard Support defining this use case limitation.

Suggested: above the last three bullets for "Space", insert text like:
"When interacting with ONLY the mixed-state checkbox:"

BTW: I'm using FF 56.0 and see that I should upgrade to 56.0.1.

[annabbott]

@devarshipant comment regarding the appearance of the mixed state status does resemble an expand / collapse widget (the checkbox contains a horizontal dash). He's recommending that the mixed state checkbox have a solid fill instead.

Visually that would give the example the following appearance:

• When the tri-state checkbox is unchecked, all the controlled checkboxes are unchecked. Visually, the tri-state checkbox is empty, with only the checkbox outline provided. This is the current rendering.

• When the tri-state checkbox is mixed, the controlled checkboxes return to the last combination of states they had when the tri-state checkbox was last mixed or to the default combination of states they had when the page loaded. Visually, the tri-state checkbox would have solid fill inside the checkbox outline.

• When the tri-state checkbox is checked, all the controlled checkboxes are checked. Visually, the tri-state checkbox contains a checkmark. This is the current rendering.

[annabbott]

@devarshipant - your observation got me to thinking...
Can you find a checkbox graphic where, if in the mixed state, the checkbox had a diagonal fill with either the top part of the diagonal is filled or the bottom part of the diagonal is filled? I'm not certain that a completely filled checkbox provides the 'mixed state' message graphically.

[devarshipant]

Thanks @annabbott - The color of the shaded area should be consistent with the business need. Please check the screenshot.

[shirsha]

The indeterminate check usually represented by a minus symbol inside the check box.
The standard checkbox are checked, unchecked, or indeterminate.
If a checkbox have child checkboxes and all those children are checked, then symbol is shown by a tick mark inside the check box. If none of the child checkboxes are checked, then checkbox is empty and if some of the child checkboxes are checked, then it's in an indeterminate state which is shown by “– “ in the checkbox.
They look like shown in attachment checkbox.docx- #1:

[checkbox.docx](https://github.com/w3c/aria-practices/files/1389002/checkbox.docx

If this “-“ symbol is confusing we can use a checkbox with a small black square inside it.
As shown in attachment checkbox.docx- #2
checkbox.docx
But I think these are standard ways of showing the state

[annabbott]

Use of the "standard ways of showing the state" are fine with me!

[racer2207]

Hi, I have a question about the expected results of the mixed checkbox's behavior.

Steps to repeat the behavior are.

1. Load the Mixed-State Checkbox example.
2. Click on the Mixed-State checkbox twice to cycle the controlled checkbox's status to unchecked.
3. Click on the Lettuce checkbox.
4. Click on the Mixed-State checkbox three times to cycle the controlled checkbox's status once completely.
5. The checkbox is still in a mixed state, but the mixed state now has both the Lettuce and Tomato options checked.

This is by design, but, shouldn't the user's action of un-checking the controlled options be taken into consideration?

[devarshipant]

@shirsha stated:

If this “-“ symbol is confusing we can use a checkbox with a small black square inside it.

Given a choice, I would opt for a checkbox with a black square inside over the minus (expand / collapse) sign. thanks!

[mcking65]

Task force review is complete. Thank you all!

[ZoeBijl]

@devarshipant the current design comes from macOS. I’m not a fan of the square as a replacement for this as that could easily be mistaken for a checked state. Instead, I propose a line at a 45º angle.

Fixed in #507

Example:

[devarshipant]

Excellent! Thank you @MichielBijl and @mcking65.