Side Content dynamicSideContent.accessibilityAttributes = { mainContent: { ariaLabel: "Main Content Area", + role: "region", }, sideContent: { ariaLabel: "Side Content Area", + role: "region", } }; From c51227d31b7e6f9a7a4526d36b62b91ab5863334 Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Thu, 7 May 2026 16:46:10 +0300 Subject: [PATCH 2/5] feat(ui5-dymnamic-side-content): add option to remove roles --- packages/fiori/src/DynamicSideContent.ts | 7 +++++-- packages/fiori/test/pages/DynamicSideContent.html | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/fiori/src/DynamicSideContent.ts b/packages/fiori/src/DynamicSideContent.ts index e550c66f8079..7dfb501b3771 100644 --- a/packages/fiori/src/DynamicSideContent.ts +++ b/packages/fiori/src/DynamicSideContent.ts @@ -370,14 +370,17 @@ class DynamicSideContent extends UI5Element { } get accInfo(): DynamicSideContentAccessibilityAttributes { + const hasMainRole = Object.prototype.hasOwnProperty.call(this.accessibilityAttributes.mainContent || {}, "role"); + const hasSideRole = Object.prototype.hasOwnProperty.call(this.accessibilityAttributes.sideContent || {}, "role"); + return { mainContent: { ariaLabel: this.accessibilityAttributes.mainContent?.ariaLabel || DynamicSideContent.i18nBundle.getText(DSC_MAIN_ARIA_LABEL), - role: this.accessibilityAttributes.mainContent?.role || "main", + role: hasMainRole ? this.accessibilityAttributes.mainContent?.role : "main", }, sideContent: { ariaLabel: this.accessibilityAttributes.sideContent?.ariaLabel || DynamicSideContent.i18nBundle.getText(DSC_SIDE_ARIA_LABEL), - role: this.accessibilityAttributes.sideContent?.role || "complementary", + role: hasSideRole ? this.accessibilityAttributes.sideContent?.role : "complementary", }, }; } diff --git a/packages/fiori/test/pages/DynamicSideContent.html b/packages/fiori/test/pages/DynamicSideContent.html index 55f15dbdf28f..ac4d363aaa61 100644 --- a/packages/fiori/test/pages/DynamicSideContent.html +++ b/packages/fiori/test/pages/DynamicSideContent.html @@ -138,7 +138,7 @@

