From af87dacf86a5c7c6c2144c4941018387157d9e26 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 7 Sep 2021 20:42:45 +0000 Subject: [PATCH 1/2] fix(header): role can now be customized --- 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, 41 insertions(+), 2 deletions(-) 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 93f0e0c512b..390a6e45b9d 100644 --- a/core/src/components/header/header.tsx +++ b/core/src/components/header/header.tsx @@ -20,6 +20,7 @@ export class Header implements ComponentInterface { private contentScrollCallback?: any; private intersectionObserver?: any; private collapsibleMainHeader?: HTMLElement; + private role?: string; @Element() el!: HTMLElement; @@ -41,6 +42,12 @@ export class Header implements ComponentInterface { */ @Prop() translucent = false; + componentWillLoad() { + const { el } = this; + + this.role = el.hasAttribute('role') ? el.getAttribute('role')! : 'banner'; + } + async componentDidLoad() { await this.checkCollapsibleHeader(); } @@ -143,12 +150,12 @@ export class Header implements ComponentInterface { } render() { - const { translucent } = this; + const { translucent, role } = this; const mode = getIonMode(this); const collapse = this.collapse || 'none'; return ( { + 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 00000000000..d2bd7117c42 --- /dev/null +++ b/core/src/components/header/test/a11y/index.html @@ -0,0 +1,21 @@ + + + + + Header - a11y + + + + + + + + + +
+

Headers

+ +
+ + From 717e49beaeee6082f87139aecad690486e2e1f52 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 8 Sep 2021 09:12:41 -0400 Subject: [PATCH 2/2] fix(header): use inheritedAttributes --- core/src/components/header/header.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx index 390a6e45b9d..825c690ad37 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,7 +22,7 @@ export class Header implements ComponentInterface { private contentScrollCallback?: any; private intersectionObserver?: any; private collapsibleMainHeader?: HTMLElement; - private role?: string; + private inheritedAttributes: { [k: string]: any } = {}; @Element() el!: HTMLElement; @@ -43,9 +45,7 @@ export class Header implements ComponentInterface { @Prop() translucent = false; componentWillLoad() { - const { el } = this; - - this.role = el.hasAttribute('role') ? el.getAttribute('role')! : 'banner'; + this.inheritedAttributes = inheritAttributes(this.el, ['role']); } async componentDidLoad() { @@ -150,12 +150,13 @@ export class Header implements ComponentInterface { } render() { - const { translucent, role } = this; + const { translucent, inheritedAttributes } = this; const mode = getIonMode(this); const collapse = this.collapse || 'none'; + return ( { mode === 'ios' && translucent &&