refactor(ui5-segmentedbutton): focus selected button (#1208)

- All themes and browsers: readonly textarea does not change its background on hover
- Quartz Dark and IE: the textarea has proper dark background, not a white one as used to.

Author: ilhan007

packages/main/src/SegmentedButton.hbs

@@ -1,5 +1,6 @@
 <div
 	@click="{{_onclick}}"
+	@focusin="{{_onfocusin}}"
 	class="ui5-segmentedbutton-root"
 >
 	<slot></slot>

packages/main/src/SegmentedButton.js

@@ -95,6 +95,7 @@ class SegmentedButton extends UI5Element {
 
 		this.absoluteWidthSet = false; // set to true whenever we set absolute width to the component
 		this.percentageWidthSet = false; //  set to true whenever we set 100% width to the component
+		this.hasPreviouslyFocusedItem = false;
 	}
 
 	onEnterDOM() {
@@ -143,13 +144,30 @@ class SegmentedButton extends UI5Element {
 				selectedButton: this._selectedButton,
 			});
 		}
-		this._selectedButton.pressed = true;
 
+		this._selectedButton.pressed = true;
 		this._itemNavigation.update(this._selectedButton);
 
 		return this;
 	}
 
+	_onfocusin(event) {
+		// If the component was previously focused,
+		// update the ItemNavigation to sync butons` tabindex values
+		if (this.hasPreviouslyFocusedItem) {
+			this._itemNavigation.update(event.target);
+			return;
+		}
+
+		// If the component is focused for the first time
+		// focus the selected item if such present
+		if (this.selectedButton) {
+			this.selectedButton.focus();
+			this._itemNavigation.update(this._selectedButton);
+			this.hasPreviouslyFocusedItem = true;
+		}
+	}
+
 	_handleResize() {
 		const parentWidth = this.parentNode.offsetWidth;
 

packages/main/test/pages/SegmentedButton.html

@@ -88,5 +88,22 @@ <h1>SegmentedButton wrapped in a container with set width</h1>
 			</div>
 		</div>
 	</section>
+
+	<section>
+		<h3>Initial focus test</h3>
+		<p>the focus hould go to the first button</p>
+		<ui5-button id="button1">Press</ui5-button>
+		<ui5-segmentedbutton id="testSB1">
+			<ui5-togglebutton id="testSB1ToggleBtn" icon="employee"></ui5-togglebutton>
+			<ui5-togglebutton icon="menu"></ui5-togglebutton>
+			<ui5-togglebutton icon="accept"></ui5-togglebutton>
+		</ui5-segmentedbutton>
+		<ui5-button id="button2">Press</ui5-button>
+		<ui5-segmentedbutton id="testSB2">
+			<ui5-togglebutton icon="employee"></ui5-togglebutton>
+			<ui5-togglebutton id="testSB2ToggleBtn" icon="menu" pressed></ui5-togglebutton>
+			<ui5-togglebutton icon="accept"></ui5-togglebutton>
+		</ui5-segmentedbutton>
+	</section>
 </body>
 </html>

packages/main/test/specs/SegmentedButton.spec.js

@@ -32,4 +32,19 @@ describe("SegmentedButton general interaction", () => {
 		assert.ok(toggleButton4.getProperty("pressed"), "ToggleButton has property pressed");
 
 	});
+
+	it("tests initial focus", () => {
+		const button1 =  browser.$("#button1");
+		const button2 =  browser.$("#button2");
+		const toggleButton1 =  browser.$("#testSB1ToggleBtn");
+		const toggleButton2 =  browser.$("#testSB2ToggleBtn");
+
+		button1.click();
+		button1.keys("Tab");
+		assert.ok(toggleButton1.isFocused(), "The first ToggleButton should be focused.");
+
+		button2.click();
+		button2.keys("Tab");
+		assert.ok(toggleButton2.isFocused(), "The selected ToggleButton should be focused.");
+	});
 });