diff --git a/packages/main/src/SegmentedButton.hbs b/packages/main/src/SegmentedButton.hbs index 5af8c6930837..969e695cc9f1 100644 --- a/packages/main/src/SegmentedButton.hbs +++ b/packages/main/src/SegmentedButton.hbs @@ -2,6 +2,8 @@ @click="{{_onclick}}" @focusin="{{_onfocusin}}" class="ui5-segmentedbutton-root" + role="group" + aria-roledescription="{{ariaDescription}}" > diff --git a/packages/main/src/SegmentedButton.js b/packages/main/src/SegmentedButton.js index e725d931e289..a0f561dd2a95 100644 --- a/packages/main/src/SegmentedButton.js +++ b/packages/main/src/SegmentedButton.js @@ -1,7 +1,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; +import { SEGMENTEDBUTTON_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js"; // Template import SegmentedButtonTemplate from "./generated/templates/SegmentedButtonTemplate.lit.js"; @@ -90,6 +92,10 @@ class SegmentedButton extends UI5Element { return SegmentedButtonCss; } + static async onDefine() { + await fetchI18nBundle("@ui5/webcomponents"); + } + constructor() { super(); this.initItemNavigation(); @@ -99,6 +105,7 @@ class SegmentedButton extends UI5Element { this.hasPreviouslyFocusedItem = false; this._handleResizeBound = this._handleResize.bind(this); + this.i18nBundle = getI18nBundle("@ui5/webcomponents"); } onEnterDOM() { @@ -201,6 +208,10 @@ class SegmentedButton extends UI5Element { get selectedButton() { return this._selectedButton; } + + get ariaDescription() { + return this.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIPTION); + } } SegmentedButton.define(); diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index 686782532a39..e698363539e5 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -247,6 +247,9 @@ MULTIINPUT_SHOW_MORE_TOKENS={0} More #XTOL: Tooltip for panel expand title PANEL_ICON=Expand/Collapse +#XACT: ARIA description for the segmented button +SEGMENTEDBUTTON_ARIA_DESCRIPTION=Segmented button + #XACT: ARIA announcement for the switch on SWITCH_ON=On