Navigation Menubar Example: Improve high contrast support and refactor javascript #1359

jongund · 2020-03-24T20:28:13Z

Updated the javascript to use a single object
Updated example to improve high contrast support

Preview Link

View navigation menubar in the compare branch for this PR

Review Checklist

charmarkk

Perhaps one issue - the down arrow graphics don't seem to shift color and I'm not sure it'd be high contrast enough. And one note - there is no background to the menubar with HCM enabled and focus outline only appears once a menu item is focused w/ the keyboard. I'm thinking that the fact there's no background is as designed though.

Approved pending similar changes to #1356.
Thanks @jongund!
Windows 10.0.17763 Build 17763; Firefox 75, Chrome 81.0.4044.113, Edge 81.0.416.58

jongund · 2020-04-20T21:48:32Z

@charmarkk

Can you re-review the navigation menubar example for high contrast, I added a 1 pixel border to the menubar for this example too.

charmarkk

LGTM @jongund, thank you!

a11ydoer · 2020-04-20T21:56:30Z

@carmacleod @zcorpan @mcking65
Could you kindly allot time to review the menubar example before APG meeting tomorrow so that we can publish the example? Thanks for your consideration.

…gh contrast mode

mcking65

I pushed 4 commits to address some editorial issues. All copy is good now.

…-practices into issue1357-navigation-menubar-js

jongund · 2020-07-16T16:35:17Z

@carmacleod
Can you retest, I updated to use inline SVG and fixed the labeling issue and updated the accessibility documentation.

carmacleod · 2020-07-16T16:58:12Z

examples/menubar/menubar-navigation.html

+      <li>To support operating system high contrast settings:
+        <ul>
+          <li>Focus is highlighted by adding and removing a border around the menu item with focus.</li>
+          <li>The arrow icons used to indicate the current state of pull expandable menus use inline SVG images.</li>


Probably should also mention currentColor? It's an important part of the support.
(also, probably just say "expandable" and not "pull expandable")

Suggested change

<li>The arrow icons used to indicate the current state of pull expandable menus use inline SVG images.</li>

<li>The arrow icons used to indicate the current state of expandable menus use inline SVG images with CSS currentColor.</li>

carmacleod · 2020-07-16T17:01:23Z

Looks great, @jongund !

The triangle icons use the bright yellow link color - very easy to see. I guess currentColor is link color because the menuitems are links.

Here's a screen snap of Navigation Menubar Example in Edge High Contrast Black:

And here's a screen snap of Navigation Menubar Example in Edge High Contrast White:

Now just need to fix Editor Menubar Example the same way, but that can be done in a separate PR.

jongund · 2020-07-16T17:11:30Z

@carmacleod
Thank you the quick review, if all looks good now could you give an approving review.

carmacleod · 2020-07-16T19:15:16Z

@jongund Thanks for updating the Accessibility Features documentation. Please see my suggestion re talking about currentColor.
I want to finish testing with screen readers before I can give an approving review. I will get to that later today.

jongund · 2020-07-17T14:13:36Z

@carmacleod
I added information to the use of thee SVG image to include the use of the currentColor value to the fill and stroke properties.

carmacleod

@jongund Sorry to take so long to finish this up. Thanks for your patience.
I wanted to finish the screen reader testing in case anything in the example needed changing.
I didn't find anything that would hold up merging this. Details below.

I did find a small CSS issue in the Navigation menubar example that doesn't need to hold up merging. Let me know if you'd like me to open a new issue. Steps:

Focus the link right before the menubar (i.e. the Example Disclosure for Navigation Menus link. This will ensure that you can see the menubar, but it does not have focus)
Hover the mouse over the About menuitem or the Admissions menuitem, and then move the mouse out again. Repeat. Notice that there's a 1 or 2 pixel left-right "jiggle" as the hover style is drawn and removed.
Now type tab so that focus moves into the menubar. Shift+tab back to the link. Repeat. Notice the same jiggle as the focus style is drawn and removed.
The jiggle doesn't happen in the Editor menubar except in Firefox on mouse hover only (not focus).

Screen reader testing results

Tested both menubar examples in the following pairings:

