fix(ui-shell header): improve header accessibility (#711)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Oct 18, 2021 · 00d912c · 00d912c
1 parent d3a66b8
commit 00d912c
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 27 deletions.
diff --git a/src/components/ui-shell/header-menu.ts b/src/components/ui-shell/header-menu.ts
@@ -118,7 +118,6 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
     const { expanded, triggerContent, menuLabel, _handleClick: handleClick, _handleKeydownTrigger: handleKeydownTrigger } = this;
     return html`
       <a
-        role="menuitem"
         part="trigger"
         tabindex="0"
         class="${prefix}--header__menu-item ${prefix}--header__menu-title"
@@ -130,7 +129,7 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
       >
         ${triggerContent}${ChevronDownGlyph({ part: 'trigger-icon', class: `${prefix}--header__menu-arrow` })}
       </a>
-      <ul role="menu" part="menu-body" class="${prefix}--header__menu" aria-label="${ifDefined(menuLabel)}">
+      <ul part="menu-body" class="${prefix}--header__menu" aria-label="${ifDefined(menuLabel)}">
         <slot></slot>
       </ul>
     `;

diff --git a/src/components/ui-shell/header-nav-item.ts b/src/components/ui-shell/header-nav-item.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2020
+ * Copyright IBM Corp. 2019, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -35,6 +35,12 @@ class BXHeaderNavItem extends FocusMixin(LitElement) {
   @property()
   title!: string;
 
+  /**
+   * As child of <ul>, this element must have role of listitem
+   */
+  @property({ reflect: true })
+  role: string = 'listitem';
+
   createRenderRoot() {
     return this.attachShadow({
       mode: 'open',
@@ -45,7 +51,7 @@ class BXHeaderNavItem extends FocusMixin(LitElement) {
   render() {
     const { href, title } = this;
     return html`
-      <a part="link" role="menuitem" class="${prefix}--header__menu-item" tabindex="0" href="${ifDefined(href)}">
+      <a part="link" class="${prefix}--header__menu-item" tabindex="0" href="${ifDefined(href)}">
         <span part="title" class="${prefix}--text-truncate--end"><slot>${title}</slot></span>
       </a>
     `;

diff --git a/src/components/ui-shell/header-nav.ts b/src/components/ui-shell/header-nav.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2020
+ * Copyright IBM Corp. 2019, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -38,7 +38,7 @@ class BXHeaderNav extends LitElement {
     const { menuBarLabel } = this;
     return html`
       <div part="divider" class="${prefix}-ce--header__divider"></div>
-      <ul role="menubar" part="menu-body" class="${prefix}--header__menu-bar" aria-label="${menuBarLabel}">
+      <ul part="menu-body" class="${prefix}--header__menu-bar" aria-label="${menuBarLabel}">
         <slot></slot>
       </ul>
     `;

diff --git a/src/components/ui-shell/header.scss b/src/components/ui-shell/header.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2020
+// Copyright IBM Corp. 2019, 2021
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -40,7 +40,7 @@ $css--plex: true !default;
 :host(#{$prefix}-header-menu-item) {
   outline: none;
 
-  a.#{$prefix}--header__menu-item[role='menuitem'] {
+  a.#{$prefix}--header__menu-item {
     height: mini-units(6);
 
     &:hover {

diff --git a/src/components/ui-shell/side-nav-menu-item.ts b/src/components/ui-shell/side-nav-menu-item.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2020
+ * Copyright IBM Corp. 2019, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -67,7 +67,7 @@ class BXSideNavMenuItem extends FocusMixin(LitElement) {
       [`${prefix}--side-nav__link--current`]: active,
     });
     return html`
-      <a role="menuitem" part="link" class="${classes}" href="${href}">
+      <a part="link" class="${classes}" href="${href}">
         <span part="title" class="${prefix}--side-nav__link-text">
           <slot>${title}</slot>
         </span>

diff --git a/src/components/ui-shell/side-nav-menu.ts b/src/components/ui-shell/side-nav-menu.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2020
+ * Copyright IBM Corp. 2019, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -169,7 +169,7 @@ class BXSideNavMenu extends FocusMixin(LitElement) {
           ${ChevronDown20({ part: 'expando-icon' })}
         </div>
       </button>
-      <ul part="menu-body" class="${prefix}--side-nav__menu" role="menu">
+      <ul part="menu-body" class="${prefix}--side-nav__menu">
         <slot @slotchange=${handleSlotChange}></slot>
       </ul>
     `;

diff --git a/src/components/ui-shell/side-nav.scss b/src/components/ui-shell/side-nav.scss
@@ -127,15 +127,15 @@ $css--plex: true !default;
   width: auto;
   height: auto;
 
-  a.#{$prefix}--side-nav__link[role='menuitem'] {
+  a.#{$prefix}--side-nav__link {
     height: mini-units(4);
     min-height: mini-units(4);
     padding-left: mini-units(4);
     font-weight: 400;
   }
 }
 
-:host(#{$prefix}-side-nav-menu-item[parent-has-icon]) a.#{$prefix}--side-nav__link[role='menuitem'] {
+:host(#{$prefix}-side-nav-menu-item[parent-has-icon]) a.#{$prefix}--side-nav__link {
   padding-left: mini-units(9);
 }
 

diff --git a/tests/snapshots/ui-shell.md b/tests/snapshots/ui-shell.md
@@ -55,14 +55,12 @@
   class="bx--header__menu-item bx--header__menu-title"
   href="javascript:void 0"
   part="trigger"
-  role="menuitem"
   tabindex="0"
 >
 </a>
 <ul
   class="bx--header__menu"
   part="menu-body"
-  role="menu"
 >
   <slot>
   </slot>
@@ -79,7 +77,6 @@
   class="bx--header__menu-item bx--header__menu-title"
   href="javascript:void 0"
   part="trigger"
-  role="menuitem"
   tabindex="0"
 >
   trigger-content-foo
@@ -88,7 +85,6 @@
   aria-label="menu-label-foo"
   class="bx--header__menu"
   part="menu-body"
-  role="menu"
 >
   <slot>
   </slot>
@@ -149,7 +145,6 @@
   aria-label="undefined"
   class="bx--header__menu-bar"
   part="menu-body"
-  role="menubar"
 >
   <slot>
   </slot>
@@ -169,7 +164,6 @@
   aria-label="menu-bar-label-foo"
   class="bx--header__menu-bar"
   part="menu-body"
-  role="menubar"
 >
   <slot>
   </slot>
@@ -187,7 +181,6 @@
 <a
   class="bx--header__menu-item"
   part="link"
-  role="menuitem"
   tabindex="0"
 >
   <span
@@ -208,7 +201,6 @@
   class="bx--header__menu-item"
   href="about:blank"
   part="link"
-  role="menuitem"
   tabindex="0"
 >
   <span
@@ -318,7 +310,6 @@
 <ul
   class="bx--side-nav__menu"
   part="menu-body"
-  role="menu"
 >
   <slot>
   </slot>
@@ -360,7 +351,6 @@
 <ul
   class="bx--side-nav__menu"
   part="menu-body"
-  role="menu"
 >
   <slot>
   </slot>
@@ -401,7 +391,6 @@
 <ul
   class="bx--side-nav__menu"
   part="menu-body"
-  role="menu"
 >
   <slot>
   </slot>
@@ -420,7 +409,6 @@
   class="bx--side-nav__link"
   href=""
   part="link"
-  role="menuitem"
 >
   <span
     class="bx--side-nav__link-text"
@@ -440,7 +428,6 @@
   class="bx--side-nav__link bx--side-nav__link--current"
   href="about:blank"
   part="link"
-  role="menuitem"
 >
   <span
     class="bx--side-nav__link-text"