From 4ad8bdd87fd19fc404d6d998d639efb50572a2ad Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Tue, 7 Jan 2025 16:05:00 +0200 Subject: [PATCH 1/5] WIP: fast navigation scoped mode --- packages/base/src/features/F6Navigation.ts | 19 +- packages/main/src/Dialog.ts | 2 + packages/main/test/pages/Dialog.html | 903 +-------------------- 3 files changed, 32 insertions(+), 892 deletions(-) diff --git a/packages/base/src/features/F6Navigation.ts b/packages/base/src/features/F6Navigation.ts index 0d9ccd1bf0aa..58a5d3f77d42 100644 --- a/packages/base/src/features/F6Navigation.ts +++ b/packages/base/src/features/F6Navigation.ts @@ -172,8 +172,25 @@ class F6Navigation { } updateGroups() { + const scope = this.findScope(); + this.setSelectedGroup(); - this.groups = getFastNavigationGroups(document.body); + this.groups = getFastNavigationGroups(scope || document.body); + } + + findScope() { + const htmlElement = window.document.querySelector("html"); + let element: Element | null | ParentNode = this.deepActive(window.document); + + while (element && element !== htmlElement) { + const closestScopeEl = (element as HTMLElement).closest("[data-sap-ui-fastnavmode='scope']") as HTMLElement | undefined; + + if (closestScopeEl) { + return closestScopeEl; + } + + element = element.parentElement ? element.parentNode : (element.parentNode as ShadowRoot).host; + } } setSelectedGroup(root: DocumentOrShadowRoot = window.document) { diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index 902ce8718ed5..6b2d7f2cad3f 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -345,6 +345,8 @@ class Dialog extends Popup { this._attachScreenResizeHandler(); this.addEventListener("dragstart", this._dragStartHandler); + + this.setAttribute("data-sap-ui-fastnavmode", "scope"); } onExitDOM() { diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html index 46b0f9a564f2..760120350594 100644 --- a/packages/main/test/pages/Dialog.html +++ b/packages/main/test/pages/Dialog.html @@ -20,902 +20,23 @@ - + -
-
- - Morning - Evening - HCB - HCW - -
- - -
-
- Open Dialog with Input -
-
- Open Stretched Dialog -
-
- Open Stretched Dialog - no paddings -
-
- Open with Attribute -
-
- Open Message Dialog -
-
- Open Prevent closing Dialog -
-
- Open Multiple modals -
-
- Open empty dialog (no focusable element) -
-
- Open wide dialog -
-
- Open wide dialog 2 -
-
- Open draggable dialog -
-
- Open resizable dialog -
-
- Open resizable dialog with custom header -
-
- Open draggable & resizable dialog -
-
- Open dialog which is created dynamically -
-
- Open dialog calling ".open = true" multiple times -
- - - - -
- Close -
- - - -

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

- -
- OK -
- - - - - Close with Method - Close with Attribute - - - -
- focus stop - Resizable - -
- -
- Hello World! -
- - - Hello - World - - - - - -
- Hello World! -
- - - Hello - World - - - - - -
- Hello World! -
- - - Hello - World - - - - - - -
- Hello World! -
- - - Hello - World - - - - - - -
- Hello World! -
- - - Hello - World - - - - - - -
- Hello World! -
- - - Hello - World - - - - - - -
- Hello World! -
- - - Hello - World - - - - - -
- Close -
- - - -
- Hello World! -
- - - Hello - World - - - - - -
- Hello World! -
- - - Hello - World - - - - - -
- Hello World! -
- - - Hello - World - - - - - - -
- Hello World! -
- - - Hello - World - - - - - -
- Close -
- - - - - -

Prevent closing the dialog.

- -
- OK -
- - - -

Are you sure?

-
- YES - NO -
- - - -

That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

- -
- OK -
- - - -

That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

-

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. - That´s OpenUI5.

- -
- OK -
- - - -
Draggable dialog header
- -

Hint: Move this dialog around the screen by dragging it by its header or use the arrow keys.

-

This feature is available only on Desktop.

- -
- OK -
- - - -

Hint: Resize this dialog by dragging it by its resize handle or use shift+arrow keys.

-

This feature is available only on Desktop.

-
- OK -
- - - -
- Resizable dialog with custom Header -
-

Content

-
- OK -
- - - -

Hint: Move this dialog around the screen by dragging it by its header or use the arrow keys.

-

Resize this dialog by dragging it by its resize handle or use shift+arrow keys.

-

This feature is available only on Desktop.

- -
- Close -
- - - - - - - Hello - World - Again - - -
-
- - Open Dialog - - - -
-
- - - Hello - World - - -
-
- - - -
- Hello World Footer -
- - - - - Hello - World - Again - - -
-
- - Super Danger ! - - - - - - - Hello - World - Again - - - - Empty - -
-
- - Dialog with accessibleNameRef - Some label - -
- Header -
- Hello World! - -
-
-
- Focus circularity - Dialog focus circularity - - - 1 - - - 2 - - -
-
- Dialog states -
- Dialog with Error State - -
- Error -
- Hello World! - - - Dialog with Information State - -
- Information -
- Hello World! - - - Dialog with Positive State - -
- Positive -
- Hello World! - - - Dialog with Warning State - -
- Warning -
- Hello World! - - -
-
-
- Dialog roles -
- Error State, no role set - -
- Error -
- Hello World! - - - No State, 'AlertDialog' role set - -
- No state -
- Hello World! - - - Role 'None' set - -
- Role 'None' -
- Hello World! - - - Positive State, 'AlertDialog' role set - -
- Positive -
- Hello World! - - -
-
- Dialog over a Dialog - -
- Header 1 -
- Open a new Dialog - - -
- Header 2 -
- Open a new Dialog - - -
- Header 3 -
- Close - -
- - Dialog Focus - - Some message - Confirm - -
Header text
- -
-
- Close -
- -
-
- Dialog Custom Background - - Some Dialog - -
-
- Dialog with autofocus - - Some Dialog - - Close - -
-
- Confirmation dialog with Toolbar - -
-
- Username - -
-
- Password - -
-
- Email - -
-
- Address - -
-
- - - - - - - -
-
-
- Open Dialog from list - - Test1 - Test2 - Test3 - - - Close - - -
- -
- Scroll Helper - open -
- + + + + + + + + - + \ No newline at end of file From 4faa87d3a1b707b9b36deaf74de86139ed21aca5 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Wed, 8 Jan 2025 17:49:03 +0200 Subject: [PATCH 2/5] chore: cleanup --- packages/base/src/features/F6Navigation.ts | 14 +- .../base/src/util/getFastNavigationGroups.ts | 6 +- packages/main/cypress/specs/Dialog.cy.ts | 42 + packages/main/cypress/specs/F6.cy.ts | 80 +- packages/main/src/Dialog.ts | 2 +- packages/main/test/pages/Dialog.html | 903 +++++++++++++++++- 6 files changed, 1021 insertions(+), 26 deletions(-) create mode 100644 packages/main/cypress/specs/Dialog.cy.ts diff --git a/packages/base/src/features/F6Navigation.ts b/packages/base/src/features/F6Navigation.ts index 58a5d3f77d42..c6a3fb06f240 100644 --- a/packages/base/src/features/F6Navigation.ts +++ b/packages/base/src/features/F6Navigation.ts @@ -172,25 +172,27 @@ class F6Navigation { } updateGroups() { - const scope = this.findScope(); + const container = this.findContaienr(); this.setSelectedGroup(); - this.groups = getFastNavigationGroups(scope || document.body); + this.groups = getFastNavigationGroups(container); } - findScope() { + findContaienr() { const htmlElement = window.document.querySelector("html"); - let element: Element | null | ParentNode = this.deepActive(window.document); + let element = this.deepActive(window.document); while (element && element !== htmlElement) { - const closestScopeEl = (element as HTMLElement).closest("[data-sap-ui-fastnavmode='scope']") as HTMLElement | undefined; + const closestScopeEl = element.closest("[data-sap-ui-fastnavgroup-container='true']"); if (closestScopeEl) { return closestScopeEl; } - element = element.parentElement ? element.parentNode : (element.parentNode as ShadowRoot).host; + element = element.parentElement ? element.parentElement : (element.parentNode as ShadowRoot).host; } + + return document.body; } setSelectedGroup(root: DocumentOrShadowRoot = window.document) { diff --git a/packages/base/src/util/getFastNavigationGroups.ts b/packages/base/src/util/getFastNavigationGroups.ts index 37467914b07b..be29bb8635aa 100644 --- a/packages/base/src/util/getFastNavigationGroups.ts +++ b/packages/base/src/util/getFastNavigationGroups.ts @@ -48,7 +48,11 @@ const findFastNavigationGroups = (container: HTMLElement, startFromContainer?: b findFastNavigationGroups(child as HTMLElement, false); } - child = assignedElements && assignedElements.length ? assignedElements[++index] : originalChild.nextElementSibling; + if (child === container) { + child = assignedElements && assignedElements.length ? assignedElements[++index] : null; + } else { + child = assignedElements && assignedElements.length ? assignedElements[++index] : originalChild.nextElementSibling; + } } }; diff --git a/packages/main/cypress/specs/Dialog.cy.ts b/packages/main/cypress/specs/Dialog.cy.ts new file mode 100644 index 000000000000..a9a1de072d16 --- /dev/null +++ b/packages/main/cypress/specs/Dialog.cy.ts @@ -0,0 +1,42 @@ +import { html } from "lit"; +import "@ui5/webcomponents-base/dist/features/F6Navigation.js"; +import "../../src/Dialog.js"; + +describe("Keyboard", () => { + it("F6 navigation", () => { + cy.mount(html` + + +
+ +
+
+ +
+ + `); + + cy.get("#first") + .should("be.focused"); + + cy.realPress(["Shift", "F6"]); + + cy.get("#second") + .should("be.focused"); + + cy.realPress(["Shift", "F6"]); + + cy.get("#first") + .should("be.focused"); + + cy.realPress("F6"); + + cy.get("#second") + .should("be.focused"); + + cy.realPress("F6"); + + cy.get("#first") + .should("be.focused"); + }); +}); diff --git a/packages/main/cypress/specs/F6.cy.ts b/packages/main/cypress/specs/F6.cy.ts index b0e120caae00..adca8fcd2235 100644 --- a/packages/main/cypress/specs/F6.cy.ts +++ b/packages/main/cypress/specs/F6.cy.ts @@ -27,7 +27,7 @@ describe("F6 navigation", () => {
After Element
- `); // act cy.get("#before").focus(); @@ -94,7 +94,7 @@ describe("F6 navigation", () => {
After Element
- `); // act cy.get("#before").focus(); @@ -149,7 +149,7 @@ describe("F6 navigation", () => {
After Element
- `); // act cy.get("#before").focus(); @@ -421,7 +421,7 @@ describe("F6 navigation", () => {
After Element
- `); // act cy.get("#before").focus(); @@ -488,7 +488,7 @@ describe("F6 navigation", () => {
After Element
- `); // act cy.get("#before").focus(); @@ -543,7 +543,7 @@ describe("F6 navigation", () => {
After Element
- `); // act cy.get("#before").focus(); @@ -790,4 +790,72 @@ describe("F6 navigation", () => { .should("be.focused"); }); }); + + describe("Groups in container", () => { + it("tests forward navigation", () => { + cy.mount(html`
+
+ Non group focusable +
+
+
+ First group focusable +
+
+ Second group focusable +
+
+
+ Non group focusable +
+
`); + + // act + cy.get("#first") + .realClick(); + + cy.realPress("F6"); + + cy.get("#second") + .should("be.focused"); + + cy.realPress("F6"); + + cy.get("#first") + .should("be.focused"); + }); + + it("tests backward navigation", () => { + cy.mount(html`
+
+ Non group focusable +
+
+
+ First group focusable +
+
+ Second group focusable +
+
+
+ Non group focusable +
+
`); + + // act + cy.get("#first") + .realClick(); + + cy.realPress(["Shift", "F6"]); + + cy.get("#second") + .should("be.focused"); + + cy.realPress(["Shift", "F6"]); + + cy.get("#first") + .should("be.focused"); + }); + }); }); diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index 6b2d7f2cad3f..8e65c2e5e4e5 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -346,7 +346,7 @@ class Dialog extends Popup { this.addEventListener("dragstart", this._dragStartHandler); - this.setAttribute("data-sap-ui-fastnavmode", "scope"); + this.setAttribute("data-sap-ui-fastnavgroup-container", "true"); } onExitDOM() { diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html index 760120350594..46b0f9a564f2 100644 --- a/packages/main/test/pages/Dialog.html +++ b/packages/main/test/pages/Dialog.html @@ -20,23 +20,902 @@ - + - - - - - - - - +
+
+ + Morning + Evening + HCB + HCW + +
+ + +
+
+ Open Dialog with Input +
+
+ Open Stretched Dialog +
+
+ Open Stretched Dialog - no paddings +
+
+ Open with Attribute +
+
+ Open Message Dialog +
+
+ Open Prevent closing Dialog +
+
+ Open Multiple modals +
+
+ Open empty dialog (no focusable element) +
+
+ Open wide dialog +
+
+ Open wide dialog 2 +
+
+ Open draggable dialog +
+
+ Open resizable dialog +
+
+ Open resizable dialog with custom header +
+
+ Open draggable & resizable dialog +
+
+ Open dialog which is created dynamically +
+
+ Open dialog calling ".open = true" multiple times +
+ + + + +
+ Close +
+ + + +

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+ +
+ OK +
+ + + + + Close with Method + Close with Attribute + + + +
+ focus stop + Resizable + +
+ +
+ Hello World! +
+ + + Hello + World + + + + + +
+ Hello World! +
+ + + Hello + World + + + + + +
+ Hello World! +
+ + + Hello + World + + + + + + +
+ Hello World! +
+ + + Hello + World + + + + + + +
+ Hello World! +
+ + + Hello + World + + + + + + +
+ Hello World! +
+ + + Hello + World + + + + + + +
+ Hello World! +
+ + + Hello + World + + + + + +
+ Close +
+ + + +
+ Hello World! +
+ + + Hello + World + + + + + +
+ Hello World! +
+ + + Hello + World + + + + + +
+ Hello World! +
+ + + Hello + World + + + + + + +
+ Hello World! +
+ + + Hello + World + + + + + +
+ Close +
+ + + + + +

Prevent closing the dialog.

+ +
+ OK +
+ + + +

Are you sure?

+
+ YES + NO +
+ + + +

That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+ +
+ OK +
+ + + +

That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+

Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice. + That´s OpenUI5.

+ +
+ OK +
+ + + +
Draggable dialog header
+ +

Hint: Move this dialog around the screen by dragging it by its header or use the arrow keys.

+

This feature is available only on Desktop.

+ +
+ OK +
+ + + +

Hint: Resize this dialog by dragging it by its resize handle or use shift+arrow keys.

+

This feature is available only on Desktop.

+
+ OK +
+ + + +
+ Resizable dialog with custom Header +
+

Content

+
+ OK +
+ + + +

Hint: Move this dialog around the screen by dragging it by its header or use the arrow keys.

+

Resize this dialog by dragging it by its resize handle or use shift+arrow keys.

+

This feature is available only on Desktop.

+ +
+ Close +
+ + + + + + + Hello + World + Again + + +
+
+ + Open Dialog + + + +
+
+ + + Hello + World + + +
+
+ + + +
+ Hello World Footer +
+ + + + + Hello + World + Again + + +
+
+ + Super Danger ! + + + + + + + Hello + World + Again + + + + Empty + +
+
+ + Dialog with accessibleNameRef + Some label + +
+ Header +
+ Hello World! + +
+
+
+ Focus circularity + Dialog focus circularity + + + 1 + + + 2 + + +
+
+ Dialog states +
+ Dialog with Error State + +
+ Error +
+ Hello World! + + + Dialog with Information State + +
+ Information +
+ Hello World! + + + Dialog with Positive State + +
+ Positive +
+ Hello World! + + + Dialog with Warning State + +
+ Warning +
+ Hello World! + + +
+
+
+ Dialog roles +
+ Error State, no role set + +
+ Error +
+ Hello World! + + + No State, 'AlertDialog' role set + +
+ No state +
+ Hello World! + + + Role 'None' set + +
+ Role 'None' +
+ Hello World! + + + Positive State, 'AlertDialog' role set + +
+ Positive +
+ Hello World! + + +
+
+ Dialog over a Dialog + +
+ Header 1 +
+ Open a new Dialog + + +
+ Header 2 +
+ Open a new Dialog + + +
+ Header 3 +
+ Close + +
+ + Dialog Focus + + Some message + Confirm + +
Header text
+ +
+
+ Close +
+ +
+
+ Dialog Custom Background + + Some Dialog + +
+
+ Dialog with autofocus + + Some Dialog + + Close + +
+
+ Confirmation dialog with Toolbar + +
+
+ Username + +
+
+ Password + +
+
+ Email + +
+
+ Address + +
+
+ + + + + + + +
+
+
+ Open Dialog from list + + Test1 + Test2 + Test3 + + + Close + + +
+ +
+ Scroll Helper + open +
+ - \ No newline at end of file + From 76c62aa077bf9b03033a296e485ba4e39577b944 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Mon, 13 Jan 2025 13:10:56 +0200 Subject: [PATCH 3/5] chore: typo --- packages/base/src/features/F6Navigation.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/base/src/features/F6Navigation.ts b/packages/base/src/features/F6Navigation.ts index c6a3fb06f240..f5144b8a6385 100644 --- a/packages/base/src/features/F6Navigation.ts +++ b/packages/base/src/features/F6Navigation.ts @@ -172,13 +172,13 @@ class F6Navigation { } updateGroups() { - const container = this.findContaienr(); + const container = this.findContainer(); this.setSelectedGroup(); this.groups = getFastNavigationGroups(container); } - findContaienr() { + findContainer() { const htmlElement = window.document.querySelector("html"); let element = this.deepActive(window.document); From c03653284e431c3fd6009c4419d29f79a4c3cd89 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Mon, 13 Jan 2025 15:52:40 +0200 Subject: [PATCH 4/5] chore: fix build --- packages/main/src/Popup.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts index 2a4fd41b42b6..406f20f23e7f 100644 --- a/packages/main/src/Popup.ts +++ b/packages/main/src/Popup.ts @@ -324,11 +324,6 @@ abstract class Popup extends UI5Element { // initial focus, if focused element is statically created await this.applyInitialFocus(); - await renderFinished(); - - // initial focus, if focused element is dynamically created - await this.applyInitialFocus(); - if (this.isConnected) { this.fireDecoratorEvent("open"); } @@ -487,6 +482,7 @@ abstract class Popup extends UI5Element { } element.focus(); } + console.log("==== applyFocus") } isFocusWithin() { From 7354d7d7bf3fd41943811da556733be400b4c4ab Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Mon, 13 Jan 2025 15:57:44 +0200 Subject: [PATCH 5/5] chore: lint --- packages/main/src/Popup.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts index 406f20f23e7f..dd44752ef2fb 100644 --- a/packages/main/src/Popup.ts +++ b/packages/main/src/Popup.ts @@ -482,7 +482,6 @@ abstract class Popup extends UI5Element { } element.focus(); } - console.log("==== applyFocus") } isFocusWithin() {