Side Content

}, sideContent: { ariaLabel: "Side Content Area", - role: "region", + role: "note", } }; From 949d1a8f39dfe7ab51dfbd0bbe4a9e9f0e8925e7 Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Mon, 18 May 2026 13:25:41 +0300 Subject: [PATCH 3/5] feat(ui5-dynamic-side-content): add tests --- .../cypress/specs/DynamicSideContent.cy.tsx | 71 +++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/packages/fiori/cypress/specs/DynamicSideContent.cy.tsx b/packages/fiori/cypress/specs/DynamicSideContent.cy.tsx index a4b003dac196..7130cc2ebf75 100644 --- a/packages/fiori/cypress/specs/DynamicSideContent.cy.tsx +++ b/packages/fiori/cypress/specs/DynamicSideContent.cy.tsx @@ -80,6 +80,77 @@ describe("Accessibility", () => { .find(".ui5-dsc-side") .should("have.attr", "aria-label", customSideContentLabel); }); + + it("tests no role when explicitly set to undefined via accessibilityAttributes", () => { + cy.mount( + +
+

Main Content

+
+
+

Side Content

+
+ + ); + + cy.get("[ui5-dynamic-side-content]") + .as("dsc"); + + cy.get("@dsc") + .then($dsc => { + $dsc.get(0).accessibilityAttributes = { + mainContent: { role: undefined }, + sideContent: { role: undefined }, + }; + }); + + cy.get("@dsc") + .shadow() + .find(".ui5-dsc-main") + .should("not.have.attr", "role"); + + cy.get("@dsc") + .shadow() + .find(".ui5-dsc-side") + .should("not.have.attr", "role"); + }); + + it("tests custom roles via accessibilityAttributes", () => { + const customMainRole = "region"; + const customSideRole = "note"; + + cy.mount( + +
+

Main Content

+
+
+

Side Content

+
+ + ); + + cy.get("[ui5-dynamic-side-content]") + .as("dsc"); + + cy.get("@dsc") + .then($dsc => { + $dsc.get(0).accessibilityAttributes = { + mainContent: { role: customMainRole }, + sideContent: { role: customSideRole }, + }; + }); + + cy.get("@dsc") + .shadow() + .find(".ui5-dsc-main") + .should("have.attr", "role", customMainRole); + + cy.get("@dsc") + .shadow() + .find(".ui5-dsc-side") + .should("have.attr", "role", customSideRole); + }); }); describe("'sideContentPosition' property", () => { From ad343ed85d2bbfd7ec6fe8408e807ae069a00c99 Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Mon, 18 May 2026 14:08:29 +0300 Subject: [PATCH 4/5] feat(ui5-dynamic-side-content): update accessibilityAttributes documentation --- packages/fiori/src/DynamicSideContent.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/fiori/src/DynamicSideContent.ts b/packages/fiori/src/DynamicSideContent.ts index 7dfb501b3771..e579a83319fe 100644 --- a/packages/fiori/src/DynamicSideContent.ts +++ b/packages/fiori/src/DynamicSideContent.ts @@ -201,8 +201,13 @@ class DynamicSideContent extends UI5Element { * * The accessibilityAttributes object has the following fields: * - * - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string. - * - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string. + * - **mainContent**: + * `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string. + * `mainContent.role` defines the role of the main content area. When not set, defaults to `"main"`. Set to `undefined` to remove the role attribute. + * + * - **sideContent**: + * `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string. + * `sideContent.role` defines the role of the side content area. When not set, defaults to `"complementary"`. Set to `undefined` to remove the role attribute. * * @default {} * @public From 5bc1af370520b2a1b2dd42efb752b0431a2c4fd1 Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Mon, 18 May 2026 16:19:00 +0300 Subject: [PATCH 5/5] feat(ui5-dynamic-side-content): fix comments --- packages/fiori/src/DynamicSideContent.ts | 26 +++++++++++++----------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/fiori/src/DynamicSideContent.ts b/packages/fiori/src/DynamicSideContent.ts index e579a83319fe..806fa2543a24 100644 --- a/packages/fiori/src/DynamicSideContent.ts +++ b/packages/fiori/src/DynamicSideContent.ts @@ -201,13 +201,13 @@ class DynamicSideContent extends UI5Element { * * The accessibilityAttributes object has the following fields: * - * - **mainContent**: - * `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string. - * `mainContent.role` defines the role of the main content area. When not set, defaults to `"main"`. Set to `undefined` to remove the role attribute. + * - **mainContent**: + * - **ariaLabel**: defines the aria-label of the main content area. Accepts any string. + * - **role**: defines the role of the main content area. When not set, defaults to `"main"`. Set to `undefined` to remove the role attribute. * - * - **sideContent**: - * `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string. - * `sideContent.role` defines the role of the side content area. When not set, defaults to `"complementary"`. Set to `undefined` to remove the role attribute. + * - **sideContent**: + * - **ariaLabel**: defines the aria-label of the side content area. Accepts any string. + * - **role**: defines the role of the side content area. When not set, defaults to `"complementary"`. Set to `undefined` to remove the role attribute. * * @default {} * @public @@ -375,17 +375,19 @@ class DynamicSideContent extends UI5Element { } get accInfo(): DynamicSideContentAccessibilityAttributes { - const hasMainRole = Object.prototype.hasOwnProperty.call(this.accessibilityAttributes.mainContent || {}, "role"); - const hasSideRole = Object.prototype.hasOwnProperty.call(this.accessibilityAttributes.sideContent || {}, "role"); + const mainContentAttr = this.accessibilityAttributes.mainContent || {}; + const sideContentAttr = this.accessibilityAttributes.sideContent || {}; + const hasMainRole = "role" in mainContentAttr; + const hasSideRole = "role" in sideContentAttr; return { mainContent: { - ariaLabel: this.accessibilityAttributes.mainContent?.ariaLabel || DynamicSideContent.i18nBundle.getText(DSC_MAIN_ARIA_LABEL), - role: hasMainRole ? this.accessibilityAttributes.mainContent?.role : "main", + ariaLabel: mainContentAttr.ariaLabel || DynamicSideContent.i18nBundle.getText(DSC_MAIN_ARIA_LABEL), + role: hasMainRole ? mainContentAttr.role : "main", }, sideContent: { - ariaLabel: this.accessibilityAttributes.sideContent?.ariaLabel || DynamicSideContent.i18nBundle.getText(DSC_SIDE_ARIA_LABEL), - role: hasSideRole ? this.accessibilityAttributes.sideContent?.role : "complementary", + ariaLabel: sideContentAttr.ariaLabel || DynamicSideContent.i18nBundle.getText(DSC_SIDE_ARIA_LABEL), + role: hasSideRole ? sideContentAttr.role : "complementary", }, }; }