[menu button examples] Sub-menus

[vincent-lg]

While it seems there is support for sub-menu items, I find it odd that no example exists with the usage of sub-menu items. Perhaps it was thought as straightforward, and perhaps it is, but I can't figure out how to use any of the provided example with sub-menus. It's also quite possible that the three examples for menu buttons are only meant for "flat" menu without depth, since is seems, reading through the Javascript code, that there is no support for nested menus.

What I'm currently trying to do is quite simple:

Click on a button then a menu popups:

Choice 1
choice 2
Choice 3 (submnu)
    Choice 3.1
    Choice 3.2
    ...

Of course, both the visual aspect in nested lists and screen reader reporting should be accurate. Screen readers seem to be able to handle this situation (at least, NVDA does, I believe).

Taking this example from the Action Menu Button Example Using aria-activedescendant, I imagined something like this for the HTML code:

<div class="menu_button">
  <button id="menubutton1"
          aria-haspopup="true"
          aria-controls="menu1">
    Actions
  </button>
  <ul id="menu1"
      role="menu"
      aria-labelledby="menubutton1"
      aria-activedescendant="mi1">
    <li id="mi1"
        role="menuitem"
        onclick="updateLastAction(event)">
      Action 1
    </li>
    <li id="mi2"
        role="menuitem"
        onclick="updateLastAction(event)">
      Action 2
    </li>
    <li id="mi3"
        role="menuitem"
        onclick="updateLastAction(event)">
      Action 3
    </li>
    <li id="mi4"
        role="menuitem"
        onclick="updateLastAction(event)">
      Action 4
    </li>
    <li id="mi5"
        role="menuitem"
        aria-haspopup="menu"
        aria-expanded="false">
        Action 5
    </li>
    <li role="none">
      <ul id="menu2"
          role="menu"
          aria-label"Action 5"
          aria-activedescendant="mi51"
          aria-expanded="false">
        <li id="mi51"
            role="menuitem"
            onclick="updateLastAction(event)">
          Action 5.1
        </li>
        <li id="mi52"
            role="menuitem"
            onclick="updateLastAction(event)">
          Action 5.2
        </li>
      </ul>
    </li>
  </ul>
</div>
<p>
  <label>
    Last Action:
    <input id="action_output"
           type="text"
           value="">
  </label>
</p>

(Of course, this was an attempt and doesn't work, so this HTML code might be wrong altogether.)

The same could be said about menu bars since a menu bar, as presented in the examples, is a menu with two levels instead of just one, which doesn't include sub-menu items.

Thank you so much for your great work!

[carmacleod]

Hi, @vincent-lg

• Try role="none" on the li elements, and adding a span or anchor child (with tabindex="-1") for the role="menuitem".
• Then, the ul role="menu" can be a sibling of the menuitem that has aria-haspopup="menu" aria-expanded="true/false".
• Also, remove aria-expanded from the menu - it just goes on the menuitem.

Hope this helps!

[vincent-lg]

Thank you for your prompt reply. Unfortunately, I get strange results with NVDA. The accessibility inspector (in Mozilla Firefox) tells me everything seems okay... or at least, should work. So again, I might have misunderstood your explanation and written the wrong HTML code. I feel quite dense but none of my tries seem to work. Here's an abridged version of my HTML code, it might be easier to see the problem. Below is what NVDA detects, which is quite odd:

<div class="menu_button">
  <button id="menubutton1" aria-haspopup="true" aria-controls="menu1">Actions</button>
  <ul id="menu1" role="menu" aria-labelledby="menubutton1" aria-activedescendant="mi1">
    <li id="mi1" role="menuitem" onclick="updateLastAction(event)">Action 1</li>
    <li id="mi2" role="menuitem" onclick="updateLastAction(event)">Action 2</li>
    <li id="mi3" role="menuitem" onclick="updateLastAction(event)">Action 3</li>
    <li id="mi4" role="menuitem" onclick="updateLastAction(event)">Action 4</li>
    <li id="mi5" role="none">
      <a href="#menu2" tabindex="-1" role="menuitem" aria-haspopup="menu" aria-expanded="false">Action 5</a>
    </li>
    <!-- Should the ul be just below? the list structure sounds odd but I
         thought I understood that when you said "sibbling" -->
    <ul id="menu2" role="menu" aria-label"Action 5" aria-activedescendant="mi51">
      <li id="mi51" role="none" onclick="updateLastAction(event)">Action 5.1</li>
      <li id="mi52" role="none" onclick="updateLastAction(event)">Action 5.2</li>
    </ul>
  </ul>
</div>

When you click on the 'actions' button, NVDA sees the following (using the arrow keys seem to work at least for the first 4 elements):

Actions mnu Action 1 (1 of 5)
Action 2 (2 of 5)
Action 3 (3 of 5)
Action 4 (4 of 5)
Actions mnu
Actions mnu
...

When you press down arrow you kind of go back to action 1 though NVDA doesn't detect it well and only reacts at action 2.

Either NVDA doesn't support it (possible but unlikely), there's something wrong in my HTML (extremely likely) or the Javascript I use kind of interferes (I use the one in the linked example above, unchanged).

I'm really sorry, I really have no clue how to fix that example.

Thank you for your help (and patience!),

[carmacleod]

Hi @vincent-lg. Did you ever get this working?
If not, then in case it's helpful, the following markup creates a submenu ("New") and even a sub-submenu ("Project") and I know this works well in a menubar. The menubar looks like this:

File
- New >
-- Folder
-- Project >
--- Basic
--- Zip Archive
--- Git Repository
- Open file...
Edit (etc)

Maybe you can use this markup to help figure out what might fix your menu button example.

To change the menubar markup to menu button, I think all you have to do is delete the first 2 elements:
<ul role="menubar" tabindex="-1"><li role="none"> ...keep the descendant elements... </li></ul> and then remove role="menuitem" from the "File" button.

<ul role="menubar" tabindex="-1">
  <li role="none">
    <button aria-haspopup="menu" aria-expanded="true" role="menuitem" tabindex="0">File</button>
    <ul role="menu" aria-label="File" tabindex="-1">
      <li role="none">
        <span aria-expanded="true" aria-haspopup="true" role="menuitem" tabindex="-1">New<span class="dropdownArrow" aria-hidden="true"></span></span>
        <ul role="menu" aria-label="New" tabindex="-1">
          <li role="none"><span role="menuitem" tabindex="-1">Folder</span></li>
          <li role="none"><span aria-expanded="false" aria-haspopup="true" role="menuitem" tabindex="-1">Project<span class="dropdownArrow" aria-hidden="true"></span></span>
            <ul role="menu" aria-label="Project" tabindex="-1">
              <li role="none"><span role="menuitem" tabindex="-1">Basic</span></li>
              <li role="none"><span role="menuitem" tabindex="-1">Zip Archive</span></li>
              <li role="none"><span role="menuitem" tabindex="-1">Git Repository</span></li>
            </ul>
          </li>
        </ul>
      </li>
      <li role="none"><span role="menuitem" tabindex="-1">Open File...<span>Ctrl+Shift+F</span></span></li>
    </ul>
  </li>
  <!-- ... top level Edit, View, etc menus go here... -->
</ul>

[carmacleod]

We should add submenu support to the menubar example.