feat(dialog, modal, popover, input-date-picker, input-time-picker, sheet): support stacked component sequential closing with escape #9231

Elijbet · 2024-04-30T23:17:26Z

Related Issue: #6456

Summary

Support component sequential closing with escape by having focus-trap handle the stacking order.

driskull

Initial feedbackz

packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx

packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx

packages/calcite-components/src/components/sheet/sheet.e2e.ts

packages/calcite-components/src/demos/sheet.html

packages/calcite-components/src/utils/focusTrapComponent.ts

packages/calcite-components/src/components/sheet/sheet.e2e.ts

packages/calcite-components/src/demos/sheet.html

…tyles

github-actions · 2024-05-16T01:45:18Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

github-actions · 2024-05-24T01:45:32Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

github-actions · 2024-06-19T01:48:20Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

github-actions · 2024-06-29T01:46:50Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

…RetainingComponents when checking for activeElement

…is not itself focusable

…ing to popover

…sTrap instead

driskull

🎉 🌮 Nice work!

packages/calcite-components/src/components/popover/popover.tsx

…omponent

packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts

packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx

jcfranco · 2024-10-04T17:07:41Z

packages/calcite-components/src/components/popover/popover.tsx

@@ -522,6 +529,22 @@ export class Popover
    this.reposition(true);
  };