NVDA in Chrome, Firefox and Edge
- works very well in all 3 browsers
- impressed how well NVDA works in Edge (anybody know if it is using UIA?)
JAWS in Chrome and Firefox
- works ok, but doesn't say if a menuitem has a submenu, doesn't read group names
JAWS in Edge
- does not work well: doesn't say if a menuitem has a submenu, forms mode issues in Editor menubar
Narrator in Edge - works great
VoiceOver in Safari and Chrome
- prepends the number 1 to checked menuitems in Editor menubar (I will open a radar for this)
- doesn't always read the first menu item after opening
- doesn't always say item count (and if it does, count may be wrong, and/or may include separators)
- doesn't always say group name when entering group
- doesn't always say if a menuitem has a submenu (Safari only)

Other notes:

NVDA and Narrator distinguish between checkbox and radio menuitems, but JAWS and VO don't
Firefox uses separator as a grouping divider (which affects counts), Edge and Chrome only group if there's a group

Both of these examples are working really well! Thanks so much, @jongund !

carmacleod · 2020-07-18T03:00:28Z

@jongund Just realized that the 2 links in aria-practices.html Menubar pattern (lines 1938 and 1939 in the code) need to be updated.

carmacleod · 2020-07-18T13:33:55Z

@jongund
Thanks for fixing the horizontal jitter in the menubar!
If I split the border css into top, bottom, left, right, and give top and bottom the old 4px value, and left and right the new 3px value, then the vertical jitter is gone from the pull down menus as well.

Here's some code that works (this can probably be written more concisely... I'm not very good at css).

... starting line 113 in menubar-navigation.css

  border-top: 4px solid #034575;
  border-bottom: 4px solid #034575;
  border-left: 3px solid #034575;
  border-right: 3px solid #034575;

jongund · 2020-07-18T22:20:52Z

@carmacleod
I think I fixed the gutter issue.
Could you test it when you have a chance.
Thanks again for all your help on this example!

mcking65 · 2020-07-19T00:36:11Z

@jongund thank you for all your work on these menubar examples ... awesome improvements!!

And thank you to everyone else who has contributed with reviews and testing. Fabulous teamwork!

Here goes the merge!

Navigation Menubar Example: Improve high contrast support and refactor javascript (pull #1359) closes issue #1357 by making the following changes: * Updated javascript to use a single object. * Updated CSS and JS to improve high contrast support. Co-authored-by: Matt King <a11yThinker@gmail.com>

carmacleod · 2020-07-20T14:58:18Z

@jongund

@carmacleod
I think I fixed the gutter issue.

Yes!! It's fixed beautifully! I tested the merged Navigation Menubar Example in Chrome, Edge, and Firefox.
No jiggles or jitters anywhere that I could see. :)

Thanks again so much @jongund for all of your work on this!

jongund added 5 commits March 19, 2020 19:10

initial files for navigation menubar

2edd0b9

updated script

9e9fdf2

update menubar navigation

4b308a7

udpated menubar navigation

fc2074e

updated documentation on keyboard support

5ddc2cd

jongund changed the title ~~Issue1357 navigation menubar javascript and high contrast update~~ Issue1357 navigation menubar javascript and high contrast compatibility Mar 25, 2020

jongund changed the title ~~Issue1357 navigation menubar javascript and high contrast compatibility~~ Navigation menubar javascript and high contrast compatibility Mar 27, 2020

jongund added 3 commits March 31, 2020 15:42

updated tests to identify failing tests due to Issue 1358

f52ee72

updated test with SPACE key

4cd1d1d

updated focus styling

a7a83c5

jongund requested a review from charmarkk April 17, 2020 19:11

charmarkk approved these changes Apr 18, 2020

View reviewed changes

added a 1 pixel border to menubar to improve high contrast support

63026bb

jongund requested a review from charmarkk April 20, 2020 21:47

charmarkk approved these changes Apr 20, 2020

View reviewed changes

jongund and others added 6 commits April 21, 2020 12:30

updated the example to use SVG images to improve color contrast in hi…

a3eadca

…gh contrast mode

preload images

db7e292

Editorial revisions to accessibility features

ff3b1f2

Editorial revision to enter and space documentation

569c2a0

Update links to source js and css

4c7497a

Fix href in footer link to design pattern

3495c57

mcking65 changed the title ~~Navigation menubar javascript and high contrast compatibility~~ Navigation Menubar Example: Improve high contrast support and refactor javascript Apr 21, 2020

mcking65 approved these changes Apr 21, 2020

View reviewed changes

jongund added 5 commits April 22, 2020 11:04

