Accessibility: WAI-ARIA roles nesting wrong in menu

Author: mirianstangherlin

app/code/Magento/Theme/Block/Html/Topmenu.php

@@ -246,7 +246,7 @@ protected function _getHtml(
             }
 
             $html .= '<li ' . $this->_getRenderedMenuItemAttributes($child) . '>';
-            $html .= '<a href="' . $child->getUrl() . '" ' . $outermostClassCode . '><span>' . $this->escapeHtml(
+            $html .= '<a href="' . $child->getUrl() . '" ' . $outermostClassCode . ' role="menuitem"><span>' . $this->escapeHtml(
                 $child->getName()
             ) . '</span></a>' . $this->_addSubMenu(
                 $child,
@@ -288,7 +288,10 @@ protected function _getRenderedMenuItemAttributes(Node $item)
      */
     protected function _getMenuItemAttributes(Node $item)
     {
-        return ['class' => implode(' ', $this->_getMenuItemClasses($item))];
+        return [
+            'class' => implode(' ', $this->_getMenuItemClasses($item)),
+            'role' => 'presentation'
+        ];
     }
 
     /**

app/code/Magento/Theme/view/frontend/templates/html/sections.phtml

@@ -34,7 +34,7 @@ $groupCss = $block->getGroupCss();
                 </div>
                 <div class="section-item-content <?= $block->escapeHtmlAttr($groupCss) ?>-item-content"
                      id="<?= $block->escapeHtmlAttr($alias) ?>"
-                     data-role="content">
+                     role="tab">
                     <?= /* @noEscape */ $html ?>
                 </div>
             <?php endforeach;?>