From 5fdaf59fb54ca0e54a68a9d128124567f6fd81a4 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Wed, 19 Mar 2025 15:55:41 +0200
Subject: [PATCH 1/5] feat(ui5-bar): allow role change

---
 packages/main/src/Bar.ts                     | 17 +++++++++++++++
 packages/main/src/BarTemplate.tsx            |  2 +-
 packages/main/src/types/BarAccessibleRole.ts | 22 ++++++++++++++++++++
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 packages/main/src/types/BarAccessibleRole.ts

diff --git a/packages/main/src/Bar.ts b/packages/main/src/Bar.ts
index 1c6b55f03a80..06b60d387198 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() as AriaRole;
+	 }
 }
 
 Bar.define();
diff --git a/packages/main/src/BarTemplate.tsx b/packages/main/src/BarTemplate.tsx
index ea8ed7d9b27c..e1a870299ade 100644
--- a/packages/main/src/BarTemplate.tsx
+++ b/packages/main/src/BarTemplate.tsx
@@ -5,7 +5,7 @@ export default function BarTemplate(this: Bar) {
 		<div
 			class="ui5-bar-root"
 			aria-label={this.accInfo.label}
-			role="toolbar"
+			role={this.accInfo.role}
 			part="bar"
 		>
 			<div class="ui5-bar-content-container ui5-bar-startcontent-container" part="startContent">
diff --git a/packages/main/src/types/BarAccessibleRole.ts b/packages/main/src/types/BarAccessibleRole.ts
new file mode 100644
index 000000000000..d455edc43420
--- /dev/null
+++ b/packages/main/src/types/BarAccessibleRole.ts
@@ -0,0 +1,22 @@
+/**
+ * ListItem accessible roles.
+ * @public
+ * @since 2.9.0
+ */
+enum BarAccessibleRole {
+
+	/**
+	 * Represents the ARIA role "toolbar".
+	 * @public
+	 */
+	Toolbar = "Toolbar",
+
+	/**
+	 * Represents the ARIA role "none".
+	 * @public
+	 */
+	None = "None"
+
+}
+
+export default BarAccessibleRole;

From 39c82477410580d24ef450430ccd49950bfa58fa Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Thu, 20 Mar 2025 13:38:18 +0200
Subject: [PATCH 2/5] fix(ui5-bar): fix acc issues

---
 packages/main/src/Bar.ts          | 2 +-
 packages/main/src/BarTemplate.tsx | 2 +-
 packages/main/test/pages/Bar.html | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/main/src/Bar.ts b/packages/main/src/Bar.ts
index 06b60d387198..e86aa8e49b25 100644
--- a/packages/main/src/Bar.ts
+++ b/packages/main/src/Bar.ts
@@ -140,7 +140,7 @@ class Bar extends UI5Element {
 	 }
 
 	 get effectiveRole() {
-		return this.accessibleRole.toLowerCase() as AriaRole;
+		return this.accessibleRole.toLowerCase() === "toolbar" ? "toolbar" as AriaRole : undefined;
 	 }
 }
 
