diff --git a/packages/fiori/cypress/specs/DynamicPage.cy.tsx b/packages/fiori/cypress/specs/DynamicPage.cy.tsx index 7c744d9610ca..871843e8f71c 100644 --- a/packages/fiori/cypress/specs/DynamicPage.cy.tsx +++ b/packages/fiori/cypress/specs/DynamicPage.cy.tsx @@ -882,7 +882,8 @@ describe("ARIA attributes", () => { cy.get("[ui5-dynamic-page-header]") .shadow() .find(".ui5-dynamic-page-header-root") - .should("have.attr", "role", "region"); + .should("have.attr", "role", "region") + .should("have.attr", "aria-label", "Header Expanded"); cy.get("[ui5-dynamic-page-title]") .shadow() @@ -939,6 +940,11 @@ describe("ARIA attributes", () => { .find(".ui5-dynamic-page-title-header-wrapper") .should("have.attr", "aria-label", "Header Snapped"); + cy.get("[ui5-dynamic-page-header]") + .shadow() + .find(".ui5-dynamic-page-header-root") + .should("have.attr", "aria-label", "Header Snapped"); + cy.get("[ui5-dynamic-page-title]") .shadow() .find(".ui5-dynamic-page-title-focus-area") @@ -1013,4 +1019,25 @@ describe("ARIA attributes", () => { .find(".ui5-dynamic-page-header-action-pin") .should("have.attr", "tooltip", "Pin Header"); }); + + it("should use default aria-label based on header state", () => { + cy.mount( + + +
Page Title
+
+ +
Header Content
+
+
+ Page content with enough height to enable scrolling +
+
+ ); + + cy.get("[ui5-dynamic-page-header]") + .shadow() + .find(".ui5-dynamic-page-header-root") + .should("have.attr", "aria-label", "Header Expanded"); + }); }); \ No newline at end of file diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts index 0f2bd9af98f6..587367c267a5 100644 --- a/packages/fiori/src/DynamicPage.ts +++ b/packages/fiori/src/DynamicPage.ts @@ -209,6 +209,9 @@ class DynamicPage extends UI5Element { this.dynamicPageTitle.hasSnappedTitleOnMobile = !!this.hasSnappedTitleOnMobile; this.dynamicPageTitle.removeAttribute("hovered"); } + if (this.dynamicPageHeader) { + this.dynamicPageHeader._snapped = this._headerSnapped; + } const titleHeight = this.dynamicPageTitle?.getBoundingClientRect().height || 0; const headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0; const footerHeight = this.showFooter ? this.footerWrapper?.getBoundingClientRect().height : 0; diff --git a/packages/fiori/src/DynamicPageHeader.ts b/packages/fiori/src/DynamicPageHeader.ts index 2cef4e4ae3be..df79933f366f 100644 --- a/packages/fiori/src/DynamicPageHeader.ts +++ b/packages/fiori/src/DynamicPageHeader.ts @@ -1,7 +1,10 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; +import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; +import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; // Template import DynamicPageHeaderTemplate from "./DynamicPageHeaderTemplate.js"; @@ -9,6 +12,12 @@ import DynamicPageHeaderTemplate from "./DynamicPageHeaderTemplate.js"; // Styles import DynamicPageHeaderCss from "./generated/themes/DynamicPageHeader.css.js"; +// i18n +import { + DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER, + DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER, +} from "./generated/i18n/i18n-defaults.js"; + /** * @class * @@ -32,6 +41,10 @@ import DynamicPageHeaderCss from "./generated/themes/DynamicPageHeader.css.js"; * The responsive behavior of the `DynamicPageHeader` depends on the behavior of the * content that is displayed. * + * ### Accessibility + * + * The `DynamicPageHeader` provides an accessible label for the header region. + * * @constructor * @extends UI5Element * @public @@ -51,6 +64,30 @@ class DynamicPageHeader extends UI5Element { */ @slot({ "default": true, type: HTMLElement }) content!: HTMLElement[]; + + /** + * Defines if the header is snapped. + * + * @default false + * @private + */ + @property({ type: Boolean }) + _snapped = false; + + @i18n("@ui5/webcomponents-fiori") + static i18nBundle: I18nBundle; + + /** + * Returns the aria-label for the header region. + * @internal + */ + get _headerRegionAriaLabel(): string { + const defaultText = this._snapped + ? DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER + : DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER; + + return DynamicPageHeader.i18nBundle.getText(defaultText); + } } DynamicPageHeader.define(); diff --git a/packages/fiori/src/DynamicPageHeaderTemplate.tsx b/packages/fiori/src/DynamicPageHeaderTemplate.tsx index 1e1b787ca3fd..d399abb02aaa 100644 --- a/packages/fiori/src/DynamicPageHeaderTemplate.tsx +++ b/packages/fiori/src/DynamicPageHeaderTemplate.tsx @@ -2,7 +2,7 @@ import type DynamicPageHeader from "./DynamicPageHeader.js"; export default function DynamicPageHeaderTemplate(this: DynamicPageHeader) { return ( -
+
);