javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
resolves #21327
This commit is contained in:
Liam DeBeasi
2021-09-08 10:48:18 -04:00
committed by GitHub
parent e512fc1ecd
commit 8888e2bafd
3 changed files with 42 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
core/src/components/header/header.tsx
View File

@ -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>

11
core/src/components/header/test/a11y/e2e.ts Normal file
View File

@ -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);
});

21
core/src/components/header/test/a11y/index.html Normal file
View File

@ -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>