diff --git a/packages/main/cypress/specs/SegmentedButton.cy.tsx b/packages/main/cypress/specs/SegmentedButton.cy.tsx index d33943af1955..e3d428062da0 100644 --- a/packages/main/cypress/specs/SegmentedButton.cy.tsx +++ b/packages/main/cypress/specs/SegmentedButton.cy.tsx @@ -376,6 +376,37 @@ describe("SegmentedButton Accessibility", () => { .find(".ui5-segmented-button-root") .should("have.attr", "aria-description", `${DESCRIPTION} ${SegmentedButton.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIBEDBY)}`); }); + + it("segmented button should have correct aria-multiselectable", () => { + cy.mount( + <> + + First + Second + + + First + Second + + + ); + + // Test Single mode (default) should have aria-multiselectable="false" + cy.get("[ui5-segmented-button]") + .first() + .shadow() + .find("ul[role='listbox']") + .should("have.attr", "aria-multiselectable", "false") + .should("have.attr", "aria-orientation", "horizontal"); + + // Test Multiple mode should have aria-multiselectable="true" + cy.get("[ui5-segmented-button]") + .last() + .shadow() + .find("ul[role='listbox']") + .should("have.attr", "aria-multiselectable", "true") + .should("have.attr", "aria-orientation", "horizontal"); + }); }); diff --git a/packages/main/src/SegmentedButtonTemplate.tsx b/packages/main/src/SegmentedButtonTemplate.tsx index ff8d44aa7cd7..dd931e4e61bb 100644 --- a/packages/main/src/SegmentedButtonTemplate.tsx +++ b/packages/main/src/SegmentedButtonTemplate.tsx @@ -10,7 +10,8 @@ export default function SegmentedButtonTemplate(this: SegmentedButton) { onKeyDown={this._onkeydown} onKeyUp={this._onkeyup} onFocusIn={this._onfocusin} - aria-multiselectable="true" + aria-multiselectable={this.selectionMode === "Multiple" ? "true" : "false"} + aria-orientation="horizontal" aria-description={this.ariaDescriptionText} aria-label={this.ariaLabelText} aria-roledescription={this.ariaRoleDescription}