Editor Menubar Example: Improve high contrast support and refactor Javascript

[jongund]

closes #1355

This pull request is to update the editor menubar example.

Editor Menubar Preview link

The goal of the update is to:

1. Simplify the Javascript code and use a single object
2. Improve high contrast support
3. The Javascript APIs will make it easy to use with ARIA AT setup scripts

Review checklist

• Editorial review by @mcking65
• Functional review by @a11ydoer
• Visual design review by @charmarkk
• Code review by @zcorpan

[jongund]

@spectranaut

There is a problem with the regression test "key.SPACE" feature, it does not seem to be generating the correct code for testing. I had to add some code on line 524 to pass the regression test for the
"space" character test. Can you look into this issue?

[smhigley]

@jongund I pushed a commit that fixes the failing spacebar test, based on my comment in #1358. All the tests pass locally for me now :)

[mcking65]

Completed editorial review. I pushed commits to fix some minor issues. All the copy looks good. Thank you @jongund.

[shirsha]

• In the updated menubar, the menu's that have sub-menus have no visual indicator as such.

• The menu closes whenever user selects. They must open it each time to make more selections. Ex: Style/color. The user can select more than one style from the available options but the menu closes as soon as user selects any one option. Similarly, when user select "Smaller" in Size by default "medium” font size is selected. To change the font size, the user must open the Size menu and change the selection.

• The red color text (16px) against white background doesn't pass the required color contrast ratio of 4.5:1

• In Andriod, menus are not consistently expanding on touch.If a menu is open, it takes two touches to open another menu. It is working fine in iOS.

[jongund]

@mcking65
I fixed the merge conflicts, but the regression test file test\tests\menubar_menubar-2.js still needs to be removed, the example it once tested has been changed to menubar_menubar-editor,js. I tired to remove the file, but it generates a merge conflict, so I put it back in. Maybe you can fix it.

[jongund]

@mcking65
As I thought the regression test test\tests\menubar_menubar-2.js is failing, because the example it references does not exist anymore (e.g. new example name menubar-editor.html and new test file test\tests\menubar_menubar-editor.js). When I delete the uneeded test file from the branch it gives the merge conflict in GitHub you reported earlier, so I am not sure what to do fix the problem. Seems like a catch 22 for me.

[mcking65]

@jongund, what if we keep the current editor menubar and its tests; just make this PR about adding new versions with new names/location. Then, after we merge this, we do a separate PR to remove the unnecessary files? I wonder if that would solve the problem.

It doesn't seem like such gymnasitcs should be necessary ... I guess this calls for further investigationit is

[jongund]

@mcking65
Restored original menubar editor example files, seems like that should fix the merge conflict problem.

[jongund]

@mcking65
Looks like it is ready to merge now.

[spectranaut]

This all looks great to me! Very readable and simple code, perfect for an example. And the tests all apply to this example and run successfully. I fixed one spelling error in a comment.