feat(ui5-ai-button): add customizable accessibility attributes to AI Button and SplitButton

packages/ai/cypress/specs/Button.cy.tsx

@@ -12,3 +12,73 @@ describe("Initial rendering", () => {
 		);
 	});
 });
+
+describe("Accessibility", () => {
+	it("should set correct tooltip to right text button", () => {
+		cy.mount(
+			<Button>
+				<ButtonState name="generate" text="Generate" icon="ai">Click me</ButtonState>
+				<ButtonState name="revise" text="Revise" icon="stop">Click me</ButtonState>
+			</Button>
+		);
+
+		cy.get("[ui5-ai-button]")
+			.ui5AIButtonCheckAttributeInTextButton("tooltip", "Generate with Artificial Intelligence");
+	});
+
+	it("should set correct aria-haspopup to SplitButton root element", () => {
+		cy.mount(
+			<Button accessibilityAttributes={{ root: { hasPopup: "menu" } }}>
+				<ButtonState name="generate" text="Generate" icon="ai">Click me</ButtonState>
+			</Button>
+		);
+
+		cy.get("[ui5-ai-button]")
+			.ui5AIButtonCheckAttributeSplitButtonRoot("aria-haspopup", "menu");
+	});
+
+	it("should set correct aria-roledescription to SplitButton root element", () => {
+		cy.mount(
+			<Button accessibilityAttributes={{ root: { roleDescription: "Open Menu" } }}>
+				<ButtonState name="generate" text="Generate" icon="ai">Click me</ButtonState>
+			</Button>
+		);
+
+		cy.get("[ui5-ai-button]")
+			.ui5AIButtonCheckAttributeSplitButtonRoot("aria-roledescription", "Open Menu");
+	});
+
+	it("should set correct aria-haspopup to arrow button if shown", () => {
+		cy.mount(
+			<Button accessibilityAttributes={{ arrowButton: { hasPopup: "menu", expanded: false } }}>
+				<ButtonState name="generate" text="Generate" icon="ai" showArrowButton={true}>Click me</ButtonState>
+			</Button>
+		);
+
+		cy.get("[ui5-ai-button]")
+			.ui5AIButtonCheckAttributeInArrowButton("aria-haspopup", "menu");
+	});
+
+	it("should set correct aria attributes with default values when not provided", () => {
+		cy.mount(
+			<Button>
+				<ButtonState name="generate" text="Generate" icon="ai" showArrowButton={true}>Click me</ButtonState>
+			</Button>
+		);
+
+		cy.get("[ui5-ai-button]")
+			.as("button");
+
+		cy.get("@button")
+			.ui5AIButtonCheckAttributeSplitButtonRoot("aria-haspopup", "false");
+
+		cy.get("@button")
+			.ui5AIButtonCheckAttributeSplitButtonRoot("aria-roledescription", "Split Button");
+
+		cy.get("@button")
+			.ui5AIButtonCheckAttributeInArrowButton("aria-haspopup", "menu");
+
+		cy.get("@button")
+			.ui5AIButtonCheckAttributeInArrowButton("aria-expanded", "false");
+	});
+});

packages/ai/cypress/support/commands.ts

@@ -37,4 +37,15 @@
 // }
 
 import "@ui5/cypress-internal/commands.js";
-import "../../../main/cypress/support/commands.js";
+import "../../../main/cypress/support/commands.js";
+import "./commands/Button.commands.js";
+
+declare global {
+	namespace Cypress {
+		interface Chainable {
+			ui5AIButtonCheckAttributeInTextButton(attrName: string, attrValue: string): Chainable<void>
+            ui5AIButtonCheckAttributeInArrowButton(attrName: string, attrValue: string): Chainable<void>
+            ui5AIButtonCheckAttributeSplitButtonRoot(attrName: string, attrValue: string): Chainable<void>
+		}
+	}
+}

packages/ai/cypress/support/commands/Button.commands.ts

@@ -0,0 +1,33 @@
+import Button from "../../../src/Button.js";
+
+Cypress.Commands.add("ui5AIButtonCheckAttributeInTextButton", { prevSubject: true }, (subject: JQuery<Button>,  attrName: string, attrValue: string) => {
+    cy.wrap(subject)
+		.shadow()
+		.find("[ui5-split-button]")
+		.shadow()
+		.find(".ui5-split-text-button")
+        .should("be.visible")
+        .should("have.attr", attrName, attrValue);
+});
+
+Cypress.Commands.add("ui5AIButtonCheckAttributeInArrowButton", { prevSubject: true }, (subject: JQuery<Button>,  attrName: string, attrValue: string) => {
+    cy.wrap(subject)
+        .shadow()
+		.find("[ui5-split-button]")
+		.shadow()
+		.find(".ui5-split-arrow-button")
+		.shadow()
+		.find(".ui5-button-root")
+        .should("be.visible")
+		.should("have.attr", attrName, attrValue);
+});
+
+Cypress.Commands.add("ui5AIButtonCheckAttributeSplitButtonRoot", { prevSubject: true }, (subject: JQuery<Button>,  attrName: string, attrValue: string) => {
+    cy.wrap(subject)
+		.shadow()
+		.find("[ui5-split-button]")
+		.shadow()
+		.find(".ui5-split-button-root")
+        .should("be.visible")
+        .should("have.attr", attrName, attrValue);
+});

