Toolbar example for simple text editor

[jongund]

This updated toolbar is intended to resolve issues #541 and #847.

Preview the new toolbar in Jon's repo

[jongund]

I updated pull request to add the design pattern references to the documentation and to remove left and right keyboard behaviors from the pull down menu items. Still working on the test cases.

[carmacleod]

Finally had a chance to look at this quickly and write down a few suggestions:

• Please don't use <i> for icons. I know everybody does it, but the semantics of <i> are "my content is in italics", not "my content is an icon". We should be using a span instead.

• The "Text Alignment" group should be a "radiogroup" with "radio" children, not a role="menu".

• Consider giving the div's with class="group" a role="group" and an aria-label. (Not sure if this would be too verbose - might check with @mcking65).

• A more common ordering of this type of toolbar is font name first, then font size, then font emphasis like bold, italic, underline, then the paragraph alignment.

• Cut, Copy, and Paste have a title (i.e. tooltip; note misspelled "from" in Cut/Copy), so for consistency (and for sighted users) Bold, Italics, Underline, Align left/center/right, Font type, and size increment/decrement should have a title also. (Or even better, all of the tools should have a custom tooltip that comes up on both hover and focus, or only on hover but user can type Shift+F1/Cmd+? to open tooltip when focused).

• Would be nice if the tools supported the common shortcut keys, i.e. Ctrl/Cmd + B for Bold, Ctrl/Cmd + I for Italics, Ctrl/Cmd + U for Underline, Ctrl/Cmd + L/E/R for Left/Center/Right alignment; and if so, then all tooltips should include the appropriate shortcut key.

• Would be nice if all of the tools supported a visual change on hover.

• The visual difference between pressed/not pressed toggle buttons and checked/unchecked radios is too subtle. It would not pass the new WCAG 2.1 SC 1.4.11 Non-text Contrast, i.e.

  • Unpressed toggle white background:#FFFFFF in toolbar background:#EDEDEB contrast ratio is: 1.2:1
  • Pressed toggle 1-pixel outline:#F5F5F5 beside button background:#A9A9A9 contrast ratio is: 2.2:1
  • Downward-pointing triangle in menu button:#878787 on white background:#FFFFFF contrast ratio is: 3.6:1
  • Toolbar background:#EDEDEB to pressed toggle background:#F5F5F5 contrast ratio is: 1.1:1
  • Pressed toggle background:#F5F5F5 to unpressed toggle white background:#FFFFFF contrast ratio is: 1.1:1

[jongund]

Carolyn, Thank you for the feedback and comments. 1. I will fix the problem with the <I> element. 2. The standard radio button pattern does not work since selection (e.g. checked item) in the radio group pattern moves when focus moves, so we need to have a select one of many pattern, where selection must be explicitly set. So there best option right now is menuitemradio. Documentation on this usage needs to be improved in the example, I will add the explanation. 3. I will fix the tooltip issue. 4. Right now the toolbar pattern does not discuss the use of shortcut keys, so created an issue for the working group: #948 5. I can add some hover styling to the buttons 6. The pressed buttons include changing the border to have more than color, but I will also update to your color recommendations. Jon From: Carolyn MacLeod <notifications@github.com> Reply-To: w3c/aria-practices <reply@reply.github.com> Date: Saturday, December 1, 2018 at 10:08 PM To: w3c/aria-practices <aria-practices@noreply.github.com> Cc: Jon Gunderson <jongund@illinois.edu>, Mention <mention@noreply.github.com> Subject: Re: [w3c/aria-practices] Toolbar example for simple text editor (#887) Finally had a chance to look at this quickly and write down a few suggestions: * Please don't use <i> for icons. I know everybody does it, but the semantics of <i> are "my content is in italics", not "my content is an icon". We should be using a span instead. * The "Text Alignment" group should be a "radiogroup" with "radio" children, not a role="menu". * Consider giving the div's with class="group" a role="group" and an aria-label. (Not sure if this would be too verbose - might check with @mcking65<https://github.com/mcking65>). * A more common ordering of this type of toolbar is font name first, then font size, then font emphasis like bold, italic, underline, then the paragraph alignment. * Cut, Copy, and Paste have a title (i.e. tooltip; note misspelled "from" in Cut/Copy), so for consistency (and for sighted users) Bold, Italics, Underline, Align left/center/right, Font type, and size increment/decrement should have a title also. (Or even better, all of the tools should have a custom tooltip that comes up on both hover and focus, or only on hover but user can type Shift+F1/Cmd+? to open tooltip when focused). * Would be nice if the tools supported the common shortcut keys, i.e. Ctrl/Cmd + B for Bold, Ctrl/Cmd + I for Italics, Ctrl/Cmd + U for Underline, Ctrl/Cmd + L/E/R for Left/Center/Right alignment; and if so, then all tooltips should include the appropriate shortcut key. * Would be nice if all of the tools supported a visual change on hover. * The visual difference between pressed/not pressed toggle buttons and checked/unchecked radios is too subtle. It would not pass the new WCAG 2.1 SC 1.4.11 Non-text Contrast<https://w3c.github.io/wcag21/guidelines/#non-text-contrast>, i.e. * Unpressed toggle white background:#FFFFFF in toolbar background:#EDEDEB contrast ratio is: 1.2:1 * Pressed toggle 1-pixel outline:#F5F5F5 beside button background:#A9A9A9 contrast ratio is: 2.2:1 * Downward-pointing triangle in menu button:#878787 on white background:#FFFFFF contrast ratio is: 3.6:1 * Toolbar background:#EDEDEB to pressed toggle background:#F5F5F5 contrast ratio is: 1.1:1 * Pressed toggle background:#F5F5F5 to unpressed toggle white background:#FFFFFF contrast ratio is: 1.1:1 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#887 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ABcE7PewJYt46ZO3Y9t-94D0cvBIkeidks5u01IsgaJpZM4WoQqj>.

[jongund]

Updated pull request to include changes from Carolyn.

[carmacleod]

Wow, that was fast - thanks, Jon!

Regarding:

2. The standard radio button pattern does not work since selection (e.g. checked item) in the radio group pattern moves when focus moves

Ah, I see. So we need to fix the pattern to allow for radiogroups in toolbars. I've opened #949 to address this.

In the meantime, you might want to add aria-orientation="horizontal" to the "menu" to indicate that left/right arrow keys are expected (although I see that it works with up/down arrows as well, so not critical).

I like the new hover and focus styles - they are beautifully clear! It's still hard to tell the difference between checked and not-checked toggles and radios, though.

Are you still planning to add a title/tooltip to the Bold, Italics, Underline, Align left/center/right, Font type, and size increment/decrement tools (for consistency with Cut/Copy/Paste, and in case any sighted folks need help understanding the icons)?

Thanks again for the super-quick updates and explanations!

[mcking65]

@jongund, during tomorrow's meeting, we'll discuss how to divide remaining work on this.

[annabbott]

I can now visually tell the difference between checked and not-checked toggles and radios with ease. Looks good to me.