Update menubutton examples: High Contrast Support and APG Coding Practices

[jongund]

Updated menu button examples to:

1. Improve Javascript coding and use key rather than keyCode in keyboard events, and a single object
2. Improved high contrast support

Preview links

Review: Menu Button for Links
Review: Menu Button for Actions
Review: Menu Button for Actions using aria-activedescendant

Review checklist

• @mcking65
• @curtbellew
• @a11ydoer
• @charmarkk
• code review process)
• @spectranaut

[jongund]

@zcorpan

Can you look at the test cases that are failing for the updated menu button examples?
I can't figure out why they are failing, I get passing results for most of the tests and inconsistent failures on my local MacOS and Windows 10 machine.

1. macOS: links and aria-activedescent example all tests pass, page down, page up and end fail for actions with focus example.
2. Windows 10: both action examples pass and there about six failures related to keystrokes for the links example.

This is driving me nuts, what don't I understand about the testing framework?

[charmarkk]

Guessing at answers, I propose the following text.

Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements. Instead of using transparency, the focused element has a thicker border and less padding. When an element receives focus, its border changes from 1 to 3 pixels and padding is reduced by 2 pixels. When an element loses focus, its border changes from 3 to 1 pixels and padding is increased by 2 pixels.

The above text does not explain why we have a 1 pixel border on elements that ar not focused. Taking a wild guess at what things look like to you sightees, should we add a bullet like:

Because enabling operating system high contrast settings can remove color variations used to distinguish buttons and menu items from plain text, focusable elements are given a 1 pixel border.

I think this is a good combo/compromise, Matt!

[spectranaut]

All conflicts were related to new lint and prettier rules! Fixed now :)

[jongund]

@mcking65
Javascript now uses class instead of prototype for defining widget object inline with new authoring practices.

[jongund]

@mcking65
I have updated the high contrast documentation.

[mcking65]

As anticipated, we have some conflicts from recent merges. @jongund, if you could help resolve, that'd be great. Otherwise, Valerie can help when she has another day on APG.

This looks pretty much ready to go. I want to make some minor grammar edits to the accessibility features documentation. Then, I'll merge.

[jongund]

@mcking65
I fixed the conflicts, so should be ready for your edits.

[mcking65]

Editorial review complete; ready to merge!

[mcking65]

@jongund thank you, thank you, thank you for all the hard work put into this!!!!