;
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",
},
};
}
diff --git a/packages/fiori/src/DynamicSideContentTemplate.tsx b/packages/fiori/src/DynamicSideContentTemplate.tsx
index 15dafe429cea..e805b6ed2a1a 100644
--- a/packages/fiori/src/DynamicSideContentTemplate.tsx
+++ b/packages/fiori/src/DynamicSideContentTemplate.tsx
@@ -24,7 +24,7 @@ export default function DynamicSideContentTemplate(this: DynamicSideContent) {
function mainContent(this: DynamicSideContent) {
return (
Side Content
dynamicSideContent.accessibilityAttributes = {
mainContent: {
ariaLabel: "Main Content Area",
+ role: "region",
},
sideContent: {
ariaLabel: "Side Content Area",
+ role: "note",
}
};