From 8888e2bafd76b59f32b932b5d4a6a961b52894d9 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 8 Sep 2021 10:48:18 -0400 Subject: [PATCH] fix(header): role attribute can now be customized (#23888) resolves #21327 --- core/src/components/header/header.tsx | 11 +++++++++- core/src/components/header/test/a11y/e2e.ts | 11 ++++++++++ .../components/header/test/a11y/index.html | 21 +++++++++++++++++++ 3 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 core/src/components/header/test/a11y/e2e.ts create mode 100644 core/src/components/header/test/a11y/index.html diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx index 93f0e0c512..825c690ad3 100644 --- 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 ( { mode === 'ios' && translucent &&
diff --git a/core/src/components/header/test/a11y/e2e.ts b/core/src/components/header/test/a11y/e2e.ts new file mode 100644 index 0000000000..a5b5316bff --- /dev/null +++ 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 new file mode 100644 index 0000000000..d2bd7117c4 --- /dev/null +++ b/core/src/components/header/test/a11y/index.html @@ -0,0 +1,21 @@ + + + + + Header - a11y + + + + + + + + + +
+

Headers

+ +
+ +