feat(ui5-segmented-button-item): introduce new component to serve as child of SegmentedButton

package.json

@@ -65,6 +65,7 @@
     "prerelease": "node ./.github/actions/pre-release.js"
   },
   "devDependencies": {
+    "chromedriver": "^91.0.0",
     "command-line-args": "^5.1.1",
     "cross-env": "^7.0.3",
     "glob-promise": "^4.1.0",

packages/main/src/SegmentedButton.hbs

@@ -1,5 +1,7 @@
 <ul
 	@click="{{_onclick}}"
+    @keydown="{{_onkeydown}}"
+    @keyup="{{_onkeyup}}"
 	@focusin="{{_onfocusin}}"
 	class="ui5-segmented-button-root"
 	role="listbox"

packages/main/src/SegmentedButton.js

@@ -5,6 +5,7 @@ import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { SEGMENTEDBUTTON_ARIA_DESCRIPTION, SEGMENTEDBUTTON_ARIA_DESCRIBEDBY } from "./generated/i18n/i18n-defaults.js";
 import SegmentedButtonItem from "./SegmentedButtonItem.js";
 
@@ -180,7 +181,7 @@ class SegmentedButton extends UI5Element {
 		}
 	}
 
-	_onclick(event) {
+	_selectButton(event) {
 		if (event.target.disabled || event.target === this.getDomRef()) {
 			return;
 		}
@@ -201,6 +202,24 @@ class SegmentedButton extends UI5Element {
 		return this;
 	}
 
+	_onclick(event) {
+		this._selectButton(event);
+	}
+
+	_onkeydown(event) {
+		if (isEnter(event)) {
+			this._selectButton(event);
+		} else if (isSpace(event)) {
+			event.preventDefault();
+		}
+	}
+
+	_onkeyup(event) {
+		if (isSpace(event)) {
+			this._selectButton(event);
+		}
+	}
+
 	_onfocusin(event) {
 		// If the component was previously focused,
 		// update the ItemNavigation to sync butons` tabindex values

packages/main/src/SegmentedButtonItem.js

@@ -11,68 +11,55 @@ const metadata = {
 	tag: "ui5-segmented-button-item",
 	properties: /** @lends  sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ {
 		/**
-		 * Defines the <code>ui5-button</code> design.
+		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
 		 *
-		 * <br><br>
-		 * <b>Note:</b>
-		 *
-		 * <ul>
-		 * <li><code>Default</code></li>
-		 * <li><code>Emphasized</code></li>
-		 * <li><code>Positive</code></li>
-		 * <li><code>Negative</code></li>
-		 * <li><code>Transparent</code></li>
-		 * </ul>
-		 *
-		 * @type {ButtonDesign}
-		 * @defaultvalue "Default"
-		 * @private
+		 * @public
 		 */
 		design: {
 			type: ButtonDesign,
 			defaultValue: ButtonDesign.Default,
 		},
 
 		/**
-		 * Defines whether the icon should be displayed after the <code>ui5-button</code> text.
+		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
 		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @private
+		 * @public
 		 */
 		iconEnd: {
 			type: Boolean,
 		},
 
 		/**
-		 * Defines the size of the icon inside the <code>ui5-button</code>.
+		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
 		 *
-		 * @type {string}
-		 * @defaultvalue undefined
-		 * @private
+		 * @public
 		 */
 		iconSize: {
 			type: String,
 			defaultValue: undefined,
 		},
 
 		/**
-		 * When set to <code>true</code>, the <code>ui5-button</code> will
-		 * automatically submit the nearest form element upon <code>press</code>.
-		 * <br><br>
-		 * <b>Important:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:
-		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
+		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
 		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @private
+		 * @public
 		 */
 		submits: {
 			type: Boolean,
 		},
 
+		/**
+		 * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
+		 *
+		 * @public
+		 */
+		pressed: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines the index of the item inside of the SegmentedButton.
+		 *
 		 * @private
 		 * @type {String}
 		 */
@@ -82,6 +69,7 @@ const metadata = {
 
 		/**
 		 * Defines how many items are inside of the SegmentedButton.
+		 *
 		 * @private
 		 * @type {String}
 		 */

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

@@ -12,14 +12,37 @@ describe("SegmentedButton general interaction", () => {
 		assert.ok(segmentedButtonItem.getProperty("pressed"), "SegmentedButtonItem has property pressed");
 	});
 
-	it("tests if pressed attribute is switched to the newly pressed button", () => {
+	it("tests if pressed attribute is switched to the newly pressed button when selected with enter key", () => {
 		const firstSegmentedButtonItem =  browser.$("#segButton1 > ui5-segmented-button-item:first-child");
+		const secondSegmentedButtonItem =  browser.$("#segButton1 > ui5-segmented-button-item:nth-child(2)");
+
+		firstSegmentedButtonItem.click();
+		firstSegmentedButtonItem.keys("ArrowRight");
+		browser.keys("Enter");
+
+		assert.ok(!firstSegmentedButtonItem.getProperty("pressed"), "First SegmentedButtonItem should not be pressed anymore");
+		assert.ok(secondSegmentedButtonItem.getProperty("pressed"), "Second SegmentedButtonItem has property pressed");
+	});
+
+	it("tests if pressed attribute is switched to the newly pressed button when selected with space key", () => {
+		const secondSegmentedButtonItem =  browser.$("#segButton1 > ui5-segmented-button-item:nth-child(2)");
 		const lastSegmentedButtonItem =  browser.$("#segButton1 > ui5-segmented-button-item:last-child");
 
-		lastSegmentedButtonItem.click();
+		secondSegmentedButtonItem.keys("ArrowRight");
+		browser.keys("Space");
 
+		assert.ok(!secondSegmentedButtonItem.getProperty("pressed"), "Second SegmentedButtonItem should not be pressed anymore");
 		assert.ok(lastSegmentedButtonItem.getProperty("pressed"), "Last SegmentedButtonItem has property pressed");
-		assert.ok(!firstSegmentedButtonItem.getProperty("pressed"), "First SegmentedButtonItem should not be pressed anymore");
+	});
+
+	it("tests if pressed attribute is switched to the newly pressed button when selected with mouse", () => {
+		const firstSegmentedButtonItem =  browser.$("#segButton1 > ui5-segmented-button-item:first-child");
+		const lastSegmentedButtonItem =  browser.$("#segButton1 > ui5-segmented-button-item:last-child");
+
+		firstSegmentedButtonItem.click();
+
+		assert.ok(firstSegmentedButtonItem.getProperty("pressed"), "First SegmentedButtonItem has property pressed");
+		assert.ok(!lastSegmentedButtonItem.getProperty("pressed"), "Last SegmentedButtonItem should not be pressed anymore");
 	});
 
 	it("tests if pressed attribute is applied only to last child when all buttons are pressed", () => {

yarn.lock

@@ -2567,6 +2567,19 @@ [email protected]:
     proxy-from-env "^1.1.0"
     tcp-port-used "^1.0.1"
 
+chromedriver@^91.0.0:
+  version "91.0.0"
+  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-91.0.0.tgz#b8c07d715c1bde2ed5817757e923bd65565c8f94"
+  integrity sha512-0eQGLDWvfVd1apkqQpt4452bCATrsj50whhVzMqPiazNSfCXXwfYWRonYxx3DVFCG3+RwSCLvsk8/vpuojCyJA==
+  dependencies:
+    "@testim/chrome-version" "^1.0.7"
+    axios "^0.21.1"
+    del "^6.0.0"
+    extract-zip "^2.0.1"
+    https-proxy-agent "^5.0.0"
+    proxy-from-env "^1.1.0"
+    tcp-port-used "^1.0.1"
+
 circular-json@^0.3.1:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"