From 0de2511589d69dab8742709162bacc7614a74d19 Mon Sep 17 00:00:00 2001
From: Anna Wen <54281166+annawen1@users.noreply.github.com>
Date: Fri, 12 Feb 2021 10:56:02 -0500
Subject: [PATCH] fix(megamenu): remove menu role for accessibility (#5160)

### Related Ticket(s)

Web component: Mega Menu - "The essentials, Hybrid Cloud" are read as menu options for screen reader users. #5081

### Description

This PR removes the `role='menu'` from the `ul` as it is unnecessary and conflicts with the elements placed in the megamenu/dropdown.

PR here from carbon-for-ibm-dotcom where we removed the menu role from our own version of the header menu
https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/4624

The dropdown menu/megamenu shouldn't have the role="menu" applied as listed here:
Example Disclosure for Navigation Menus | WAI-ARIA Authoring Practices 1.1
https://www.w3.org/TR/wai-aria-practices/examples/disclosure/disclosure-navigation.html

<img width="950" alt="Screen Shot 2020-12-03 at 4 25 20 PM" src="https://user-images.githubusercontent.com/54281166/101090282-661c0680-3584-11eb-8dd0-b43ca6f9aa7e.png">

### Changelog

**Changed**

- grab the `bx--header-menu` element and remove the `role` attribute


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../src/components/masthead/megamenu-top-nav-menu.ts     | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/web-components/src/components/masthead/megamenu-top-nav-menu.ts b/packages/web-components/src/components/masthead/megamenu-top-nav-menu.ts
index e11b3c20a9d..402b401200f 100644
--- a/packages/web-components/src/components/masthead/megamenu-top-nav-menu.ts
+++ b/packages/web-components/src/components/masthead/megamenu-top-nav-menu.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { customElement } from 'lit-element';
+import { customElement, query } from 'lit-element';
 import settings from 'carbon-components/es/globals/js/settings';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import { forEach } from '../../globals/internal/collection-helpers';
@@ -25,6 +25,12 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  */
 @customElement(`${ddsPrefix}-megamenu-top-nav-menu`)
 class DDSMegaMenuTopNavMenu extends DDSTopNavMenu {
+  /**
+   * The menu ul node.
+   */
+  @query(`.${prefix}--header__menu`)
+  private _menuNode!: HTMLElement;
+
   /**
    * The observer for the resize of the viewport.
    */
@@ -71,6 +77,7 @@ class DDSMegaMenuTopNavMenu extends DDSTopNavMenu {
   }
 
   firstUpdated() {
+    this._menuNode.removeAttribute('role');
     this._cleanAndCreateObserverResize({ create: true });
   }