From bfdb3454ff27dd1d6a0516cd220dffea8cfe2d41 Mon Sep 17 00:00:00 2001
From: PetyaMarkovaBogdanova <petya.markova@sap.com>
Date: Thu, 17 Apr 2025 16:23:40 +0300
Subject: [PATCH 1/2] fix(ui5-toolbar): change in buttons now annnounced

---
 packages/main/src/ToolbarTemplate.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/main/src/ToolbarTemplate.tsx b/packages/main/src/ToolbarTemplate.tsx
index 91714562bff5..98e8f0b126d8 100644
--- a/packages/main/src/ToolbarTemplate.tsx
+++ b/packages/main/src/ToolbarTemplate.tsx
@@ -6,6 +6,7 @@ import overflowIcon from "@ui5/webcomponents-icons/dist/overflow.js";
 export default function ToolbarTemplate(this: Toolbar) {
 	return (<>
 		<div
+			aria-live="polite"
 			class={{
 				"ui5-tb-items": true,
 				"ui5-tb-items-full-width": this.hasFlexibleSpacers,

From 606e3a5e158d44645508cf65c27d31efecd430a1 Mon Sep 17 00:00:00 2001
From: PetyaMarkovaBogdanova <petya.markova@sap.com>
Date: Sun, 27 Apr 2025 21:02:28 +0300
Subject: [PATCH 2/2] fix(ui5-tooolbar): focus announcement fixed

---
 packages/main/src/Toolbar.ts                |  8 ++++++
 packages/main/src/ToolbarButton.ts          | 11 +++++++
 packages/main/src/ToolbarButtonTemplate.tsx |  2 ++
 packages/main/src/ToolbarTemplate.tsx       | 32 ++++++++++-----------
 4 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts
index f3e54d108498..c6bd7a73d776 100644
--- a/packages/main/src/Toolbar.ts
+++ b/packages/main/src/Toolbar.ts
@@ -559,6 +559,14 @@ class Toolbar extends UI5Element {
 				?? this.getOverflowPopover().querySelector(`[data-ui5-stable*=${item.stableDomRef}]`)!;
 		});
 	}
+
+	focusin() {
+		this.setAttribute("aria-live", "polite");
+	}
+
+	focusout() {
+		this.setAttribute("aria-live", "off");
+	}
 }
 
 Toolbar.define();
diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts
index 191857312379..27ce7414ab64 100644
--- a/packages/main/src/ToolbarButton.ts
+++ b/packages/main/src/ToolbarButton.ts
@@ -164,6 +164,9 @@ class ToolbarButton extends ToolbarItem {
 	@property({ type: Boolean })
 	hidden = false;
 
+	focusInRef = this.focusin.bind(this);
+	focusOutRef = this.focusout.bind(this);
+
 	get styles() {
 		return {
 			width: this.width,
@@ -183,6 +186,14 @@ class ToolbarButton extends ToolbarItem {
 		return ToolbarPopoverButtonTemplate;
 	}
 
+	focusin() {
+		this.setAttribute("aria-live", "polite");
+	}
+
+	focusout() {
+		this.setAttribute("aria-live", "off");
+	}
+
 	onClick(e: Event) {
 		e.stopImmediatePropagation();
 		const prevented = !this.fireDecoratorEvent("click", { targetRef: e.target as HTMLElement });
diff --git a/packages/main/src/ToolbarButtonTemplate.tsx b/packages/main/src/ToolbarButtonTemplate.tsx
index aadcab2f8d7a..415e4bcb8897 100644
--- a/packages/main/src/ToolbarButtonTemplate.tsx
+++ b/packages/main/src/ToolbarButtonTemplate.tsx
@@ -22,6 +22,8 @@ export default function ToolbarButtonTemplate(this: ToolbarButton) {
 			data-ui5-external-action-item-id={this._id}
 			data-ui5-stable={this.stableDomRef}
 			onClick={(...args) => this.onClick(...args)}
+			onFocusIn={this.focusInRef}
+			onFocusOut={this.focusOutRef}
 		>
 			{this.text}
 		</Button>
diff --git a/packages/main/src/ToolbarTemplate.tsx b/packages/main/src/ToolbarTemplate.tsx
index 98e8f0b126d8..065d3273d83a 100644
--- a/packages/main/src/ToolbarTemplate.tsx
+++ b/packages/main/src/ToolbarTemplate.tsx
@@ -6,7 +6,6 @@ import overflowIcon from "@ui5/webcomponents-icons/dist/overflow.js";
 export default function ToolbarTemplate(this: Toolbar) {
 	return (<>
 		<div
-			aria-live="polite"
 			class={{
 				"ui5-tb-items": true,
 				"ui5-tb-items-full-width": this.hasFlexibleSpacers,
@@ -17,21 +16,22 @@ export default function ToolbarTemplate(this: Toolbar) {
 			{this.standardItems.map(item => (
 				item.toolbarTemplate.call(item.context)
 			))}
-
-			<Button
-				aria-hidden={this.hideOverflowButton}
-				icon={overflowIcon}
-				design="Transparent"
-				onClick={this.toggleOverflow}
-				class={{
-					"ui5-tb-item": true,
-					"ui5-tb-overflow-btn": true,
-					"ui5-tb-overflow-btn-hidden": this.hideOverflowButton,
-				}}
-				tooltip={this.accInfo.overflowButton.tooltip}
-				accessibleName={this.accInfo.overflowButton.accessibleName}
-				accessibilityAttributes={this.accInfo.overflowButton.accessibilityAttributes}
-			/>
+			<div aria-live="polite">
+				<Button
+					aria-hidden={this.hideOverflowButton}
+					icon={overflowIcon}
+					design="Transparent"
+					onClick={this.toggleOverflow}
+					class={{
+						"ui5-tb-item": true,
+						"ui5-tb-overflow-btn": true,
+						"ui5-tb-overflow-btn-hidden": this.hideOverflowButton,
+					}}
+					tooltip={this.accInfo.overflowButton.tooltip}
+					accessibleName={this.accInfo.overflowButton.accessibleName}
+					accessibilityAttributes={this.accInfo.overflowButton.accessibilityAttributes}
+				/>
+			</div>
 		</div>
 
 		{toolbarPopoverTemplate.call(this)}