Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(ui5-link): change the accessibleRole property type #8807

Merged
merged 11 commits into from
May 14, 2024
2 changes: 1 addition & 1 deletion packages/main/src/Button.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
aria-label="{{ariaLabelText}}"
title="{{buttonTitle}}"
part="button"
role="{{buttonAccessibleRole}}"
role="{{effectiveAccRole}}"
>
{{#if icon}}
<ui5-icon
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/Button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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();
}

Expand Down
7 changes: 4 additions & 3 deletions packages/main/src/Link.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/ToggleSpinButton.ts
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ class ToggleSpinButton extends ToggleButton {
/**
* Override
*/
get buttonAccessibleRole() {
get effectiveAccRole() {
return "spinbutton";
}
}
Expand Down
22 changes: 22 additions & 0 deletions packages/main/src/types/LinkAccessibleRole.ts
Original file line number Diff line number Diff line change
@@ -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;