Editor Menubar Example: Visual design does not distinguish between me…

[carmacleod]

…nuitemcheckbox and menuitemradio elements #605

This is just a proof-of-concept to show what distinguishing between menuitemcheckbox and menuitemradio (and regular menuitems) could look like.

If you like the idea, note that this commit may need a bit of cleanup:

1. I am not a graphic artist, so I just I used the existing brown checkmark as a starting point to create very simple icons for checked/unchecked radio and checked/unchecked checkbox.
2. The CSS in menubarAction.css needs a bit of trimming. It is currently a bit verbose.

@sh0ji @jongund @a11ydoer
Please let me know if you like the way it looks/plays, and if you think it is helpful.
https://rawgit.com/carmacleod/aria-practices/issue605/examples/menubar/menubar-2/menubar-2.html

[jongund]

I think we should have something that visually differentiates menuitemcheckbox from menuitemradio, here is my recommendation:

• Check marks next to checked menuitiemcheckbox, and nothing next to unchecked items
• Radio buttons would have a filled circle only next to the menuitemradio button that is checked

The checks and filled circles would visually differentiate the menuitemcheckbox from menuitemradio

[carmacleod]

My bad, @jongund - I didn't describe the changes I made in this Pull Request.

The changes are similar to what you describe, except that I felt that it was important to also visually differentiate menuitemcheckbox from menuitemradio when they are not checked, so that the user is not surprised (for example, by radio behavior, or lack thereof) when checking them. To that end, I created (admittedly rudimentary) icons for all 4 checked states, as follows:

• Empty square box next to unchecked menuitemcheckbox
• Check mark within square box next to checked menuitemcheckbox
• Empty circle next to unchecked menuitemradiobutton
• Filled circle next to checked menuitemradiobutton

Regular "push button" menuitems do not have an icon, so that it would be easily possible to distinguish between menuitem, menuitemcheckbox, and menuitemradio even when they are not checked.

Changes can be seen at this rawgit for the menubar2 example.

For comparison, here is the original menubar2 example.

Note that in the original, the visual user cannot tell (except perhaps by context) whether the items for "Smaller" or "Larger" in the "Size" menu are menuitem or menuitemcheckbox, whereas in the rawgit example for this PR, they can.

[carmacleod]

Note that the example does not show use of the mixed value for aria-checked on its menuitemcheckbox. If it had, then another icon would have been necessary. Typical "mixed" checkbox icons are either a filled-in box, or a box with a hyphen in it.

[jnurthen]

@carmacleod The discussion at the meeting today centered around whether this produced a UI which was too heavy. Native platforms do not seem to do this instead only showing the icon for the menu checkboxes or menu radio buttons which are checked.
In my opinion following the native platform direction here is the correct approach but I'm certainly willing to go along with group consensus.

[carmacleod]

@jnurthen Yes, sorry I didn't see the IRC log of the APG meeting until after I replied to @jongund.

Quick question - one of the statements in the IRC log confused me. You said:

jn: happy with example except off state doesn't display

Were you unable to see the empty box and the empty circle for unchecked items? I'll admit that I didn't test on Mac - did the "off" state icons not show up there?

I do understand the "heavy" feel - I thought it was a bit heavy myself - but one has to admit that it is perfectly clear which items are checkboxes, radios, and regular menu items. ;) The w3c COGA folks would likely approve (although I don't know for sure).

Anyhow, I'll redo the PR using just checkmark and filled circle, and we'll see if it looks lighter.

Just for another data point, I looked at google docs to see what they did. They use checkmark for both checkboxes and radios (which is what we are trying to improve upon), and they don't have an icon for unchecked things (which is what the TF wants). However, Google Docs have cornered the market for "heavy menus" because they have icons for many of their regular menu items, as seen in this screen snap... ;)

[jnurthen]

@carmacleod perhaps that was scribing not accurately scribing my opinion.
I think the example if fine except that I do not think that the off state should display... it certainly does display which results in the menu being heavy.

Agree that the google menus are heavy

[carmacleod]

Ok, let's try that again. Here's a lighter version, with a checkmark for checked checkboxes, and a filled in circle for checked radios.

Here's a screen snap of the Style/Color menu showing a brown checkmark on both checkbox items and a brown dot on the checked radio items:

Perhaps someday a real graphic artist can come up with a beautiful way to distinguish unchecked checkbox menu items from regular menu items. :)

[jongund]

I think that looks good and provides a visual indication of menuitems that behave as checkboxes and radio buttons.

[carmacleod]

Can this be merged now, and #605 closed?

[mcking65]

It looks like @jongund is the only one who has reviewed the Aug 27 update from Carolyn.

@jnurthen, @sh0ji, do you think this is a sufficient resolution to #605?

[sh0ji]

Yep, this looks good to me!