updated focus styling to use solid borders

71cd9c3

add SVG separator

ba5aabd

Merge branch 'issue1357-navigation-menubar-js' of github.com:w3c/aria…

ad02ba3

…-practices into issue1357-navigation-menubar-js

started updating mouse behavior

7ea221b

fixing mouse over issues with menubar navigation

4da3f0b

jongund added 3 commits July 16, 2020 11:08

improved color contrast support

b64a364

removed unused preloaded images

86bef29

fixed label for tutition pop out menu

ffedc76

jongund added 2 commits July 16, 2020 11:36

fixed href missing a #

404ddbf

updated documentation

7863f68

carmacleod reviewed Jul 16, 2020

View reviewed changes

updated docuemntation

8dd6c56

jongund and others added 2 commits July 17, 2020 09:19

updated accessibility documentation related to SVG images

5f52431

Merge branch 'master' into issue1357-navigation-menubar-js

195c634

carmacleod self-requested a review July 17, 2020 23:01

carmacleod approved these changes Jul 18, 2020

View reviewed changes

fixed most of gitter issue, still some on pull down menus

282d2ca

fixed menu gitter on focus and hover

f5d9081

aria-practices.html: update links to menubar examples

15e3450

mcking65 merged commit eddfdee into master Jul 19, 2020

mcking65 deleted the issue1357-navigation-menubar-js branch July 19, 2020 00:40

mcking65 added the assistive-technology-dependency Identify PRs and issues that document assistive tech issues that are outside APG scope label Jul 19, 2020

This was referenced Jul 20, 2020

Menubar examples: Make mouse behaviors and parent menu item appearance change triggers more consistent with desktop conventions #408

Closed

Menubar Examples: Remove (or replace) all remaining instances of "menubar-1" and "menubar-2" #1457

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Navigation Menubar Example: Improve high contrast support and refactor javascript #1359

Navigation Menubar Example: Improve high contrast support and refactor javascript #1359

jongund commented Mar 24, 2020 •

edited by pr-preview bot

Loading

charmarkk left a comment •

edited

Loading

jongund commented Apr 20, 2020

charmarkk left a comment

a11ydoer commented Apr 20, 2020

mcking65 left a comment

jongund commented Jul 16, 2020 •

edited

Loading

carmacleod Jul 16, 2020

carmacleod commented Jul 16, 2020

jongund commented Jul 16, 2020

carmacleod commented Jul 16, 2020

jongund commented Jul 17, 2020

carmacleod left a comment

carmacleod commented Jul 18, 2020

carmacleod commented Jul 18, 2020 •

edited

Loading

jongund commented Jul 18, 2020

mcking65 commented Jul 19, 2020

carmacleod commented Jul 20, 2020

	<li>The arrow icons used to indicate the current state of pull expandable menus use inline SVG images.</li>
	<li>The arrow icons used to indicate the current state of expandable menus use inline SVG images with CSS currentColor.</li>

Navigation Menubar Example: Improve high contrast support and refactor javascript #1359

Navigation Menubar Example: Improve high contrast support and refactor javascript #1359

Conversation

jongund commented Mar 24, 2020 • edited by pr-preview bot Loading

Preview Link

Review Checklist

charmarkk left a comment • edited Loading

Choose a reason for hiding this comment

jongund commented Apr 20, 2020

charmarkk left a comment

Choose a reason for hiding this comment

a11ydoer commented Apr 20, 2020

mcking65 left a comment

Choose a reason for hiding this comment

jongund commented Jul 16, 2020 • edited Loading

carmacleod Jul 16, 2020

Choose a reason for hiding this comment

carmacleod commented Jul 16, 2020

jongund commented Jul 16, 2020

carmacleod commented Jul 16, 2020

jongund commented Jul 17, 2020

carmacleod left a comment

Choose a reason for hiding this comment

Screen reader testing results

carmacleod commented Jul 18, 2020

carmacleod commented Jul 18, 2020 • edited Loading

jongund commented Jul 18, 2020

mcking65 commented Jul 19, 2020

carmacleod commented Jul 20, 2020

jongund commented Mar 24, 2020 •

edited by pr-preview bot

Loading

charmarkk left a comment •

edited

Loading

jongund commented Jul 16, 2020 •

edited

Loading

carmacleod commented Jul 18, 2020 •

edited

Loading