diff --git a/docs/Public Module Imports.md b/docs/Public Module Imports.md index 332a4eb0d24a..37d8a0c6cbae 100644 --- a/docs/Public Module Imports.md +++ b/docs/Public Module Imports.md @@ -59,6 +59,7 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou | Select | `ui5-select` | `import "@ui5/webcomponents/dist/Select.js";` | | Select Option | `ui5-option` | comes with `ui5-select ` | | Segmented Button | `ui5-segmented-button` | `import "@ui5/webcomponents/dist/SegmentedButton.js";` | +| Segmented Button Item | `ui5-segmented-button-item`| comes with `ui5-segmented-button ` | | Suggestion Item | `ui5-suggestion-item` | comes with `InputSuggestions.js` feature - see below | | Slider | `ui5-slider` | `import "@ui5/webcomponents/dist/Slider.js";` | | Step Input | `ui5-step-input` | `import "@ui5/webcomponents/dist/StepInput.js";` | diff --git a/packages/main/bundle.common.js b/packages/main/bundle.common.js index 27531f507fcf..2b0b47eb9cef 100644 --- a/packages/main/bundle.common.js +++ b/packages/main/bundle.common.js @@ -58,6 +58,7 @@ import Panel from "./dist/Panel.js"; import RadioButton from "./dist/RadioButton.js"; import ResponsivePopover from "./dist/ResponsivePopover.js"; import SegmentedButton from "./dist/SegmentedButton.js"; +import SegmentedButtonItem from "./dist/SegmentedButtonItem.js"; import Select from "./dist/Select.js"; import Slider from "./dist/Slider.js"; import StepInput from "./dist/StepInput.js"; diff --git a/packages/main/src/SegmentedButton.hbs b/packages/main/src/SegmentedButton.hbs index 6f00ec8b6269..9ca8613abe70 100644 --- a/packages/main/src/SegmentedButton.hbs +++ b/packages/main/src/SegmentedButton.hbs @@ -1,10 +1,17 @@ -
-
+ + {{ariaDescribedBy}} + + diff --git a/packages/main/src/SegmentedButton.js b/packages/main/src/SegmentedButton.js index 30f9da7c3091..83a9c2e53f22 100644 --- a/packages/main/src/SegmentedButton.js +++ b/packages/main/src/SegmentedButton.js @@ -5,8 +5,9 @@ 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 { SEGMENTEDBUTTON_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js"; -import ToggleButton from "./ToggleButton.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"; // Template import SegmentedButtonTemplate from "./generated/templates/SegmentedButtonTemplate.lit.js"; @@ -26,32 +27,32 @@ const metadata = { slots: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */ { /** - * Defines the buttons of component. + * Defines the items of ui5-segmented-button. *

- * Note: Multiple buttons are allowed. + * Note: Multiple items are allowed. *

- * Note: Use the ui5-toggle-button for the intended design. + * Note: Use the ui5-segmented-button-item for the intended design. * @type {sap.ui.webcomponents.main.IButton[]} - * @slot buttons + * @slot items * @public */ "default": { - propertyName: "buttons", + propertyName: "items", type: HTMLElement, }, }, events: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */ { /** - * Fired when the selected button changes. + * Fired when the selected item changes. * * @event sap.ui.webcomponents.main.SegmentedButton#selection-change - * @param {HTMLElement} selectedButton the pressed button. + * @param {HTMLElement} selectedItem the pressed item. * @public */ "selection-change": { detail: { - selectedButton: { type: HTMLElement }, + selectedItem: { type: HTMLElement }, }, }, }, @@ -62,11 +63,11 @@ const metadata = { * *

Overview

* - * The ui5-segmented-button shows a group of buttons. When the user clicks or taps - * one of the buttons, it stays in a pressed state. It automatically resizes the buttons + * The ui5-segmented-button shows a group of items. When the user clicks or taps + * one of the items, it stays in a pressed state. It automatically resizes the items * to fit proportionally within the component. When no width is set, the component uses the available width. *

- * Note: There can be just one selected button at a time. + * Note: There can be just one selected item at a time. * *

ES6 Module Import

* @@ -78,6 +79,7 @@ const metadata = { * @extends sap.ui.webcomponents.base.UI5Element * @tagname ui5-segmented-button * @since 1.0.0-rc.6 + * @appenddocs SegmentedButtonItem * @public */ class SegmentedButton extends UI5Element { @@ -98,7 +100,7 @@ class SegmentedButton extends UI5Element { } static get dependencies() { - return [ToggleButton]; + return [SegmentedButtonItem]; } static async onDefine() { @@ -109,7 +111,7 @@ class SegmentedButton extends UI5Element { super(); this._itemNavigation = new ItemNavigation(this, { - getItemsCallback: () => this.getSlottedNodes("buttons"), + getItemsCallback: () => this.getSlottedNodes("items"), }); this.absoluteWidthSet = false; // set to true whenever we set absolute width to the component @@ -129,6 +131,13 @@ class SegmentedButton extends UI5Element { } onBeforeRendering() { + const items = this.getSlottedNodes("items"); + + items.forEach((item, index, arr) => { + item.posInSet = index + 1; + item.sizeOfSet = arr.length; + }); + this.normalizeSelection(); } @@ -136,24 +145,24 @@ class SegmentedButton extends UI5Element { await this._doLayout(); } - prepareToMeasureButtons() { + prepareToMeasureItems() { this.style.width = ""; - this.buttons.forEach(button => { - button.style.width = ""; + this.items.forEach(item => { + item.style.width = ""; }); } - async measureButtonsWidth() { + async measureItemsWidth() { await renderFinished(); - this.prepareToMeasureButtons(); + this.prepareToMeasureItems(); - this.widths = this.buttons.map(button => { + this.widths = this.items.map(item => { // +1 is added because for width 100.44px the offsetWidth property returns 100px and not 101px - let width = button.offsetWidth + 1; + let width = item.offsetWidth + 1; if (isIE()) { - // in IE we are adding 1 one px beacause the width of the border on a button in the middle is not calculated and if the - // longest button is in the middle, it truncates + // in IE we are adding 1 one px beacause the width of the border on an item in the middle is not calculated and if the + // longest item is in the middle, it truncates width += 1; } @@ -162,37 +171,55 @@ class SegmentedButton extends UI5Element { } normalizeSelection() { - this._selectedButton = this.buttons.filter(button => button.pressed).pop(); + this._selectedItem = this.items.filter(item => item.pressed).pop(); - if (this._selectedButton) { - this.buttons.forEach(button => { - button.pressed = false; + if (this._selectedItem) { + this.items.forEach(item => { + item.pressed = false; }); - this._selectedButton.pressed = true; + this._selectedItem.pressed = true; } } - _onclick(event) { + _selectItem(event) { if (event.target.disabled || event.target === this.getDomRef()) { return; } - if (event.target !== this._selectedButton) { - if (this._selectedButton) { - this._selectedButton.pressed = false; + if (event.target !== this._selectedItem) { + if (this._selectedItem) { + this._selectedItem.pressed = false; } - this._selectedButton = event.target; + this._selectedItem = event.target; this.fireEvent("selection-change", { - selectedButton: this._selectedButton, + selectedItem: this._selectedItem, }); } - this._selectedButton.pressed = true; - this._itemNavigation.setCurrentItem(this._selectedButton); + this._selectedItem.pressed = true; + this._itemNavigation.setCurrentItem(this._selectedItem); return this; } + _onclick(event) { + this._selectItem(event); + } + + _onkeydown(event) { + if (isEnter(event)) { + this._selectItem(event); + } else if (isSpace(event)) { + event.preventDefault(); + } + } + + _onkeyup(event) { + if (isSpace(event)) { + this._selectItem(event); + } + } + _onfocusin(event) { // If the component was previously focused, // update the ItemNavigation to sync butons` tabindex values @@ -203,28 +230,28 @@ class SegmentedButton extends UI5Element { // If the component is focused for the first time // focus the selected item if such present - if (this.selectedButton) { - this.selectedButton.focus(); - this._itemNavigation.setCurrentItem(this._selectedButton); + if (this.selectedItem) { + this.selectedItem.focus(); + this._itemNavigation.setCurrentItem(this._selectedItem); this.hasPreviouslyFocusedItem = true; } } async _doLayout() { - const buttonsHaveWidth = this.widths && this.widths.some(button => button.offsetWidth > 2); // 2 are the pixel's added for rounding & IE - if (!buttonsHaveWidth) { - await this.measureButtonsWidth(); + const itemsHaveWidth = this.widths && this.widths.some(item => item.offsetWidth > 2); // 2 are the pixel's added for rounding & IE + if (!itemsHaveWidth) { + await this.measureItemsWidth(); } const parentWidth = this.parentNode.offsetWidth; if (!this.style.width || this.percentageWidthSet) { - this.style.width = `${Math.max(...this.widths) * this.buttons.length}px`; + this.style.width = `${Math.max(...this.widths) * this.items.length}px`; this.absoluteWidthSet = true; } - this.buttons.forEach(button => { - button.style.width = "100%"; + this.items.forEach(item => { + item.style.width = "100%"; }); if (parentWidth <= this.offsetWidth && this.absoluteWidthSet) { @@ -234,14 +261,18 @@ class SegmentedButton extends UI5Element { } /** - * Currently selected button. + * Currently selected item. * * @readonly - * @type { ui5-toggle-button } + * @type { ui5-segmented-button-item } * @public */ - get selectedButton() { - return this._selectedButton; + get selectedItem() { + return this._selectedItem; + } + + get ariaDescribedBy() { + return this.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIBEDBY); } get ariaDescription() { diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs new file mode 100644 index 000000000000..ba5f22fc3325 --- /dev/null +++ b/packages/main/src/SegmentedButtonItem.hbs @@ -0,0 +1,42 @@ +
  • ariaPressed}} + dir="{{effectiveDir}}" + @focusout={{_onfocusout}} + @focusin={{_onfocusin}} + @click={{_onclick}} + @mousedown={{_onmousedown}} + @mouseup={{_onmouseup}} + @keydown={{_onkeydown}} + @keyup={{_onkeyup}} + @touchstart="{{_ontouchstart}}" + @touchend="{{_ontouchend}}" + tabindex={{tabIndexValue}} + aria-label="{{ariaLabelText}}" + title="{{accInfo.title}}" +> + {{#if icon}} + + {{/if}} + + + + + + + +
    • + +{{#*inline "ariaPressed"}}{{/inline}} diff --git a/packages/main/src/SegmentedButtonItem.js b/packages/main/src/SegmentedButtonItem.js new file mode 100644 index 000000000000..9fd97862c521 --- /dev/null +++ b/packages/main/src/SegmentedButtonItem.js @@ -0,0 +1,112 @@ +import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js"; +import ToggleButton from "./ToggleButton.js"; +import ButtonDesign from "./types/ButtonDesign.js"; + +import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js"; + +/** + * @public + */ +const metadata = { + tag: "ui5-segmented-button-item", + properties: /** @lends sap.ui.webcomponents.main.SegmentedButtonItem.prototype */ { + /** + * Note: The property is inherited and not supported. If set, it won't take any effect. + * + * @public + */ + design: { + type: ButtonDesign, + defaultValue: ButtonDesign.Default, + }, + + /** + * Note: The property is inherited and not supported. If set, it won't take any effect. + * + * @public + */ + iconEnd: { + type: Boolean, + }, + + /** + * Note: The property is inherited and not supported. If set, it won't take any effect. + * + * @public + */ + iconSize: { + type: String, + defaultValue: undefined, + }, + + /** + * Note: The property is inherited and not supported. If set, it won't take any effect. + * + * @public + */ + submits: { + type: Boolean, + }, + + /** + * Defines the index of the item inside of the SegmentedButton. + * + * @private + * @type {String} + */ + posInSet: { + type: String, + }, + + /** + * Defines how many items are inside of the SegmentedButton. + * + * @private + * @type {String} + */ + sizeOfSet: { + type: String, + }, + }, +}; + +/** + * @class + * + *

    Overview

    + * + * Users can use the ui5-segmented-button-item as part of a ui5-segmented-button. + *

    + * Clicking or tapping on a ui5-segmented-button-item changes its state to pressed. + * The item returns to its initial state when the user clicks or taps on it again. + * By applying additional custom CSS-styling classes, apps can give a different style to any + * ui5-segmented-button-item. + * + *

    ES6 Module Import

    + * + * import "@ui5/webcomponents/dist/SegmentedButtonItem"; + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.SegmentedButtonItem + * @extends ToggleButton + * @tagname ui5-segmented-button-item + * @public + */ +class SegmentedButtonItem extends ToggleButton { + static get metadata() { + return metadata; + } + + static get template() { + return SegmentedButtonItemTemplate; + } + + get ariaDescription() { + return this.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION); + } +} + +SegmentedButtonItem.define(); + +export default SegmentedButtonItem; diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index 2d015abfe96a..ed43c9d7fded 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -164,7 +164,13 @@ RATING_INDICATOR_TEXT=Rating Indicator RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=Decline #XACT: ARIA description for the segmented button -SEGMENTEDBUTTON_ARIA_DESCRIPTION=Segmented button +SEGMENTEDBUTTON_ARIA_DESCRIPTION=Segmented button group + +#XACT: ARIA described by for the segmented button +SEGMENTEDBUTTON_ARIA_DESCRIBEDBY=Press SPACE or ENTER to select an item + +#XACT: ARIA description for the segmented button item +SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Segmented button #XACT: ARIA description for slider handle SLIDER_ARIA_DESCRIPTION=Slider handle diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css index 232eecaa8da7..d04924f9826e 100644 --- a/packages/main/src/themes/SegmentedButton.css +++ b/packages/main/src/themes/SegmentedButton.css @@ -1,12 +1,16 @@ +@import "./InvisibleTextStyles.css"; + :host(:not([hidden])) { display: inline-block; } .ui5-segmented-button-root { display: flex; + margin: 0; + padding: 0; } -::slotted([ui5-toggle-button]) { +::slotted([ui5-segmented-button-item]) { border-radius: 0; height: var(--_ui5_button_base_height); min-width: 2.5rem; @@ -15,25 +19,25 @@ text-overflow: ellipsis; } -::slotted([ui5-toggle-button]:nth-child(odd)) { +::slotted([ui5-segmented-button-item]:nth-child(odd)) { border: 1px solid var(--sapButton_Selected_BorderColor); border-right: 0; border-left: 0; } -::slotted([ui5-toggle-button]:last-child) { +::slotted([ui5-segmented-button-item]:last-child) { border-top-right-radius: var(--_ui5_segmented_btn_border_radius); border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius); border-right: 1px solid var(--sapButton_Selected_BorderColor); } -::slotted([ui5-toggle-button]:first-child) { +::slotted([ui5-segmented-button-item]:first-child) { border-top-left-radius: var(--_ui5_segmented_btn_border_radius); border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius); border-left: 1px solid var(--sapButton_Selected_BorderColor); } -[dir="rtl"] ::slotted([ui5-toggle-button]:first-child) { +[dir="rtl"] ::slotted([ui5-segmented-button-item]:first-child) { border-top-right-radius: var(--_ui5_segmented_btn_border_radius); border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius); border-top-left-radius: 0; @@ -41,7 +45,7 @@ border-right: 1px solid var(--sapButton_Selected_BorderColor); } -[dir="rtl"] ::slotted([ui5-toggle-button]:last-child) { +[dir="rtl"] ::slotted([ui5-segmented-button-item]:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--_ui5_segmented_btn_border_radius); @@ -49,7 +53,7 @@ border-left: 1px solid var(--sapButton_Selected_BorderColor); } -[dir="rtl"] ::slotted([ui5-toggle-button]:only-child) { +[dir="rtl"] ::slotted([ui5-segmented-button-item]:only-child) { border-top-right-radius: var(--_ui5_segmented_btn_border_radius); border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius); border-top-left-radius: var(--_ui5_segmented_btn_border_radius); diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html index 81b276f82de9..1378660771fa 100644 --- a/packages/main/test/pages/SegmentedButton.html +++ b/packages/main/test/pages/SegmentedButton.html @@ -26,37 +26,37 @@

    ui5-segmented-button

    Segmentedbutton example

    - Button + Item
    - - ToggleButton - Button + + SegmentedButtonItem + Item
    -

    Example with 4 buttons

    +

    Example with 4 items

    - Button - Button - Click - Pressed ToggleButton + Item + Item + Click + Pressed SegmentedButtonItem
    -

    Example with 5 buttons

    +

    Example with 5 items

    - Word - Pressed ToggleButton With Bigger Text - Button - Pressed ToggleButton - A + Word + Pressed SegmentedButtonItem With Bigger Text + Item + Pressed SegmentedButtonItem + A
    @@ -64,9 +64,9 @@

    Example with 5 buttons

    Example with Icons and custom width

    - - - + + + @@ -74,9 +74,9 @@

    Example with Icons and custom width

    SegmentedButton with 100% width

    - Pressed ToggleButton - ToggleButton - ToggleButton + Pressed SegmentedButtonItem + SegmentedButtonItem + SegmentedButtonItem @@ -84,9 +84,9 @@

    SegmentedButton with 100% width

    SegmentedButton wrapped in a container with set width

    - - - + + +
    @@ -96,18 +96,18 @@

    SegmentedButton wrapped in a container with set width

    Initial focus test

    -

    the focus hould go to the first button

    +

    the focus should go to the first item

    Press - - - + + + Press - - - + + +
    diff --git a/packages/main/test/samples/SegmentedButton.sample.html b/packages/main/test/samples/SegmentedButton.sample.html index 7baaeefc2797..03ab72122891 100644 --- a/packages/main/test/samples/SegmentedButton.sample.html +++ b/packages/main/test/samples/SegmentedButton.sample.html @@ -13,16 +13,16 @@

    SegmentedButton

    Basic SegmentedButton

    - Map - Satellite - Terrain + Map + Satellite + Terrain 
    
 <ui5-segmented-button>
-    <ui5-toggle-button>Map</ui5-toggle-button>
-    <ui5-toggle-button pressed>Satellite</ui5-toggle-button>
-    <ui5-toggle-button>Terrain</ui5-toggle-button>
+    <ui5-segmented-button-item>Map</ui5-segmented-button-item>
+    <ui5-segmented-button-item pressed>Satellite</ui5-segmented-button-item>
+    <ui5-segmented-button-item>Terrain</ui5-segmented-button-item>
 </ui5-segmented-button>
    @@ -31,38 +31,38 @@

    Basic SegmentedButton

    SegmentedButton with Icons

    - - - + + + 
    
 <ui5-segmented-button>
-    <ui5-toggle-button icon="employee" pressed></ui5-toggle-button>
-    <ui5-toggle-button icon="menu"></ui5-toggle-button>
-    <ui5-toggle-button icon="factory"></ui5-toggle-button>
+    <ui5-segmented-button-item icon="employee" pressed></ui5-segmented-button-item>
+    <ui5-segmented-button-item icon="menu"></ui5-segmented-button-item>
+    <ui5-segmented-button-item icon="factory"></ui5-segmented-button-item>
 </ui5-segmented-button>
    -

    SegmentedButton with 5 ToggleButtons

    +

    SegmentedButton with 5 SegmentedButtonItems

    - Button - Pressed ToggleButton With Bigger Text - Button - Pressed ToggleButton - Press me + Item + Pressed SegmentedButtonItem With Bigger Text + Item + Pressed SegmentedButtonItem + Press me 
    
 <ui5-segmented-button>
-    <ui5-toggle-button>Button</ui5-toggle-button>
-    <ui5-toggle-button pressed>Pressed ToggleButton With Bigger Text</ui5-toggle-button>
-    <ui5-toggle-button>Button</ui5-toggle-button>
-    <ui5-toggle-button>ToggleButton</ui5-toggle-button>
-    <ui5-toggle-button>Press me</ui5-toggle-button>
+    <ui5-segmented-button-item>Item</ui5-segmented-button-item>
+    <ui5-segmented-button-item pressed>Pressed SegmentedButtonItem With Bigger Text</ui5-segmented-button-item>
+    <ui5-segmented-button-item>Item</ui5-segmented-button-item>
+    <ui5-segmented-button-item>SegmentedButtonItem</ui5-segmented-button-item>
+    <ui5-segmented-button-item>Press me</ui5-segmented-button-item>
 </ui5-segmented-button>
    diff --git a/packages/main/test/specs/SegmentedButton.spec.js b/packages/main/test/specs/SegmentedButton.spec.js index 98bd3d64fed4..1bf3969130e0 100644 --- a/packages/main/test/specs/SegmentedButton.spec.js +++ b/packages/main/test/specs/SegmentedButton.spec.js @@ -7,47 +7,70 @@ describe("SegmentedButton general interaction", () => { }); it("tests if pressed attribute is applied", () => { - const toggleButton = browser.$("#segButton1 > ui5-toggle-button:first-child"); + const segmentedButtonItem = browser.$("#segButton1 > ui5-segmented-button-item:first-child"); - assert.ok(toggleButton.getProperty("pressed"), "ToggleButton has property pressed"); + assert.ok(segmentedButtonItem.getProperty("pressed"), "SegmentedButtonItem has property pressed"); }); - it("tests if pressed attribute is switched to the newly pressed button", () => { - const firstToggleButton = browser.$("#segButton1 > ui5-toggle-button:first-child"); - const lastToggleButton = browser.$("#segButton1 > ui5-toggle-button:last-child"); + it("tests if pressed attribute is switched to the newly pressed item 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)"); - lastToggleButton.click(); + firstSegmentedButtonItem.click(); + firstSegmentedButtonItem.keys("ArrowRight"); + browser.keys("Enter"); - assert.ok(lastToggleButton.getProperty("pressed"), "Last ToggleButton has property pressed"); - assert.ok(!firstToggleButton.getProperty("pressed"), "First ToggleButton should not be pressed anymore"); + 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 applied only to last child when all buttons are pressed", () => { - const toggleButton1 = browser.$("#segButton2 > ui5-toggle-button:first-child"); - const toggleButton2 = browser.$("#segButton2 > ui5-toggle-button:nth-child(2)"); - const toggleButton3 = browser.$("#segButton2 > ui5-toggle-button:nth-child(3)"); - const toggleButton4 = browser.$("#segButton2 > ui5-toggle-button:last-child"); + it("tests if pressed attribute is switched to the newly pressed item 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"); - // only last button should be pressed - assert.ok(!toggleButton1.getProperty("pressed"), "ToggleButton should not be pressed"); - assert.ok(!toggleButton2.getProperty("pressed"), "ToggleButton should not be pressed"); - assert.ok(!toggleButton3.getProperty("pressed"), "ToggleButton should not be pressed"); - assert.ok(toggleButton4.getProperty("pressed"), "ToggleButton has property pressed"); + 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"); + }); + + it("tests if pressed attribute is switched to the newly pressed item 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 items are pressed", () => { + const segmentedButtonItem1 = browser.$("#segButton2 > ui5-segmented-button-item:first-child"); + const segmentedButtonItem2 = browser.$("#segButton2 > ui5-segmented-button-item:nth-child(2)"); + const segmentedButtonItem3 = browser.$("#segButton2 > ui5-segmented-button-item:nth-child(3)"); + const segmentedButtonItem4 = browser.$("#segButton2 > ui5-segmented-button-item:last-child"); + + // only last item should be pressed + assert.ok(!segmentedButtonItem1.getProperty("pressed"), "SegmentedButtonItem should not be pressed"); + assert.ok(!segmentedButtonItem2.getProperty("pressed"), "SegmentedButtonItem should not be pressed"); + assert.ok(!segmentedButtonItem3.getProperty("pressed"), "SegmentedButtonItem should not be pressed"); + assert.ok(segmentedButtonItem4.getProperty("pressed"), "SegmentedButtonItem has property pressed"); }); it("tests initial focus", () => { const button1 = browser.$("#button1"); const button2 = browser.$("#button2"); - const toggleButton1 = browser.$("#testSB1ToggleBtn"); - const toggleButton2 = browser.$("#testSB2ToggleBtn"); + const segmentedButtonItem1 = browser.$("#testSB1ToggleBtn"); + const segmentedButtonItem2 = browser.$("#testSB2ToggleBtn"); button1.click(); button1.keys("Tab"); - assert.ok(toggleButton1.isFocused(), "The first ToggleButton should be focused."); + assert.ok(segmentedButtonItem1.isFocused(), "The first SegmentedButtonItem should be focused."); button2.click(); button2.keys("Tab"); - assert.ok(toggleButton2.isFocused(), "The selected ToggleButton should be focused."); + assert.ok(segmentedButtonItem2.isFocused(), "The selected SegmentedButtonItem should be focused."); }); });