feat(ui5-segmentedbutton): implement accessibility spec (#1475)

* feat(ui5-segmentedbutton): implement acc spec * fixed styling * fixed comments * changes related to spec changing
SAP · Apr 16, 2020 · ae7b395 · ae7b395
1 parent df19ede
commit ae7b395
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git 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}}"
 >
 	<slot></slot>
 </div>
diff --git 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
@@ -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