Merge pull request #507 from brichet/accessibility

Accessibility: role attributes

Author: krassowski

packages/widgets/src/accordionpanel.ts

@@ -401,7 +401,7 @@ export namespace AccordionPanel {
      */
     createSectionTitle(data: Title<Widget>): HTMLElement {
       const handle = document.createElement('h3');
-      handle.setAttribute('role', 'button');
+      handle.setAttribute('role', 'tab');
       handle.setAttribute('tabindex', '0');
       handle.id = this.createTitleKey(data);
       handle.className = this.titleClassName;

packages/widgets/src/commandpalette.ts

@@ -771,7 +771,7 @@ export namespace CommandPalette {
           {
             className,
             dataset,
-            role: 'checkbox',
+            role: 'menuitemcheckbox',
             'aria-checked': `${data.item.isToggled}`
           },
           this.renderItemIcon(data),
@@ -782,7 +782,8 @@ export namespace CommandPalette {
       return h.li(
         {
           className,
-          dataset
+          dataset,
+          role: 'menuitem'
         },
         this.renderItemIcon(data),
         this.renderItemContent(data),
@@ -1012,6 +1013,7 @@ namespace Private {
     clear.className = 'lm-close-icon';
 
     content.className = 'lm-CommandPalette-content';
+    content.setAttribute('role', 'menu');
     input.spellcheck = false;
     wrapper.appendChild(input);
     wrapper.appendChild(clear);