fix(header): role attribute can now be customized (#23888)

liamdebeasi · web-flow · commit 8888e2bafd76 · 2021-09-08T10:48:18.000-04:00
resolves #21327
diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx
@@ -1,8 +1,10 @@
 import { Component, ComponentInterface, Element, Host, Prop, h, writeTask } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
+import { inheritAttributes } from '../../utils/helpers';
 
 import { cloneElement, createHeaderIndex, handleContentScroll, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity } from './header.utils';
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
@@ -20,6 +22,7 @@ export class Header implements ComponentInterface {
   private contentScrollCallback?: any;
   private intersectionObserver?: any;
   private collapsibleMainHeader?: HTMLElement;
+  private inheritedAttributes: { [k: string]: any } = {};
 
   @Element() el!: HTMLElement;
 
@@ -41,6 +44,10 @@ export class Header implements ComponentInterface {
    */
   @Prop() translucent = false;
 
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.el, ['role']);
+  }
+
   async componentDidLoad() {
     await this.checkCollapsibleHeader();
   }
@@ -143,9 +150,10 @@ export class Header implements ComponentInterface {
   }
 
   render() {
-    const { translucent } = this;
+    const { translucent, inheritedAttributes } = this;
     const mode = getIonMode(this);
     const collapse = this.collapse || 'none';
+
     return (
       <Host
         role="banner"
@@ -159,6 +167,7 @@ export class Header implements ComponentInterface {
           [`header-collapse-${collapse}`]: true,
           [`header-translucent-${mode}`]: this.translucent,
         }}
+        {...inheritedAttributes}
       >
         { mode === 'ios' && translucent &&
           <div class="header-background"></div>
diff --git a/core/src/components/header/test/a11y/e2e.ts b/core/src/components/header/test/a11y/e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+import { AxePuppeteer } from '@axe-core/puppeteer';
+
+test('header: axe', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/header/test/a11y?ionic:_testing=true'
+  });
+
+  const results = await new AxePuppeteer(page).analyze();
+  expect(results.violations.length).toEqual(0);
+});
diff --git a/core/src/components/header/test/a11y/index.html b/core/src/components/header/test/a11y/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8">
+    <title>Header - a11y</title>
+    <meta name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+    <link href="../../../../../css/core.css" rel="stylesheet">
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-header></ion-header>
+    <main>
+      <h1>Headers</h1>
+      <ion-header role="none"></ion-header>
+    </main>
+  </body>
+</html>
