diff --git a/core/src/components/header/header.utils.ts b/core/src/components/header/header.utils.ts index fd5bf64588..7de7d56e5f 100644 --- a/core/src/components/header/header.utils.ts +++ b/core/src/components/header/header.utils.ts @@ -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'); } }; diff --git a/core/src/components/header/test/condense/header.e2e.ts b/core/src/components/header/test/condense/header.e2e.ts new file mode 100644 index 0000000000..48ea676ce0 --- /dev/null +++ b/core/src/components/header/test/condense/header.e2e.ts @@ -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'); + }); +}); diff --git a/core/src/components/header/test/condense/index.html b/core/src/components/header/test/condense/index.html new file mode 100644 index 0000000000..dfcf35d00f --- /dev/null +++ b/core/src/components/header/test/condense/index.html @@ -0,0 +1,93 @@ + + + + + Header - Condense + + + + + + + + + + + +
+ + + Mailboxes + + + + + + Mailboxes + + +
+
+
+
+
+
+
+
+
+
+ + + + Updated Just Now + + +
+ + + diff --git a/core/src/components/header/test/fade/index.html b/core/src/components/header/test/fade/index.html index b93a9da4ed..5a84e0b6e9 100644 --- a/core/src/components/header/test/fade/index.html +++ b/core/src/components/header/test/fade/index.html @@ -66,11 +66,6 @@ - - - Mailboxes - -