packages/ai/src/Button.ts

@@ -9,12 +9,24 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type SplitButton from "@ui5/webcomponents/dist/SplitButton.js";
 import type ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
 import type ButtonState from "./ButtonState.js";
+import { BUTTON_TOOLTIP_TEXT } from "./generated/i18n/i18n-defaults.js";
 import "./ButtonState.js";
-
 import ButtonTemplate from "./ButtonTemplate.js";
+import {
+	getEffectiveAriaLabelText,
+	getAssociatedLabelForTexts,
+	getAllAccessibleNameRefTexts,
+} from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 
 // Styles
 import ButtonCss from "./generated/themes/Button.css.js";
+import { i18n } from "@ui5/webcomponents-base/dist/decorators.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
+
+type AIButtonRootAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup" | "roleDescription" | "title">;
+type AIButtonArrowButtonAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup" | "expanded" | "title">;
+type AIButtonAccessibilityAttributes = { root?: AIButtonRootAccessibilityAttributes, arrowButton?: AIButtonArrowButtonAccessibilityAttributes}
 
 /**
  * @class
@@ -119,6 +131,31 @@ class Button extends UI5Element {
 	@property({ type: Boolean, noAttribute: true })
 	arrowButtonPressed = false;
 
+	/**
+ 	 * Defines the additional accessibility attributes that will be applied to the component.
+	 *
+	 * This property allows for fine-tuned control of ARIA attributes for screen reader support.
+	 * It accepts an object with the following optional fields:
+	 *
+	 * - **root**: Accessibility attributes that will be applied to the root element.
+	 *   - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).
+	 *     Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`.
+	 *   - **roleDescription**: Defines a human-readable description for the button's role.
+	 *     Accepts any string value.
+	 *
+	 * - **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.
+	 *   - **hasPopup**: Indicates the type of popup triggered by the arrow button.
+	 *     Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`.
+	 *   - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.
+	 *     Accepts boolean values: `true` or `false`.
+	 *
+	 * @public
+	 * @since 2.6.0
+	 * @default {}
+ 	*/
+	@property({ type: Object })
+	accessibilityAttributes: AIButtonAccessibilityAttributes = {};
+
 	/**
 	 * Keeps the current state object of the component.
 	 * @private
@@ -150,6 +187,9 @@ class Button extends UI5Element {
 	@query(".ui5-ai-button-hidden[ui5-split-button]")
 	_hiddenSplitButton?: SplitButton;
 
+	@i18n("@ui5/webcomponents")
+	static i18nBundle: I18nBundle;
+
 	get _hideArrowButton() {
 		return !this._effectiveStateObject?.showArrowButton;
 	}
@@ -305,7 +345,30 @@ class Button extends UI5Element {
 		e.stopImmediatePropagation();
 		this.fireDecoratorEvent("arrow-button-click");
 	}
+
+	get _computedAccessibilityAttributes(): AIButtonAccessibilityAttributes {
+		const labelRefTexts = getAllAccessibleNameRefTexts(this) || getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this) || "";
+
+		const mainTitle = this._hasText ? Button.i18nBundle.getText(BUTTON_TOOLTIP_TEXT, this._stateText as string) : "";
+		const title = `${mainTitle} ${labelRefTexts}`.trim();
+
+		return {
+			root: {
+				hasPopup: this.accessibilityAttributes?.root?.hasPopup || "false",
+				roleDescription: this.accessibilityAttributes?.root?.roleDescription,
+				title: this.accessibilityAttributes?.root?.title || title,
+			},
+			arrowButton: {
+				hasPopup: this.accessibilityAttributes?.arrowButton?.hasPopup,
+				expanded: this.accessibilityAttributes?.arrowButton?.expanded,
+				title: this.accessibilityAttributes?.arrowButton?.title,
+			},
+		};
+	}
 }
 
 Button.define();
 export default Button;
+export type {
+	AIButtonAccessibilityAttributes,
+};

packages/ai/src/ButtonTemplate.tsx

@@ -12,6 +12,7 @@ export default function ButtonTemplate(this: Button) {
 			_hideArrowButton={this._hideArrowButton}
 			onClick={this._onClick}
 			onArrowClick={this._onArrowClick}
+			accessibilityAttributes={this._computedAccessibilityAttributes}
 		>
 			{this._hasText && (
 				<div class="ui5-ai-button-text">{this._stateText}</div>

packages/ai/src/i18n/messagebundle.properties

@@ -5,4 +5,8 @@
 PROMPT_INPUT_CHARACTERS_LEFT={0} characters remaining
 
 #XTXT: Text for characters over
-PROMPT_INPUT_CHARACTERS_EXCEEDED={0} characters over limit
+PROMPT_INPUT_CHARACTERS_EXCEEDED={0} characters over limit
+
+#XTXT: Text for
+BUTTON_TOOLTIP_TEXT={0} with Artificial Intelligence
+

packages/ai/src/i18n/messagebundle_en.properties

@@ -1,4 +1,4 @@
 
 PROMPT_INPUT_CHARACTERS_LEFT={0} characters remaining
 
-PROMPT_INPUT_CHARACTERS_EXCEEDED={0} characters over limit
+PROMPT_INPUT_CHARACTERS_EXCEEDED={0} characters over limit

packages/ai/test/pages/Button.html

@@ -145,17 +145,28 @@
 		const predefinedTextsSimplified = data.predefinedTextsSimplified;
 		const predefinedTextsSummarized = data.predefinedTextsSummarized;
 
-		function startGeneration(button) {
+		function startGeneration(button, isSplitButton = false) {
 			console.warn("startGeneration");
 			generationId = setTimeout(function() {
 				console.warn("Generation completed");
 				button.state = "revise";
+				button.accessibilityAttributes = {
+					root: {
+						hasPopup: "menu",
+						roleDescription: isSplitButton  ? undefined : "Menu Button"
+					}
+				};
 			}, 3000);
 		}
 
-		function stopGeneration() {
+		function stopGeneration(button) {
 			console.warn("stopGeneration");
 			clearTimeout(generationId);
+			button.accessibilityAttributes = {
+					root: {
+						hasPopup: "false"
+					}
+				};
 		}
 
 		function aiButtonClickHandler(evt) {
@@ -168,7 +179,7 @@
 					break;
 				case "generating":
 					button.state = "generate";
-					stopGeneration();
+					stopGeneration(button);
 					break;
 				case "revise":
 					menu.opener = button;
@@ -185,17 +196,17 @@
 				case "generate":
 					prevTriggerState = "generate";
 					button.state = "generating";
-					startGeneration(button);
+					startGeneration(button, true);
 					break;
 				case "generating":
 					button.state = prevTriggerState;
-					stopGeneration();
+					stopGeneration(button);
 					break;
 				case "revise":
 					menuReg.open = false;
 					prevTriggerState = "revise";
 					button.state = "generating";
-					startGeneration(button);
+					startGeneration(button, true);
 					break;
 			}
 		}
@@ -235,7 +246,6 @@
 
 			button.arrowButtonPressed = false;
 		});
-
 		myAiButton.addEventListener("click", aiButtonClickHandler);
 		myAiButtonSplit.addEventListener("click", aiButtonSplitClickHandler);
 		myAiButtonSplit.addEventListener("arrow-button-click", aiButtonSplitArrowClickHandler);
@@ -276,15 +286,26 @@
 			generationId = setTimeout(function() {
 				console.warn("Generation completed");
 				button.state = "revise";
+				button.accessibilityAttributes = {
+					root: {
+						hasPopup: "menu",
+						roleDescription: "Menu Button"
+					}
+				};
 			}, 2000);
 		}
 
-		function stopQuickPromptGeneration() {
+		function stopQuickPromptGeneration(button) {
 			console.warn("stopGeneration");
 			clearInterval(generationId);
 			generationStopped = true;
 			sendButton.disabled = false;
 			output.disabled = false;
+			button.accessibilityAttributes = {
+				root: {
+					hasPopup: "false"
+				}
+			};
 		}
 
 		sendButton.addEventListener("click", function() {
@@ -420,6 +441,13 @@
 					if (!generationStopped) {
 						button.state = "revise";
 						output.valueState = "None";
+						button.accessibilityAttributes = {
+							root: {
+								hasPopup: "menu",
+								roleDescription: "Menu Button"
+							}
+						};
+
 					}
 					clearInterval(generationId);
 					sendButton.disabled = false;

packages/base/src/types.ts

@@ -22,7 +22,7 @@ export type AriaRole = JSX.AriaRole;
 export type AriaDisabled = JSX.AriaAttributes["aria-disabled"];
 export type AriaChecked = JSX.AriaAttributes["aria-checked"];
 export type AriaReadonly = JSX.AriaAttributes["aria-readonly"];
-export type AriaHasPopup = "dialog" | "grid" | "listbox" | "menu" | "tree";
+export type AriaHasPopup = "dialog" | "grid" | "listbox" | "menu" | "tree" | "false";
 export type AriaCurrent = "page" | "step" | "location" | "date" | "time" | "true" | "false" | boolean | undefined;
 export type AriaAutoComplete = "list" | "none" | "inline" | "both" | undefined;
 export type AriaLandmarkRole = "none" | "banner" | "main" | "region" | "navigation" | "search" | "complementary" | "form" | "contentinfo"
@@ -64,4 +64,6 @@ export type AccessibilityAttributes = {
 	ariaKeyShortcuts?: string,
 	ariaCurrent?: AriaCurrent,
 	current?: AriaCurrent,
+	roleDescription?: string,
+	title?: string,
 }