test(header): check role on md

Author: thetaPC

core/src/components/header/header.tsx

@@ -209,9 +209,10 @@ export class Header implements ComponentInterface {
     const { translucent, inheritedAttributes } = this;
     const mode = getIonMode(this);
     const collapse = this.collapse || 'none';
+    const isCondensed = collapse === 'condense';
 
     // banner role must be at top level, so remove role if inside a menu
-    const roleType = getRoleType(hostContext('ion-menu', this.el));
+    const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, mode);
 
     return (
       <Host

core/src/components/header/header.utils.ts

@@ -262,8 +262,23 @@ export const handleHeaderFade = (scrollEl: HTMLElement, baseEl: HTMLElement, con
  * Get the role type for the ion-header.
  *
  * @param isInsideMenu If ion-header is inside ion-menu.
- * @returns 'none' if inside ion-menu, otherwise 'banner'.
+ * @param isCondensed If ion-header has collapse="condense".
+ * @param mode The current mode.
+ * @returns 'none' if inside ion-menu or if condensed in md
+ * mode, otherwise 'banner'.
  */
-export const getRoleType = (isInsideMenu: boolean) => {
-  return isInsideMenu ? ROLE_NONE : ROLE_BANNER;
+export const getRoleType = (isInsideMenu: boolean, isCondensed: boolean, mode: 'ios' | 'md') => {
+  // If the header is inside a menu, it should not have the banner role.
+  if (isInsideMenu) {
+    return ROLE_NONE;
+  }
+  /**
+   * Only apply role="none" to `md` mode condensed headers
+   * since the large header is never shown.
+   */
+  if (isCondensed && mode === 'md') {
+    return ROLE_NONE;
+  }
+  // Default to banner role.
+  return ROLE_BANNER;
 };

core/src/components/header/test/condense/header.e2e.ts

@@ -60,3 +60,25 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
     });
   });
 });
+
+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');
+      const content = page.locator('ion-content');
+
+      await expect(smallTitleHeader).toHaveAttribute('role', 'banner');
+      await expect(largeTitleHeader).toHaveAttribute('role', 'none');
+
+      await content.evaluate(async (el: HTMLIonContentElement) => {
+        await el.scrollToBottom();
+      });
+      await page.waitForChanges();
+
+      await expect(smallTitleHeader).toHaveAttribute('role', 'banner');
+      await expect(largeTitleHeader).toHaveAttribute('role', 'none');
+    });
+  });
+});