diff --git a/packages/main/cypress/specs/SegmentedButton.cy.tsx b/packages/main/cypress/specs/SegmentedButton.cy.tsx index 0339bac4373f0..74cbde2ec4597 100644 --- a/packages/main/cypress/specs/SegmentedButton.cy.tsx +++ b/packages/main/cypress/specs/SegmentedButton.cy.tsx @@ -366,7 +366,7 @@ describe("SegmentedButton Accessibility", () => { cy.get("[ui5-segmented-button]") .shadow() .find(".ui5-segmented-button-root") - .should("have.attr", "aria-description", SegmentedButton.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIBEDBY)); + .should("not.have.attr", "aria-description"); }); it("segmented button should have correct aria description when accessibleDescription is set", () => { @@ -381,7 +381,7 @@ describe("SegmentedButton Accessibility", () => { cy.get("[ui5-segmented-button]") .shadow() .find(".ui5-segmented-button-root") - .should("have.attr", "aria-description", `${DESCRIPTION} ${SegmentedButton.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIBEDBY)}`); + .should("have.attr", "aria-description", DESCRIPTION); }); it("segmented button should have correct aria description when accessibleDescriptionRef is set", () => { @@ -399,7 +399,7 @@ describe("SegmentedButton Accessibility", () => { cy.get("[ui5-segmented-button]") .shadow() .find(".ui5-segmented-button-root") - .should("have.attr", "aria-description", `${DESCRIPTION} ${SegmentedButton.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIBEDBY)}`); + .should("have.attr", "aria-description", DESCRIPTION); }); it("segmented button should have correct aria-multiselectable", () => { @@ -504,13 +504,27 @@ describe("SegmentedButtonItem Accessibility", () => { .eq(0) .shadow() .find("li") - .should("have.attr", "aria-description", DESCRIPTION); + .should("have.attr", "aria-description", `${DESCRIPTION} ${SegmentedButtonItem.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIBEDBY)}`); cy.get("@items") .eq(1) .shadow() .find("li") - .should("have.attr", "aria-description", REF_DESCRIPTION); + .should("have.attr", "aria-description", `${REF_DESCRIPTION} ${SegmentedButtonItem.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIBEDBY)}`); + }); + + it("segmented button items should not have aria-roledescription", () => { + cy.mount( + + First + Second + + ); + + cy.get("[ui5-segmented-button-item]") + .shadow() + .find("li") + .should("not.have.attr", "aria-roledescription"); }); it("should set title attribute to slot text when tooltip is not provided", () => { diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index 35e0c629d5664..1511864375e7d 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -21,7 +21,9 @@ import { isEscape, isSpaceShift, } from "@ui5/webcomponents-base/dist/Keys.js"; -import { SEGMENTEDBUTTON_ARIA_DESCRIPTION, SEGMENTEDBUTTON_ARIA_DESCRIBEDBY } from "./generated/i18n/i18n-defaults.js"; +import { LIST_ITEM_SELECTED } from "./generated/i18n/i18n-defaults.js"; +import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js"; +import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js"; import "./SegmentedButtonItem.js"; import type SegmentedButtonItem from "./SegmentedButtonItem.js"; import SegmentedButtonSelectionMode from "./types/SegmentedButtonSelectionMode.js"; @@ -240,6 +242,10 @@ class SegmentedButton extends UI5Element { selectedItems: this.selectedItems, }); + if (target.selected) { + announce(SegmentedButton.i18nBundle.getText(LIST_ITEM_SELECTED), InvisibleMessageMode.Assertive); + } + this._itemNavigation.setCurrentItem(target); return this; @@ -338,11 +344,7 @@ class SegmentedButton extends UI5Element { } get ariaDescriptionText() { - return `${(getEffectiveAriaDescriptionText(this) || "")} ${SegmentedButton.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIBEDBY)}`.trim(); - } - - get ariaRoleDescription() { - return SegmentedButton.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIPTION); + return getEffectiveAriaDescriptionText(this) || undefined; } } diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts index 85e2818f4851a..cba42e93a8635 100644 --- a/packages/main/src/SegmentedButtonItem.ts +++ b/packages/main/src/SegmentedButtonItem.ts @@ -15,7 +15,7 @@ import { import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; -import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js"; +import { SEGMENTEDBUTTON_ARIA_DESCRIBEDBY } from "./generated/i18n/i18n-defaults.js"; import type { ISegmentedButtonItem } from "./SegmentedButton.js"; import SegmentedButtonItemTemplate from "./SegmentedButtonItemTemplate.js"; @@ -205,10 +205,6 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; - get ariaDescription() { - return SegmentedButtonItem.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION); - } - constructor() { super(); } @@ -268,7 +264,7 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto } get ariaDescriptionText() { - return getEffectiveAriaDescriptionText(this) || undefined; + return `${(getEffectiveAriaDescriptionText(this) || "")} ${SegmentedButtonItem.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIBEDBY)}`.trim(); } get showIconTooltip() { diff --git a/packages/main/src/SegmentedButtonItemTemplate.tsx b/packages/main/src/SegmentedButtonItemTemplate.tsx index 11765a7ac654f..f3514b79af2b6 100644 --- a/packages/main/src/SegmentedButtonItemTemplate.tsx +++ b/packages/main/src/SegmentedButtonItemTemplate.tsx @@ -10,7 +10,6 @@ export default function SegmentedButtonItemTemplate(this: SegmentedButtonItem) { aria-setsize={this.sizeOfSet} aria-selected={this.selected} aria-disabled={this.disabled} - aria-roledescription={this.ariaDescription} data-sap-focus-ref onClick={this._onclick} onKeyUp={this._onkeyup} diff --git a/packages/main/src/SegmentedButtonTemplate.tsx b/packages/main/src/SegmentedButtonTemplate.tsx index 27e98a21ba135..bdfb056056c65 100644 --- a/packages/main/src/SegmentedButtonTemplate.tsx +++ b/packages/main/src/SegmentedButtonTemplate.tsx @@ -18,7 +18,6 @@ export default function SegmentedButtonTemplate(this: SegmentedButton) { aria-orientation="horizontal" aria-description={this.ariaDescriptionText} aria-label={this.ariaLabelText} - aria-roledescription={this.ariaRoleDescription} >