Review editor menubar example revisions made through June 2017

[mcking65]

The editor menubar example has been significantly revised and is ready for additional review.

Known issues

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

Reviews requested as of June 20, 2017

• Review by @a11ydoer
• Review by @shirsha
• Review by @jnurthen

[shirsha]

Below are my observations:

1. When the focus is on the “Font” menu, use down arrow ( you will see “Sans-seriff” has a check mark next to it) and go the last submenu item “Fantasy” and select enter. The Font changes accordingly. Select tab to go the next focusable item. The whole menubar is missing now.
   Please see the screenshot Move issues to new repo #1.

2)When I selected Fantasy, now I go to the next item (Style/Color) in the menubar by clicking the right arrow.
Then I will go back to the previous item(Font) to see my selection and none of them have a checkmark next to it.

Screen reader NVDA in FF browser is not announcing that the different font is selected (on selecting enter) and when I go back to that font type by using up and down arrow, NVDA is reading the font type is not checked but the font is changed in the tab panel according to the selection made.
Please see the attachment #2

In Style/color menu. Upon selecting only first two submenu items got check mark next to them. Not for the remaining selections.
Please see screen shot#3

Editor menu bar.docx

[StommePoes]

I ran the example through aXe, since it had some stuff that looked fishy (li with aria-expanded which never changes, then inside a direct-child span with aria-expanded which DOES change... confusing for a developer) and aXe claimed a menuitem role'd thing can't have aria-expanded.

Indeed I don't see aria-expanded in the list for menuitems and related types, though I do see aria-haspopup. So what's the secret way of showing the expanded/collapsed state of the submenu "popup"? Should the menuitem NOT have a haspopup and instead have a button inside with haspopup and expanded?
Or should the menuitem have haspopup and a button child inside with expanded?
Or should the menuitem just have haspopup and users need to simply expect there is an expanded popup merely because they've encountered the menuitem in the first place (no explicit state)?

Are menuitems allowed to have controls inside them other than what they themselves do? If it has a menu child, can it also have a button child? Should it?

Whatever it is I'm doing at work, it's never going to be following the spec entirely, because I'm too dumb to be able to read it right.

[jnurthen]

@StommePoes see w3c/aria#454

[mcking65]

@shirsha, thanks. It looks like this example was broken by commit 0de93bd.

It took some digging, but I found if I checkout one of the parents of that commit, commit a6d74df, the aria-checked properties are getting set correctly.
Then, if I checkout commit 0de93bd,
in several of the menus, the aria-checked state is not getting set correctly.

That is the cause of the NVDA behavior you are observing.

I could not reproduce the first issue you observed.

I also observed that that the Enter key behavior does not match what is documented in the pattern.

I raised issue #524.

[a11ydoer]

@mcking65 I have reviewed the menubar and @shirsha seems to do a good job to review the example.

[mcking65]

@StommePoes commented:

Are menuitems allowed to have controls inside them other than what they themselves do? If it has a menu child, can it also have a button child? Should it?

No, menuitems are not composite widgets. They cannot contain other widgets.

[mcking65]

OK; it appears all requested reviews are complete and comments have been addressed now that issue #524 is closed. Thank you all for your help with this! Special thanks to @sh0ji who speedily handled issue #524. Closing!

[wzhonggo]

No refer to menubar-2-init.js in the Javascript and CSS Source Code paragraph of menubar-2 example.

CSS and js in menubar-2.html

 <!--  CSS and javascript for this example.  -->
  <link href="css/menubarAction.css" rel="stylesheet">
  <script src="js/styleManager.js"    type="text/javascript"></script>
  <script src="js/MenubarAction.js"       type="text/javascript"></script>
  <script src="js/MenubarItemAction.js"   type="text/javascript"></script>
  <script src="js/PopupMenuAction.js"     type="text/javascript"></script>
  <script src="js/PopupMenuItemAction.js" type="text/javascript"></script>
  <script src="js/menubar-2-init.js" type="text/javascript"></script>