diff --git a/packages/fiori/test/specs/Wizard.spec.js b/packages/fiori/test/specs/Wizard.spec.js index 12885ef9ea0f..5f34025d90a3 100644 --- a/packages/fiori/test/specs/Wizard.spec.js +++ b/packages/fiori/test/specs/Wizard.spec.js @@ -134,15 +134,15 @@ describe("Wizard general interaction", () => { assert.strictEqual(await step1InHeader.getAttribute("disabled"), null, "First step in header is enabled."); - assert.ok(await firstFocusableElement.getProperty("focused"), "The First focusable element in the step content is focused."); + assert.ok(await firstFocusableElement.matches(":focus"), "The First focusable element in the step content is focused."); await step1InHeader.keys(["Shift", "Tab"]); await step2InHeader.keys("Space"); - assert.ok(await firstFocusableElement.getProperty("focused"), "The First focusable element in the step content is focused."); + assert.ok(await firstFocusableElement.matches(":focus"), "The First focusable element in the step content is focused."); await step1InHeader.keys(["Shift", "Tab"]); await step2InHeader.keys("Enter"); - assert.ok(await firstFocusableElement.getProperty("focused"), "The First focusable element in the step content is focused."); + assert.ok(await firstFocusableElement.matches(":focus"), "The First focusable element in the step content is focused."); // assert - that second step in the content and in the header are not selected assert.strictEqual(await step2.getAttribute("selected"), null, diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts index 421fec1b057e..5abaef3f4c25 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -21,9 +21,6 @@ import { markEvent } from "@ui5/webcomponents-base/dist/MarkedEvents.js"; import { getIconAccessibleName } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js"; import { - isPhone, - isTablet, - isCombi, isDesktop, isSafari, } from "@ui5/webcomponents-base/dist/Device.js"; @@ -258,13 +255,6 @@ class Button extends UI5Element implements IFormElement, IButton { @property({ type: Boolean }) iconOnly!: boolean; - /** - * Indicates if the elements is on focus - * @private - */ - @property({ type: Boolean }) - focused!: boolean; - /** * Indicates if the elements has a slotted icon * @private @@ -273,7 +263,7 @@ class Button extends UI5Element implements IFormElement, IButton { hasIcon!: boolean; /** - * Indicates if the element if focusable + * Indicates if the element is focusable * @private */ @property({ type: Boolean }) @@ -356,7 +346,9 @@ class Button extends UI5Element implements IFormElement, IButton { } onEnterDOM() { - this._isTouch = (isPhone() || isTablet()) && !isCombi(); + if (isDesktop()) { + this.setAttribute("desktop", ""); + } } async onBeforeRendering() { @@ -394,7 +386,7 @@ class Button extends UI5Element implements IFormElement, IButton { } _onmousedown(e: MouseEvent) { - if (this.nonInteractive || this._isTouch) { + if (this.nonInteractive) { return; } @@ -453,10 +445,6 @@ class Button extends UI5Element implements IFormElement, IButton { if (this.active) { this._setActiveState(false); } - - if (isDesktop()) { - this.focused = false; - } } _onfocusin(e: FocusEvent) { @@ -465,9 +453,6 @@ class Button extends UI5Element implements IFormElement, IButton { } markEvent(e, "button"); - if (isDesktop()) { - this.focused = true; - } } _setActiveState(active: boolean) { diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index 072bb32bee82..311931cc4afd 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -232,7 +232,6 @@ class SegmentedButton extends UI5Element { } if (isTargetSegmentedButtonItem) { - eventTarget.focus(); this._itemNavigation.setCurrentItem(eventTarget); this.hasPreviouslyFocusedItem = true; } diff --git a/packages/main/src/SplitButton.hbs b/packages/main/src/SplitButton.hbs index 4490c70f945c..7b95c5e840d6 100644 --- a/packages/main/src/SplitButton.hbs +++ b/packages/main/src/SplitButton.hbs @@ -20,29 +20,29 @@ @touchstart={{_textButtonPress}} @mousedown={{_textButtonPress}} @mouseup={{_textButtonRelease}} - @focusin={{_textButtonFocusIn}} + @focusin={{_onInnerButtonFocusIn}} @focusout={{_onFocusOut}} > {{#if isTextButton}} {{/if}} - - + + {{accInfo.root.description}} {{accInfo.root.keyboardHint}} {{accessibleName}} {{textButtonAccText}} diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts index 5b261a53089c..0fcb97d8fabb 100644 --- a/packages/main/src/SplitButton.ts +++ b/packages/main/src/SplitButton.ts @@ -157,14 +157,6 @@ class SplitButton extends UI5Element { @property({ defaultValue: undefined }) accessibleName?: string; - /** - * Indicates if the elements is on focus - * @default false - * @private - */ - @property({ type: Boolean }) - focused!: boolean; - /** * Accessibility-related properties for inner elements of the Split Button * @private @@ -229,7 +221,7 @@ class SplitButton extends UI5Element { @slot({ type: Node, "default": true }) text!: Array; - _textButtonPress: { handleEvent: () => void, passive: boolean }; + _textButtonPress: { handleEvent: (e: MouseEvent) => void, passive: boolean }; _isDefaultActionPressed = false; _isKeyDownOperation = false; @@ -242,9 +234,9 @@ class SplitButton extends UI5Element { constructor() { super(); - const handleTouchStartEvent = () => { + const handleTouchStartEvent = (e: MouseEvent) => { + e.stopPropagation(); this._textButtonActive = true; - this.focused = false; this._tabIndex = "-1"; }; @@ -254,18 +246,6 @@ class SplitButton extends UI5Element { }; } - /** - * Function that makes sure the focus is properly managed. - * @private - */ - _manageFocus(button?: Button | SplitButton) { - const buttons: Array