feat(ui5-dynamic-side-content): add customizable aria labels

packages/fiori/cypress/specs/DynamicSideContent.cy.ts

@@ -0,0 +1,79 @@
+import { html } from "lit";
+import "../../src/DynamicSideContent.js";
+import type DynamicSideContent from "../../src/DynamicSideContent.js";
+
+describe("Accessibility", () => {
+	it("tests main and side content roles", () => {
+		cy.mount(html`
+			<ui5-dynamic-side-content>
+				<div>
+					<h1>Main Content</h1>
+				</div>
+				<div slot="sideContent">
+					<h1>Side Content</h1>
+				</div>
+			</ui5-dynamic-side-content>
+		`);
+
+		cy.get("[ui5-dynamic-side-content]")
+			.as("dsc");
+
+		cy.get("@dsc")
+			.shadow()
+			.find(".ui5-dsc-main")
+			.should("have.attr", "role", "main");
+
+		   cy.get("@dsc")
+			.shadow()
+			.find(".ui5-dsc-side")
+			.should("have.attr", "role", "complementary");
+	});
+
+	it("tests main and side content aria-label values", () => {
+		const customMainContentLabel = "Custom Main Content Label";
+		const customSideContentLabel = "Custom Side Content Label";
+
+		cy.mount(html`
+			<ui5-dynamic-side-content>
+				<div>
+					<h1>Main Content</h1>
+					<ui5-button>Set Custom ARIA Labels</ui5-button>
+				</div>
+				<div slot="sideContent">
+					<h1>Side Content</h1>
+				</div>
+			</ui5-dynamic-side-content>
+		`);
+
+		cy.get("[ui5-dynamic-side-content]")
+			.as("dsc");
+
+		cy.get("@dsc")
+			.shadow()
+			.find(".ui5-dsc-main")
+			.should("have.attr", "aria-label", "Main Content");
+
+		cy.get("@dsc")
+			.shadow()
+			.find(".ui5-dsc-side")
+			.should("have.attr", "aria-label", "Side Content");
+
+		cy.get<DynamicSideContent>("@dsc")
+			.then($dsc => {
+				$dsc.get(0).accessibilityAttributes = {
+					mainContentLabel: customMainContentLabel,
+					sideContentLabel: customSideContentLabel,
+				};
+			});
+
+		cy.get("@dsc")
+			.shadow()
+			.find(".ui5-dsc-main")
+			.should("have.attr", "aria-label", customMainContentLabel);
+
+		cy.get("@dsc")
+			.shadow()
+			.find(".ui5-dsc-side")
+			.should("have.attr", "aria-label", customSideContentLabel);
+	});
+});

packages/fiori/src/DynamicSideContent.ts

@@ -18,6 +18,7 @@ import DynamicSideContentCss from "./generated/themes/DynamicSideContent.css.js"
 
 // Texts
 import {
+	DSC_MAIN_ARIA_LABEL,
 	DSC_SIDE_ARIA_LABEL,
 } from "./generated/i18n/i18n-defaults.js";
 
@@ -34,6 +35,11 @@ type DynamicSideContentLayoutChangeEventDetail = {
 	sideContentVisible: boolean,
 }
 
+type DynamicSideContentAccessibilityAttributes = {
+	mainContentLabel?: string,
+	sideContentLabel?: string,
+}
+
 /**
  * @class
  *
@@ -186,6 +192,21 @@ class DynamicSideContent extends UI5Element {
 	@property({ type: Boolean })
 	equalSplit = false;
 
+	/**
+	* Defines additional accessibility attributes on different areas of the component.
+	*
+	* The accessibilityAttributes object has the following fields:
+	*
+	*  - **mainContentLabel**: defines the aria-label of the main content area. Accepts any string.
+	*  - **sideContentLabel**: defines the aria-label of the side content area. Accepts any string.
+	*
+	* @default {}
+	* @public
+	* @since 2.6.0
+	*/
+	@property({ type: Object })
+	accessibilityAttributes: DynamicSideContentAccessibilityAttributes = {};
+
 	/**
 	 * @private
 	 */
@@ -287,7 +308,8 @@ class DynamicSideContent extends UI5Element {
 
 	get accInfo() {
 		return {
-			"label": DynamicSideContent.i18nBundle.getText(DSC_SIDE_ARIA_LABEL),
+			"mainContentLabel": this.accessibilityAttributes.mainContentLabel || DynamicSideContent.i18nBundle.getText(DSC_MAIN_ARIA_LABEL),
+			"sideContentLabel": this.accessibilityAttributes.sideContentLabel || DynamicSideContent.i18nBundle.getText(DSC_SIDE_ARIA_LABEL),
 		};
 	}
 
@@ -462,4 +484,5 @@ DynamicSideContent.define();
 export default DynamicSideContent;
 export type {
 	DynamicSideContentLayoutChangeEventDetail,
+	DynamicSideContentAccessibilityAttributes,
 };

packages/fiori/src/DynamicSideContentTemplate.tsx

@@ -24,6 +24,8 @@ export default function DynamicSideContentTemplate(this: DynamicSideContent) {
 function mainContent(this: DynamicSideContent) {
 	return (
 		<div
+			role="main"
+			aria-label={this.accInfo.mainContentLabel}
 			class={this.classes.main}
 			style={this.styles.main}
 		>
@@ -36,7 +38,7 @@ function sideContent(this: DynamicSideContent) {
 	return (
 		<aside
 			role="complementary"
-			aria-label={this.accInfo.label}
+			aria-label={this.accInfo.sideContentLabel}
 			class={this.classes.side}
 			style={this.styles.side}
 		>

packages/fiori/src/i18n/messagebundle.properties

@@ -407,6 +407,9 @@ IM_TITLE_SURVEY=Your Opinion Matters
 #XTIT: IllustratedMessage's subtitle for the Survey illustration
 IM_SUBTITLE_SURVEY=We want to hear what you think about SAP software. Share your feedback with us by taking our short survey.
 
+#XACT: ARIA announcement for DynamicSideContent main content label
+DSC_MAIN_ARIA_LABEL=Main Content
+
 #XACT: ARIA announcement for DynamicSideContent side content label
 DSC_SIDE_ARIA_LABEL=Side Content