changes related to spec changing

SAP · Apr 15, 2020 · 9a858a2 · 9a858a2
1 parent 8d15091
commit 9a858a2
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/packages/main/src/SegmentedButton.hbs b/packages/main/src/SegmentedButton.hbs
@@ -2,11 +2,8 @@
 	@click="{{_onclick}}"
 	@focusin="{{_onfocusin}}"
 	class="ui5-segmentedbutton-root"
-	role="radiogroup"
+	role="group"
+	aria-roledescription="{{ariaDescription}}"
 >
-	{{#each this.buttons}}
-		<div class="ui5-segmentedbutton-item" role="radio" aria-checked="{{this.pressed}}">
-			<slot name="{{this._individualSlot}}"></slot>
-		</div>
-	{{/each}}
+	<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";
@@ -31,10 +33,6 @@ const metadata = {
 		"default": {
 			propertyName: "buttons",
 			type: HTMLElement,
-			individualSlots: true,
-			listenFor: {
-				include: ["pressed"],
-			},
 		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */ {
@@ -94,6 +92,10 @@ class SegmentedButton extends UI5Element {
 		return SegmentedButtonCss;
 	}
 
+	static async onDefine() {
+		await fetchI18nBundle("@ui5/webcomponents");
+	}
+
 	constructor() {
 		super();
 		this.initItemNavigation();
@@ -103,6 +105,7 @@ class SegmentedButton extends UI5Element {
 		this.hasPreviouslyFocusedItem = false;
 
 		this._handleResizeBound = this._handleResize.bind(this);
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onEnterDOM() {
@@ -179,15 +182,14 @@ class SegmentedButton extends UI5Element {
 
 	_handleResize() {
 		const parentWidth = this.parentNode.offsetWidth;
-		const items = Array.from(this.shadowRoot.querySelectorAll(".ui5-segmentedbutton-item"));
 
 		if (!this.style.width || this.percentageWidthSet) {
 			this.style.width = `${Math.max(...this.widths) * this.buttons.length}px`;
 			this.absoluteWidthSet = true;
 		}
 
-		items.forEach(item => {
-			item.style.width = "100%";
+		this.buttons.forEach(button => {
+			button.style.width = "100%";
 		});
 
 		if (parentWidth <= this.offsetWidth && this.absoluteWidthSet) {
@@ -206,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
@@ -243,6 +243,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
 

diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css
@@ -13,7 +13,6 @@
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	width: 100%;
 }
 
 ::slotted(ui5-togglebutton:nth-child(odd)) {