diff --git a/packages/main/src/Bar.ts b/packages/main/src/Bar.ts index 1c6b55f03a80..e86aa8e49b25 100644 --- a/packages/main/src/Bar.ts +++ b/packages/main/src/Bar.ts @@ -5,12 +5,14 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import type BarDesign from "./types/BarDesign.js"; +import type BarAccessibleRole from "./types/BarAccessibleRole.js"; // Template import BarTemplate from "./BarTemplate.js"; // Styles import BarCss from "./generated/themes/Bar.css.js"; +import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js"; /** * @class @@ -65,6 +67,16 @@ class Bar extends UI5Element { @property() design: `${BarDesign}` = "Header"; + /** + * Used to define the role of the bar. + * @private + * @default "Toolbar" + * @since 2.9.0 + * + */ + @property() + accessibleRole: `${BarAccessibleRole}` = "Toolbar"; + /** * Defines the content at the start of the bar. * @public @@ -91,6 +103,7 @@ class Bar extends UI5Element { get accInfo() { return { "label": this.design, + "role": this.effectiveRole, }; } @@ -125,6 +138,10 @@ class Bar extends UI5Element { ResizeHandler.deregister(child as HTMLElement, this._handleResizeBound); }, this); } + + get effectiveRole() { + return this.accessibleRole.toLowerCase() === "toolbar" ? "toolbar" as AriaRole : undefined; + } } Bar.define(); diff --git a/packages/main/src/BarTemplate.tsx b/packages/main/src/BarTemplate.tsx index ea8ed7d9b27c..5228cdcb4777 100644 --- a/packages/main/src/BarTemplate.tsx +++ b/packages/main/src/BarTemplate.tsx @@ -4,8 +4,8 @@ export default function BarTemplate(this: Bar) { return (