Adds roles and popup to all menu items. Corrects separator.

packages/widgets/src/menu.ts

@@ -34,7 +34,7 @@ import {
 } from '@phosphor/signaling';
 
 import {
-  ElementDataset, VirtualDOM, VirtualElement, h
+  ElementAriaAttrs, ElementDataset, VirtualDOM, VirtualElement, h
 } from '@phosphor/virtualdom';
 
 import {
@@ -1143,8 +1143,9 @@ namespace Menu {
     renderItem(data: IRenderData): VirtualElement {
       let className = this.createItemClass(data);
       let dataset = this.createItemDataset(data);
+      let aria = this.createItemAria(data);
       return (
-        h.li({ className, dataset, role: 'menuitem' },
+        h.li({ className, dataset, aria },
           this.renderIcon(data),
           this.renderLabel(data),
           this.renderShortcut(data),
@@ -1269,6 +1270,21 @@ namespace Menu {
       return extra ? `${name} ${extra}` : name;
     }
 
+    createItemAria(data: IRenderData): ElementAriaAttrs {
+      let aria: any = {};
+      switch (data.item.type) {
+      case 'separator':
+        aria.role = 'separator';
+        break;
+      case 'submenu':
+        aria['aria-haspopup'] = true;
+        break;
+      default:
+        aria.role = 'menuitem';
+      }
+      return aria;
+    }
+
     /**
      * Create the render content for the label node.
      *

packages/widgets/src/menubar.ts

@@ -22,7 +22,7 @@ import {
 } from '@phosphor/messaging';
 
 import {
-  ElementDataset, VirtualDOM, VirtualElement, h
+  ElementAriaAttrs, ElementDataset, VirtualDOM, VirtualElement, h
 } from '@phosphor/virtualdom';
 
 import {
@@ -748,8 +748,9 @@ namespace MenuBar {
     renderItem(data: IRenderData): VirtualElement {
       let className = this.createItemClass(data);
       let dataset = this.createItemDataset(data);
+      let aria = this.createItemAria(data);
       return (
-        h.li({ className, dataset, role: 'menuitem', 'aria-haspopup': 'true' },
+        h.li({ className, aria, dataset},
           this.renderIcon(data),
           this.renderLabel(data)
         )
@@ -809,6 +810,10 @@ namespace MenuBar {
       return data.title.dataset;
     }
 
+    createItemAria(data: IRenderData): ElementAriaAttrs {
+      return {role: 'menuitem', 'aria-haspopup': 'true'};
+    }
+
     /**
      * Create the class name for the menu bar item icon.
      *