+  private clickOutsideDeactivates = (event: MouseEvent): boolean => {


Can you confirm callbacks passed to connectFocusTrap options need to be this-bound?

Confirmed. Fails tests without.

packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts

jcfranco · 2024-10-04T17:14:29Z

packages/calcite-components/src/tests/globalStyles.e2e.ts

+        await page.waitForChanges();
+        expect(await inputPicker.getProperty("open")).toBe(true);
+
+        async function testEscapeAndCheckOpenState(elements: E2EElement[]) {


This is unresolved in the new test file.

packages/calcite-components/src/utils/focusTrapComponent.ts

packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts

packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts

…ra open assert on stackedFocusTrap test

jcfranco

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅
✅✔✅✅✅✔✅✔✅✅✅✔✅✅✔✔✔✅✅✔✔✔✅✅✔✔✔✅✔✅
✅✅✔✅✔✅✅✔✅✅✅✔✅✔✅✅✅✅✔✅✅✅✅✔✅✅✅✅✔✅
✅✅✅✔✅✅✅✔✅✅✅✔✅✅✔✔✅✅✅✔✔✅✅✅✔✔✅✅✔✅
✅✅✅✔✅✅✅✔✅✅✅✔✅✅✅✅✔✅✅✅✅✔✅✅✅✅✔✅✅✅
✅✅✅✔✅✅✅✅✔✔✔✅✅✔✔✔✅✅✔✔✔✅✅✔✔✔✅✅✔✅
✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅

jcfranco · 2024-10-04T22:15:52Z

packages/calcite-components/src/tests/stackedFocusTrap.e2e.ts

+
+          const expectedElementId =
+            focusTrapOrderElements[i].id === "sheet"
+              ? "sheet-button"


This can be done in a follow-up refactor PR, but it'd be helpful to add a comment explaining why we check for sheet-button when sheet is the next element in the list.

I'll add it now.

* origin/dev: (230 commits) chore: release next chore(sort-handle): add messages (#10474) feat(accordion-item): stretch slotted actions to fill its height (#9250) chore: release next feat(dialog, modal, popover, input-date-picker, input-time-picker, sheet): support stacked component sequential closing with escape (#9231) chore: remove commented-out code (#10478) chore: add cssrem VSCode extension recommendation (#10300) docs(accordion-item): fix deprecation tag (#10479) chore: release next feat(stepper-item): update component's active state background color. (#10475) refactor: use `requestAnimationFrame` to replace `readTask` (#10432) chore: release next fix(tip): fix rendering tied to named-slot content (#10470) ci: compile estimate totals per milestone (#10442) chore: release next fix(modal): fix rendering tied to named-slot content (#10469) chore: release next fix(shell-center-row): fix rendering tied to named-slot content (#10451) fix(inline-editable): fix rendering tied to default slot content (#10456) fix(input, input-number, input-text): should not set slotted actions to be disabled (#10458) ...

Elijbet · 2024-10-07T20:15:53Z

This is the gist of the test @DitwanP, @geospatialem.

Whenever a focus-trapping component opens, it traps focus and gets added to the stack. Pressing escape should deactivate each returning focus to the next component in the stack.

I recommend setting up a stack of all focus-trap components as open, mimicking the setup in the e2e, but have 2 separate stacks with popover containing either input-time-picker or input-date-picker, as you can't have both open at the same time.

Click outside also needs to be tested. It's usually set to false. For input-date-picker and input-time-picker closing with click outside is delegated to popover: https://github.com/Esri/calcite-design-system/pull/9231/files#diff-42c23e5a429472ae2ecb636c2ba383162681d40c5ff70c3f89be55d376052e32R1002 So whatever the expected behavior for popover is in this case.

set up demo for testing component sequential closing behavior

b9b684d

github-actions bot added the enhancement Issues tied to a new feature or request. label Apr 30, 2024

github-actions bot assigned Elijbet Apr 30, 2024

driskull and others added 6 commits April 30, 2024 16:33

WIP

281619e

WIP

2ad2c8e

WIP

c95e3aa

WIP

c54cab1

add docs

e3823ea

simplified HTML for Demo and e2e test to reflect the demo workflow

1187a3a

driskull reviewed May 2, 2024

View reviewed changes

cleanup

fadbb0d

driskull reviewed May 2, 2024

View reviewed changes

packages/calcite-components/src/components/sheet/sheet.e2e.ts Outdated Show resolved Hide resolved

stacked focus-trap components test

0622da1

Elijbet changed the title ~~feat(sheet, modal, popover, tooltip, combobox, dropdown, date-picker): support stacked component sequential closing with escape~~ feat(sheet, modal, popover): support stacked component sequential closing with escape May 2, 2024

jcfranco reviewed May 7, 2024

View reviewed changes

packages/calcite-components/src/demos/sheet.html Outdated Show resolved Hide resolved

packages/calcite-components/src/demos/sheet.html Outdated Show resolved Hide resolved

Elijbet added 2 commits May 8, 2024 11:27

relocate test for closing of stacked focus-trap components to globalS…

00e576b

…tyles

fix failing tests

55fbb07

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label May 16, 2024

Elijbet removed the Stale Issues or pull requests that have not had recent activity. label May 16, 2024

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label May 24, 2024

benelan changed the base branch from main to dev June 10, 2024 09:13

github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label Jun 11, 2024

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Jun 19, 2024

Elijbet removed the Stale Issues or pull requests that have not had recent activity. label Jun 20, 2024

Elijbet added 2 commits June 20, 2024 10:57

add wait for events open/close to input-date-picker for additional check

0af108e

add wait for events open/close to input-time-picker for additional check

47cf21d

Elijbet added 8 commits October 1, 2024 15:28

seperate stackedFocusTrap.e2e.ts

79ddd20

cleanup stackedFocusTrap test

337342b

clean up test

212f6bc

assert on focus component

0f8c4e2

remove redundant components from modal, add dialog, account for focus…

fd53ff4

…RetainingComponents when checking for activeElement

add camelCase util and target sheet-button id instead of sheet as it …

ee5d656

…is not itself focusable

tab out of focus-retaining input components to assert on focus return…

7e3dda8

…ing to popover

add comments to focusTrap options and cleanu up tests

06e68ff

Elijbet removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Oct 3, 2024

Elijbet added 2 commits October 3, 2024 13:50

remove focusTrap component properties and pass options to connectFocu…

cfe719d

…sTrap instead

cleanup

b7f7411

driskull approved these changes Oct 3, 2024

View reviewed changes

packages/calcite-components/src/components/popover/popover.tsx Outdated Show resolved Hide resolved

move anonymous focusTrap option functions to private methods on the c…

b75baee

…omponent

jcfranco reviewed Oct 4, 2024

View reviewed changes

remove stylistic changes and group helpers

fc85f74

jcfranco reviewed Oct 4, 2024

View reviewed changes

packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts Outdated Show resolved Hide resolved

Elijbet added 2 commits October 4, 2024 12:01

cleanup

5097b0b

clickOutsideDeactivates option on sheet and scrim comment, remove ext…

2c40889

…ra open assert on stackedFocusTrap test

jcfranco approved these changes Oct 4, 2024

View reviewed changes

explainer to sheet-button assertion

5117688

Elijbet added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Oct 4, 2024

Elijbet merged commit eb22130 into dev Oct 4, 2024
13 checks passed

Elijbet deleted the elijbet/6456-component-closing-sequence branch October 4, 2024 23:08

github-actions bot added this to the 2.13.1 patch milestone Oct 4, 2024

geospatialem modified the milestones: 2.13.1 patch, 2024-10-29 - Oct Milestone Oct 7, 2024

geospatialem mentioned this pull request Oct 7, 2024

[Dialog] Close contextual elements with the Esc key in visual order #6456

Closed

jcfranco mentioned this pull request Dec 14, 2024

fix(dialog, modal, popover, sheet): restore deactivating focus traps on outside click #11058

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dialog, modal, popover, input-date-picker, input-time-picker, sheet): support stacked component sequential closing with escape #9231

feat(dialog, modal, popover, input-date-picker, input-time-picker, sheet): support stacked component sequential closing with escape #9231

Elijbet commented Apr 30, 2024

driskull left a comment

github-actions bot commented May 16, 2024

github-actions bot commented May 24, 2024

github-actions bot commented Jun 19, 2024

github-actions bot commented Jun 29, 2024

driskull left a comment

jcfranco Oct 4, 2024

Elijbet Oct 4, 2024

jcfranco Oct 4, 2024

jcfranco left a comment

jcfranco Oct 4, 2024

Elijbet Oct 4, 2024

Elijbet commented Oct 7, 2024 •

edited

Loading

feat(dialog, modal, popover, input-date-picker, input-time-picker, sheet): support stacked component sequential closing with escape #9231

feat(dialog, modal, popover, input-date-picker, input-time-picker, sheet): support stacked component sequential closing with escape #9231

Conversation

Elijbet commented Apr 30, 2024

Summary

driskull left a comment

Choose a reason for hiding this comment

github-actions bot commented May 16, 2024

github-actions bot commented May 24, 2024

github-actions bot commented Jun 19, 2024

github-actions bot commented Jun 29, 2024

driskull left a comment

Choose a reason for hiding this comment

jcfranco Oct 4, 2024

Choose a reason for hiding this comment

Elijbet Oct 4, 2024

Choose a reason for hiding this comment

jcfranco Oct 4, 2024

Choose a reason for hiding this comment

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco Oct 4, 2024

Choose a reason for hiding this comment

Elijbet Oct 4, 2024

Choose a reason for hiding this comment

Elijbet commented Oct 7, 2024 • edited Loading

Elijbet commented Oct 7, 2024 •

edited

Loading