Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions packages/main/cypress/specs/Button.cy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -577,4 +577,61 @@ describe("Accessibility", () => {
cy.get("@tag")
.should("have.text", "999+");
});

it("accessibilityInfo returns correct properties for different button states", () => {
cy.mount(<Button design="Emphasized" accessibleDescription="Submit form">Submit</Button>);

cy.get<Button>("[ui5-button]")
.then($button => {
const button = $button.get(0);
const info = button.accessibilityInfo;

expect(info.description).to.include("Submit form");
expect(info.description).to.include(Button.i18nBundle.getText(BUTTON_ARIA_TYPE_EMPHASIZED));
expect(info.role).to.equal("button");
expect(info.disabled).to.be.false;
});
});

it("accessibilityInfo reflects custom role and disabled state", () => {
cy.mount(<Button accessibleRole="Link" disabled>Navigate</Button>);

cy.get<Button>("[ui5-button]")
.then($button => {
const button = $button.get(0);
const info = button.accessibilityInfo;

expect(info.role).to.equal("link");
expect(info.disabled).to.be.true;
expect(info.description).to.be.undefined;
});
});

it("accessibilityInfo updates when properties change", () => {
cy.mount(<Button>Click me</Button>);

cy.get<Button>("[ui5-button]")
.as("button");

cy.get<Button>("@button")
.then($button => {
const button = $button.get(0);
expect(button.accessibilityInfo.disabled).to.be.false;
expect(button.accessibilityInfo.role).to.equal("button");

button.disabled = true;
button.accessibleRole = "Link";
button.design = "Negative";
});

cy.get<Button>("@button")
.then($button => {
const button = $button.get(0);
const info = button.accessibilityInfo;

expect(info.disabled).to.be.true;
expect(info.role).to.equal("link");
expect(info.description).to.include("Negative Action");
});
});
});
26 changes: 25 additions & 1 deletion packages/main/src/Button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import toLowercaseEnumValue from "@ui5/webcomponents-base/dist/util/toLowercaseE
import ButtonDesign from "./types/ButtonDesign.js";
import ButtonType from "./types/ButtonType.js";
import ButtonBadgeDesign from "./types/ButtonBadgeDesign.js";
import type ButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
import ButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
import type ButtonBadge from "./ButtonBadge.js";
import ButtonTemplate from "./ButtonTemplate.js";
import {
Expand All @@ -39,6 +39,8 @@ import {
BUTTON_ARIA_TYPE_ATTENTION,
BUTTON_BADGE_ONE_ITEM,
BUTTON_BADGE_MANY_ITEMS,
BUTTON_ROLE_DESCRIPTION,
LINK_ROLE_DESCRIPTION,
} from "./generated/i18n/i18n-defaults.js";

// Styles
Expand Down Expand Up @@ -658,6 +660,28 @@ class Button extends UI5Element implements IButton {
};
}

get accessibilityInfo() {
return {
description: this.ariaDescriptionText,
role: this.effectiveAccRole,
disabled: this.disabled,
children: this.text,
type: this.effectiveAccRoleTranslation,
};
}

get effectiveAccRoleTranslation(): string {
if (this.role === ButtonAccessibleRole.Button) {
return Button.i18nBundle.getText(BUTTON_ROLE_DESCRIPTION);
}

if (this.role === ButtonAccessibleRole.Link) {
return Button.i18nBundle.getText(LINK_ROLE_DESCRIPTION);
}

return "";
}

get effectiveBadgeDescriptionText() {
if (!this.shouldRenderBadge) {
return "";
Expand Down
6 changes: 6 additions & 0 deletions packages/main/src/i18n/messagebundle.properties
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,12 @@ BUTTON_BADGE_ONE_ITEM={0} item
#XACT: ARIA announcement for the Button Badge with value more than 1 - "{0} items"
BUTTON_BADGE_MANY_ITEMS={0} items

#ACC: ARIA announcement for the Button role attribute
BUTTON_ROLE_DESCRIPTION=Button

#ACC: ARIA announcement for the Link role attribute
LINK_ROLE_DESCRIPTION=Link

#XACT: Text for Today item in CalendarLegend
CAL_LEGEND_TODAY_TEXT=Today

Expand Down
Loading