UI5 · ilhan007 · May 14, 2024 · Apr 19, 2024 · Apr 19, 2024 · Apr 22, 2024
diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs
@@ -20,7 +20,7 @@
 	aria-label="{{ariaLabelText}}"
 	title="{{buttonTitle}}"
 	part="button"
-	role="{{buttonAccessibleRole}}"
+	role="{{effectiveAccRole}}"
 >
 	{{#if icon}}
 		<ui5-icon

diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts
@@ -218,7 +218,7 @@ class Button extends UI5Element implements IFormElement, IButton {
 	/**
 	 * Describes the accessibility role of the button.
 	 *
-	 * **Note:** Use link role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.
+	 * **Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.
 	 *
 	 * @default "Button"
 	 * @public
@@ -473,7 +473,7 @@ class Button extends UI5Element implements IFormElement, IButton {
 		return Button.i18nBundle.getText(Button.typeTextMappings()[this.design]);
 	}
 
-	get buttonAccessibleRole() {
+	get effectiveAccRole() {
 		return this.accessibleRole.toLowerCase();
 	}
 

diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts
@@ -13,6 +13,7 @@ import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNaviga
 import { markEvent } from "@ui5/webcomponents-base/dist/MarkedEvents.js";
 import LinkDesign from "./types/LinkDesign.js";
 import WrappingType from "./types/WrappingType.js";
+import LinkAccessibleRole from "./types/LinkAccessibleRole.js";
 // Template
 import LinkTemplate from "./generated/templates/LinkTemplate.lit.js";
 
@@ -194,13 +195,13 @@ class Link extends UI5Element implements ITabbable {
 	/**
 	 * Defines the ARIA role of the component.
 	 *
-	 * **Note:** Use the "button" role in cases when navigation is not expected to occur and the href property is not defined.
+	 * **Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.
 	 * @default "link"
 	 * @public
 	 * @since 1.9.0
 	 */
-	@property({ defaultValue: "link" })
-	accessibleRole!: string;
+	@property({ type: LinkAccessibleRole, defaultValue: LinkAccessibleRole.Link })
+	accessibleRole!: `${LinkAccessibleRole}`;
 
 	/**
 	 * Defines the additional accessibility attributes that will be applied to the component.

diff --git a/packages/main/src/ToggleSpinButton.ts b/packages/main/src/ToggleSpinButton.ts
@@ -66,7 +66,7 @@ class ToggleSpinButton extends ToggleButton {
 	/**
 	 * Override
 	 */
-	get buttonAccessibleRole() {
+	get effectiveAccRole() {
 		return "spinbutton";
 	}
 }

diff --git a/packages/main/src/types/LinkAccessibleRole.ts b/packages/main/src/types/LinkAccessibleRole.ts
@@ -0,0 +1,22 @@
+/**
+ * Link accessible roles.
+ *
+ * @public
+ * @since 2.0.0
+ */
+enum LinkAccessibleRole {
+
+	/**
+	 * Represents Default (link) ARIA role.
+	 * @public
+	 */
+	Link = "Link",
+
+	/**
+	 * Represents the ARIA role "button".
+	 * @public
+	 */
+	Button = "Button",
+}
+
+export default LinkAccessibleRole;