Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Aug 11, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
826cd05
fix(header): hiden from screen readers when collapsed
Aug 9, 2022
91430e3
chore(header): cleanup
Aug 9, 2022
c5a29d6
test(header): also skip RTL
Aug 9, 2022
30bee3a
test(header): separate condense and fade behaviors
Aug 9, 2022
e60406e
Merge branch 'main' into FW-1890
liamdebeasi Aug 10, 2022
b789a55
Merge branch 'main' into FW-1890
liamdebeasi Aug 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions core/src/components/header/header.utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
};

Expand Down
30 changes: 30 additions & 0 deletions core/src/components/header/test/condense/header.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 93 additions & 0 deletions core/src/components/header/test/condense/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 0 additions & 5 deletions core/src/components/header/test/fade/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down