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

refactor(header): add collapsible role check

Browse Source
This commit is contained in:
Maria Hutt
2025-11-19 15:35:22 -08:00
parent 608ce9a97c
commit f4cff58dde
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/header/header.tsx
View File

@@ -223,7 +223,7 @@ export class Header implements ComponentInterface {
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), isCondensed, mode);
const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, theme);
return (
<Host

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

@@ -263,20 +263,20 @@ export const handleHeaderFade = (scrollEl: HTMLElement, baseEl: HTMLElement, con
*
* @param isInsideMenu If ion-header is inside ion-menu.
* @param isCondensed If ion-header has collapse="condense".
* @param mode The current mode.
* @param theme The current theme.
* @returns 'none' if inside ion-menu or if condensed in md
* mode, otherwise 'banner'.
* theme, otherwise 'banner'.
*/
export const getRoleType = (isInsideMenu: boolean, isCondensed: boolean, mode: 'ios' | 'md') => {
export const getRoleType = (isInsideMenu: boolean, isCondensed: boolean, theme: 'ios' | 'md' | 'ionic') => {
// 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
* Only apply role="none" to `md` & `ionic` theme condensed headers
* since the large header is never shown.
*/
if (isCondensed && mode === 'md') {
if (isCondensed && theme !== 'ios') {
return ROLE_NONE;
}
// Default to banner role.