diff --git a/packages/main/src/BarTemplate.tsx b/packages/main/src/BarTemplate.tsx
index e1a870299ade..5228cdcb4777 100644
--- a/packages/main/src/BarTemplate.tsx
+++ b/packages/main/src/BarTemplate.tsx
@@ -4,7 +4,7 @@ export default function BarTemplate(this: Bar) {
 	return (
 		<div
 			class="ui5-bar-root"
-			aria-label={this.accInfo.label}
+			aria-label={this.accInfo.role && this.accInfo.label}
 			role={this.accInfo.role}
 			part="bar"
 		>
diff --git a/packages/main/test/pages/Bar.html b/packages/main/test/pages/Bar.html
index 6581f01b6050..a79d21322533 100644
--- a/packages/main/test/pages/Bar.html
+++ b/packages/main/test/pages/Bar.html
@@ -16,10 +16,10 @@
 
 <body class="bar1auto">
 	<section>
-		<ui5-bar design="Header">
-		<ui5-title id="titleElement" slot="startContent">Title</ui5-title>
-		<ui5-label>Title</ui5-label>
-		<ui5-button icon="action-settings" tooltip="Go to settings" slot="endContent"></ui5-button>
+		<ui5-bar design="Header" accessible-role="None">
+			<ui5-title id="titleElement" slot="startContent">Title</ui5-title>
+			<ui5-label>Title</ui5-label>
+			<ui5-button icon="action-settings" tooltip="Go to settings" slot="endContent"></ui5-button>
 		</ui5-bar>
 		<ui5-bar design="Subheader">
 			<ui5-title id="titleElement" slot="startContent">Title</ui5-title>

From 2997b3c8702ff9e7f5a585a7dbaa1930ef1f6e08 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Wed, 16 Apr 2025 17:58:42 +0300
Subject: [PATCH 3/5] docs(ui5-bar): add documentation

---
 packages/main/src/Bar.ts                      | 13 ++++++---
 .../docs/_components_pages/main/Bar.mdx       |  6 ++++-
 .../main/Bar/AccessibleRole/AccessibleRole.md |  4 +++
 .../_samples/main/Bar/AccessibleRole/main.js  |  5 ++++
 .../main/Bar/AccessibleRole/sample.html       | 27 +++++++++++++++++++
 5 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 packages/website/docs/_samples/main/Bar/AccessibleRole/AccessibleRole.md
 create mode 100644 packages/website/docs/_samples/main/Bar/AccessibleRole/main.js
 create mode 100644 packages/website/docs/_samples/main/Bar/AccessibleRole/sample.html

diff --git a/packages/main/src/Bar.ts b/packages/main/src/Bar.ts
index e86aa8e49b25..a1b4eefd47e7 100644
--- a/packages/main/src/Bar.ts
+++ b/packages/main/src/Bar.ts
@@ -68,10 +68,17 @@ class Bar extends UI5Element {
 	design: `${BarDesign}` = "Header";
 
 	/**
-	 * Used to define the role of the bar.
-	 * @private
+	 * Specifies the ARIA role applied to the component for accessibility purposes.
+	 * 
+	 * **Note:**
+	 * 
+	 * - Set accessibleRole to "toolbar" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.
+	 * 
+	 * - If there is only one or no active element, it is recommended to avoid using the toolbar role, as it implies a grouping of multiple interactive controls.
+	 * 
+	 * @public
 	 * @default "Toolbar"
-	 * @since 2.9.0
+	 * @since 2.10.0
 	 *
 	 */
 	@property()
diff --git a/packages/website/docs/_components_pages/main/Bar.mdx b/packages/website/docs/_components_pages/main/Bar.mdx
index 58c386c52075..eb7530fb8a2c 100644
--- a/packages/website/docs/_components_pages/main/Bar.mdx
+++ b/packages/website/docs/_components_pages/main/Bar.mdx
@@ -1,8 +1,12 @@
 import Basic from "../../_samples/main/Bar/Basic/Basic.md";
+import AccessibleRole from "../../_samples/main/Bar/AccessibleRole/AccessibleRole.md";
 
 <%COMPONENT_OVERVIEW%>
 
 ## Basic Sample
 <Basic />
 
-<%COMPONENT_METADATA%>
\ No newline at end of file
+<%COMPONENT_METADATA%>
+
+## Bar with accessible role
+<AccessibleRole />
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/Bar/AccessibleRole/AccessibleRole.md b/packages/website/docs/_samples/main/Bar/AccessibleRole/AccessibleRole.md
new file mode 100644
index 000000000000..17798ecc59ab
--- /dev/null
+++ b/packages/website/docs/_samples/main/Bar/AccessibleRole/AccessibleRole.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />
diff --git a/packages/website/docs/_samples/main/Bar/AccessibleRole/main.js b/packages/website/docs/_samples/main/Bar/AccessibleRole/main.js
new file mode 100644
index 000000000000..f72934fcf486
--- /dev/null
+++ b/packages/website/docs/_samples/main/Bar/AccessibleRole/main.js
@@ -0,0 +1,5 @@
+import "@ui5/webcomponents/dist/Button.js";
+import "@ui5/webcomponents/dist/Label.js";
+import "@ui5/webcomponents/dist/Bar.js";
+import "@ui5/webcomponents-icons/dist/home.js"
+import "@ui5/webcomponents-icons/dist/action-settings.js"
diff --git a/packages/website/docs/_samples/main/Bar/AccessibleRole/sample.html b/packages/website/docs/_samples/main/Bar/AccessibleRole/sample.html
new file mode 100644
index 000000000000..a9509f0c3088
--- /dev/null
+++ b/packages/website/docs/_samples/main/Bar/AccessibleRole/sample.html
@@ -0,0 +1,27 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+<body style="background-color: var(--sapBackgroundColor)">
+<!-- playground-fold-end -->
+    <ui5-label>Bar with two or more active items:</ui5-label>
+    <ui5-bar design="Header" accessible-role="Toolbar">
+        <ui5-button icon="home" tooltip="Go home" design="Transparent" slot="startContent"></ui5-button>
+        <ui5-label id="basic-label">Content</ui5-label>
+        <ui5-button icon="action-settings" tooltip="Go to settings" slot="endContent"></ui5-button>
+    </ui5-bar>
+    <br>
+    <ui5-label>Bar with less than two active items:</ui5-label>
+    <ui5-bar design="Header">
+        <ui5-label id="basic-label">Storybook title</ui5-label>
+    </ui5-bar>
+<!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+</html>
+<!-- playground-fold-end -->
+

From 279f8b0485a0cedd0f1963bd639edfbc57defc71 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Wed, 16 Apr 2025 18:06:18 +0300
Subject: [PATCH 4/5] docs(ui5-bar): remove trailing spaces

---
 packages/main/src/Bar.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/main/src/Bar.ts b/packages/main/src/Bar.ts
index a1b4eefd47e7..86a9e39912c3 100644
--- a/packages/main/src/Bar.ts
+++ b/packages/main/src/Bar.ts
@@ -69,13 +69,13 @@ class Bar extends UI5Element {
 
 	/**
 	 * Specifies the ARIA role applied to the component for accessibility purposes.
-	 * 
+	 *
 	 * **Note:**
-	 * 
+	 *
 	 * - Set accessibleRole to "toolbar" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.
-	 * 
+	 *
 	 * - If there is only one or no active element, it is recommended to avoid using the toolbar role, as it implies a grouping of multiple interactive controls.
-	 * 
+	 *
 	 * @public
 	 * @default "Toolbar"
 	 * @since 2.10.0

From 87d1bb6d5b91acf2454c5b9e7f06e9552623bc28 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Mon, 28 Apr 2025 11:21:52 +0300
Subject: [PATCH 5/5] docs(ui5-bar): fix documentation

---
 packages/main/src/Bar.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/Bar.ts b/packages/main/src/Bar.ts
index 86a9e39912c3..479c9236b526 100644
--- a/packages/main/src/Bar.ts
+++ b/packages/main/src/Bar.ts
@@ -74,7 +74,7 @@ class Bar extends UI5Element {
 	 *
 	 * - Set accessibleRole to "toolbar" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.
 	 *
-	 * - If there is only one or no active element, it is recommended to avoid using the toolbar role, as it implies a grouping of multiple interactive controls.
+	 * - If there is only one or no active element, it is recommended to avoid using the "toolbar" role, as it implies a grouping of multiple interactive controls.
 	 *
 	 * @public
 	 * @default "Toolbar"