javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(header): hide from screen readers when collapsed (#25744)

Browse Source
This commit is contained in:
Amanda Johnston
2022-08-11 09:04:48 -05:00
committed by GitHub
parent 2ddaf7a5a2
commit d0ba963599
4 changed files with 129 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/header/header.utils.ts
View File

@@ -164,10 +164,14 @@ export const handleToolbarIntersection = (
};
export const setHeaderActive = (headerIndex: HeaderIndex, active = true) => {
const headerEl = headerIndex.el;
if (active) {
headerIndex.el.classList.remove('header-collapse-condense-inactive');
headerEl.classList.remove('header-collapse-condense-inactive');
headerEl.removeAttribute('aria-hidden');
} else {
headerIndex.el.classList.add('header-collapse-condense-inactive');
headerEl.classList.add('header-collapse-condense-inactive');
headerEl.setAttribute('aria-hidden', 'true');
}
};

30
core/src/components/header/test/condense/header.e2e.ts Normal file
View File

@@ -0,0 +1,30 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('header: condense', () => {
test('should be hidden from screen readers when collapsed', async ({ page }, testInfo) => {
test.skip(testInfo.project.metadata.mode === 'md', 'Logic only applies to iOS mode');
test.skip(testInfo.project.metadata.rtl === true, 'No RTL-specific logic');
await page.goto('/src/components/header/test/condense');
const header = page.locator('#collapsibleHeader');
const content = page.locator('ion-content');
await expect(header).toHaveAttribute('aria-hidden', 'true');
await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom());
await page.waitForChanges();
/**
* Playwright can't do .not.toHaveAttribute() because a value is expected,
* and toHaveAttribute can't accept a value of type null.
*/
const ariaHidden = await header.getAttribute('aria-hidden');
expect(ariaHidden).toBeNull();
await content.evaluate((el: HTMLIonContentElement) => el.scrollToTop());
await page.waitForChanges();
await expect(header).toHaveAttribute('aria-hidden', 'true');
});
});

93
core/src/components/header/test/condense/index.html Normal file
View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Header - Condense</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
.red {
background-color: #ea445a;
}
.green {
background-color: #76d672;
}
.blue {
background-color: #3478f6;
}
.yellow {
background-color: #ffff80;
}
.pink {
background-color: #ff6b86;
}
.purple {
background-color: #7e34f6;
}
.black {
background-color: #000;
}
.orange {
background-color: #f69234;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.grid-item {
height: 200px;
}
</style>
</head>
<body>
<ion-app>
<div class="ion-page">
<ion-header translucent="true" id="collapsibleHeader">
<ion-toolbar>
<ion-title>Mailboxes</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Mailboxes</ion-title>
</ion-toolbar>
</ion-header>
<div class="grid ion-padding">
<div class="grid-item red"></div>
<div class="grid-item green"></div>
<div class="grid-item blue"></div>
<div class="grid-item yellow"></div>
<div class="grid-item pink"></div>
<div class="grid-item purple"></div>
<div class="grid-item black"></div>
<div class="grid-item orange"></div>
</div>
</ion-content>
<ion-footer translucent="true">
<ion-toolbar>
<ion-title>Updated Just Now</ion-title>
</ion-toolbar>
</ion-footer>
</div>
</ion-app>
</body>
</html>

5
core/src/components/header/test/fade/index.html
View File

@@ -66,11 +66,6 @@
</ion-toolbar>
</ion-header>
<ion-content fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Mailboxes</ion-title>
</ion-toolbar>
</ion-header>
<div class="grid ion-padding">
<div class="grid-item red"></div>
<div class="grid-item green"></div>