feat(ui5-dynamic-side-content): add 'role' property to accessibilityAttributes object

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(
+			<DynamicSideContent>
+				<div>
+					<h1>Main Content</h1>
+				</div>
+				<div slot="sideContent">
+					<h1>Side Content</h1>
+				</div>
+			</DynamicSideContent>
+		);
+
+		cy.get("[ui5-dynamic-side-content]")
+			.as("dsc");
+
+		cy.get<DynamicSideContent>("@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(
+			<DynamicSideContent>
+				<div>
+					<h1>Main Content</h1>
+				</div>
+				<div slot="sideContent">
+					<h1>Side Content</h1>
+				</div>
+			</DynamicSideContent>
+		);
+
+		cy.get("[ui5-dynamic-side-content]")
+			.as("dsc");
+
+		cy.get<DynamicSideContent>("@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", () => {

packages/fiori/src/DynamicSideContent.ts

@@ -38,7 +38,7 @@ type DynamicSideContentLayoutChangeEventDetail = {
 	sideContentVisible: boolean,
 }
 
-type DynamicSideContentAriaAccessibilityAttributes = Pick<AccessibilityAttributes, "ariaLabel">;
+type DynamicSideContentAriaAccessibilityAttributes = Pick<AccessibilityAttributes, "ariaLabel" | "role">;
 type DynamicSideContentAccessibilityAttributes = {
 	mainContent?: DynamicSideContentAriaAccessibilityAttributes,
 	sideContent?: DynamicSideContentAriaAccessibilityAttributes,
@@ -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**:
+	*   - **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**:
+	*   - **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
@@ -370,12 +375,19 @@ class DynamicSideContent extends UI5Element {
 	}
 
 	get accInfo(): DynamicSideContentAccessibilityAttributes {
+		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),
+				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),
+				ariaLabel: sideContentAttr.ariaLabel || DynamicSideContent.i18nBundle.getText(DSC_SIDE_ARIA_LABEL),
+				role: hasSideRole ? sideContentAttr.role : "complementary",
 			},
 		};
 	}

packages/fiori/src/DynamicSideContentTemplate.tsx

@@ -24,7 +24,7 @@ export default function DynamicSideContentTemplate(this: DynamicSideContent) {
 function mainContent(this: DynamicSideContent) {
 	return (
 		<div
-			role="main"
+			role={this.accInfo.mainContent?.role}
 			aria-label={this.accInfo.mainContent?.ariaLabel}
 			class={this.classes.main}
 			style={this.styles.main}
@@ -37,7 +37,7 @@ function mainContent(this: DynamicSideContent) {
 function sideContent(this: DynamicSideContent) {
 	return (
 		<aside
-			role="complementary"
+			role={this.accInfo.sideContent?.role}
 			aria-label={this.accInfo.sideContent?.ariaLabel}
 			class={this.classes.side}
 			style={this.styles.side}

packages/fiori/test/pages/DynamicSideContent.html

@@ -134,9 +134,11 @@ <h1>Side Content</h1>
 		dynamicSideContent.accessibilityAttributes = {
 			mainContent: {
 				ariaLabel: "Main Content Area",
+				role: "region",
 			},
 			sideContent: {
 				ariaLabel: "Side Content Area",
+				role: "note",
 			}
 		};
 	</script>