Repository: ionic-team/ionic-framework
File: core/src/components/header/test/condense/header.e2e.ts (TypeScript)

Code before:

      await expect(largeTitleHeader).toHaveScreenshot(screenshot(`header-condense-large-title-initial-diff`));

      await content.evaluate(async (el: HTMLIonContentElement) => {
        await el.scrollToBottom();
      });
      await page.locator('#largeTitleHeader.header-collapse-condense-inactive').waitFor();

      await expect(smallTitleHeader).toHaveScreenshot(screenshot(`header-condense-large-title-collapsed-diff`));

      /**
       * Playwright can't do .not.toHaveAttribute() because a value is expected,
       * and toHaveAttribute can't accept a value of type null.
       */
      const ariaHidden = await smallTitle.getAttribute('aria-hidden');
      expect(ariaHidden).toBeNull();

      await content.evaluate(async (el: HTMLIonContentElement) => {
        await el.scrollToTop();
      });
      await page.locator('#smallTitleHeader.header-collapse-condense-inactive').waitFor();

      await expect(smallTitle).toHaveAttribute('aria-hidden', 'true');
    });

    test('should only have the banner role on the active header', async ({ page }) => {
      await page.goto('/src/components/header/test/condense', config);
      const largeTitleHeader = page.locator('#largeTitleHeader');
      const smallTitleHeader = page.locator('#smallTitleHeader');
      const content = page.locator('ion-content');

      await expect(largeTitleHeader).toHaveAttribute('role', 'banner');
      await expect(smallTitleHeader).toHaveAttribute('role', 'none');

      await content.evaluate(async (el: HTMLIonContentElement) => {
        await el.scrollToBottom();
      });
      await page.locator('#largeTitleHeader.header-collapse-condense-inactive').waitFor();

      await expect(largeTitleHeader).toHaveAttribute('role', 'none');
      await expect(smallTitleHeader).toHaveAttribute('role', 'banner');
    });
  });
});


Review comment (bug):
This works great for `ios` but `md` still has two `banner` roles:

<img width="1258" height="730" alt="Image" src="https://github.com/user-attachments/assets/0a0361ce-0f94-4d49-85fd-e4388d85ed7a" />

It shouldn't be announced since the 2nd header is `display` none but it might still fail an audit. 

Code after:

      await expect(largeTitleHeader).toHaveScreenshot(screenshot(`header-condense-large-title-initial-diff`));

      await content.evaluate(async (el: HTMLIonContentElement) => {
        await el.scrollToBottom();
      });
      await page.locator('#largeTitleHeader.header-collapse-condense-inactive').waitFor();

      await expect(smallTitleHeader).toHaveScreenshot(screenshot(`header-condense-large-title-collapsed-diff`));

      /**
       * Playwright can't do .not.toHaveAttribute() because a value is expected,
       * and toHaveAttribute can't accept a value of type null.
       */
      const ariaHidden = await smallTitle.getAttribute('aria-hidden');
      expect(ariaHidden).toBeNull();

      await content.evaluate(async (el: HTMLIonContentElement) => {
        await el.scrollToTop();
      });
      await page.locator('#smallTitleHeader.header-collapse-condense-inactive').waitFor();

      await expect(smallTitle).toHaveAttribute('aria-hidden', 'true');
    });

    test('should only have the banner role on the active header', async ({ page }) => {
      await page.goto('/src/components/header/test/condense', config);
      const largeTitleHeader = page.locator('#largeTitleHeader');
      const smallTitleHeader = page.locator('#smallTitleHeader');
      const content = page.locator('ion-content');

      await expect(largeTitleHeader).toHaveAttribute('role', 'banner');
      await expect(smallTitleHeader).toHaveAttribute('role', 'none');

      await content.evaluate(async (el: HTMLIonContentElement) => {
        await el.scrollToBottom();
      });
      await page.locator('#largeTitleHeader.header-collapse-condense-inactive').waitFor();

      await expect(largeTitleHeader).toHaveAttribute('role', 'none');
      await expect(smallTitleHeader).toHaveAttribute('role', 'banner');
    });
  });
});

configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
  test.describe(title('header: condense'), () => {
    test('should only have the banner role on the small header', async ({ page }) => {
      await page.goto('/src/components/header/test/condense', config);
      const largeTitleHeader = page.locator('#largeTitleHeader');
      const smallTitleHeader = page.locator('#smallTitleHeader');