From 01f5542b8aa1b8c309076ec45b547ce45320d95a Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Wed, 31 Jan 2024 16:06:14 +0200 Subject: [PATCH] fix(ui5-breadcrumbs): render current location as link (#8206) * fix(ui5-breadcrumbs): render current location as link * fix(ui5-breadcrumbs): reload page on current-page item click --- packages/main/src/Breadcrumbs.hbs | 20 +-- packages/main/src/Breadcrumbs.ts | 118 ++---------------- packages/main/src/BreadcrumbsItem.ts | 6 + packages/main/src/themes/Breadcrumbs.css | 17 +-- .../sap_horizon/Breadcrumbs-parameters.css | 2 +- .../Breadcrumbs-parameters.css | 2 +- .../Breadcrumbs-parameters.css | 2 +- .../Breadcrumbs-parameters.css | 2 +- packages/main/test/specs/Breadcrumbs.spec.js | 44 ++++++- 9 files changed, 66 insertions(+), 147 deletions(-) diff --git a/packages/main/src/Breadcrumbs.hbs b/packages/main/src/Breadcrumbs.hbs index b0aeb121457f..d2d975e5b1e0 100644 --- a/packages/main/src/Breadcrumbs.hbs +++ b/packages/main/src/Breadcrumbs.hbs @@ -22,28 +22,16 @@ href="{{this.href}}" target="{{this.target}}" id="{{this._id}}-link" + design="{{this._linkDesign}}" accessible-name="{{this._accessibleNameText}}" data-ui5-stable="{{this.stableDomRef}}"> {{this.innerText}} - + {{#unless this._isCurrentPageItem}} + + {{/unless}} {{/each}} - - {{#if _endsWithCurrentLocationLabel}} -
  • - - - - - {{_currentLocationText}} - - -
    • - {{/if}} \ No newline at end of file diff --git a/packages/main/src/Breadcrumbs.ts b/packages/main/src/Breadcrumbs.ts index 27e39b9089e9..d3e4ffa6ec32 100644 --- a/packages/main/src/Breadcrumbs.ts +++ b/packages/main/src/Breadcrumbs.ts @@ -8,7 +8,6 @@ import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import { - isEnter, isSpace, isShow, } from "@ui5/webcomponents-base/dist/Keys.js"; @@ -29,7 +28,6 @@ import { } from "./generated/i18n/i18n-defaults.js"; import Link from "./Link.js"; import type { LinkClickEventDetail } from "./Link.js"; -import Label from "./Label.js"; import ResponsivePopover from "./ResponsivePopover.js"; import List from "./List.js"; import type { ListSelectionChangeEventDetail } from "./List.js"; @@ -54,10 +52,6 @@ type BreadcrumbsItemClickEventDetail = { shiftKey: boolean; } -type FocusAdaptor = ITabbable & { - getlabelWrapper: () => Element | null; -} - /** * @class * @@ -101,7 +95,6 @@ type FocusAdaptor = ITabbable & { dependencies: [ BreadcrumbsItem, Link, - Label, ResponsivePopover, List, StandardListItem, @@ -194,7 +187,6 @@ class Breadcrumbs extends UI5Element { // the width of the interactive element that opens the overflow _dropdownArrowLinkWidth = 0; responsivePopover?: ResponsivePopover; - _labelFocusAdaptor: FocusAdaptor; static i18nBundle: I18nBundle; constructor() { @@ -206,19 +198,6 @@ class Breadcrumbs extends UI5Element { }); this._onResizeHandler = this._updateOverflow.bind(this); - - this._labelFocusAdaptor = { - id: `${this._id}-labelWrapper`, - getlabelWrapper: this.getCurrentLocationLabelWrapper.bind(this), - set _tabIndex(value: string) { - const wrapper = this.getlabelWrapper(); - wrapper && wrapper.setAttribute("tabindex", value); - }, - get _tabIndex() { - const wrapper = this.getlabelWrapper(); - return wrapper?.getAttribute("tabindex") || ""; - }, - }; } onInvalidation(changeInfo: ChangeInfo) { @@ -275,16 +254,11 @@ class Breadcrumbs extends UI5Element { items.unshift(this._dropdownArrowLink); } - if (this._endsWithCurrentLocationLabel) { - items.push(this._labelFocusAdaptor); - } return items; } _onfocusin(e: FocusEvent) { - const target = e.target, - labelWrapper = this.getCurrentLocationLabelWrapper(), - currentItem = (target === labelWrapper) ? this._labelFocusAdaptor : target as Link; + const currentItem = e.target as Link; this._itemNavigation.setCurrentItem(currentItem); } @@ -299,10 +273,6 @@ class Breadcrumbs extends UI5Element { } if (isSpace(e) && isDropdownArrowFocused && !this._isOverflowEmpty && !this._isPickerOpen) { e.preventDefault(); - return; - } - if ((isEnter(e) || isSpace(e)) && this._isCurrentLocationLabelFocused) { - this._onLabelPress(e); } } @@ -318,8 +288,7 @@ class Breadcrumbs extends UI5Element { */ _cacheWidths() { const map = this._breadcrumbItemWidths, - items = this._getItems(), - label = this._currentLocationLabel; + items = this._getItems(); for (let i = this._overflowSize; i < items.length; i++) { const item = items[i], @@ -327,12 +296,6 @@ class Breadcrumbs extends UI5Element { map.set(item, this._getElementWidth(link)); } - if (items.length && this._endsWithCurrentLocationLabel && label) { - const item = items[items.length - 1]; - - map.set(item, this._getElementWidth(label)); - } - if (!this._isOverflowEmpty) { const arrow = this.shadowRoot!.querySelector(".ui5-breadcrumbs-dropdown-arrow-link-wrapper")!; this._dropdownArrowLinkWidth = this._getElementWidth(arrow); @@ -413,26 +376,12 @@ class Breadcrumbs extends UI5Element { shiftKey, }, true)) { e.preventDefault(); + return; } - } - _onLabelPress(e: MouseEvent | KeyboardEvent) { - const items = this._getItems(), - item = items[items.length - 1], - { - altKey, - ctrlKey, - metaKey, - shiftKey, - } = e; - - this.fireEvent("item-click", { - item, - altKey, - ctrlKey, - metaKey, - shiftKey, - }); + if (item._isCurrentPageItem) { + window.location.reload(); + } } _onOverflowListItemSelect(e: CustomEvent) { @@ -505,44 +454,20 @@ class Breadcrumbs extends UI5Element { return text; } - getCurrentLocationLabelWrapper() { - return this.shadowRoot!.querySelector(".ui5-breadcrumbs-current-location > span"); - } - get _visibleItems() { return this._getItems() .slice(this._overflowSize) .filter(i => this._isItemVisible(i)); } - get _endsWithCurrentLocationLabel() { + get _endsWithCurrentPageItem() { return this.design === BreadcrumbsDesign.Standard; } - get _currentLocationText() { - const items = this._getItems(); - if (this._endsWithCurrentLocationLabel && items.length) { - const item = items[items.length - 1]; - if (this._isItemVisible(item)) { - return item.innerText; - } - } - return ""; - } - - get _currentLocationLabel() { - return this.shadowRoot!.querySelector