Closing on escape no longer works when focusTrapDisabled=true

[Elijbet]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Related issue: #6456

Blocked issues: #10682

There is a regression with the focus-trap stacking PR. Closing on escape no longer works when focusTrapDisabled=true.

It may also affect closing on click in some components.

There is also a related failing test:

@esri/calcite-components:test: ● stacked focus-trap components › closes a stack of open components sequentially in visual order
@esri/calcite-components:test:
@esri/calcite-components:test: expect(received).toBe(expected) // Object.is equality
@esri/calcite-components:test:
@esri/calcite-components:test: Expected: "input-time-picker"
@esri/calcite-components:test: Received: "example-modal"
@esri/calcite-components:test:
@esri/calcite-components:test: 93 | ? "sheet-button"
@esri/calcite-components:test: 94 | : focusTrapOrderElements[i].id || document.body.id;
@esri/calcite-components:test: > 95 | expect(activeElementIdAfterTab).toBe(expectedElementId);
@esri/calcite-components:test: | ^
@esri/calcite-components:test: 96 |
@esri/calcite-components:test: 97 | await page.keyboard.press("Escape");
@esri/calcite-components:test: 98 | await page.waitForChanges();
@esri/calcite-components:test:
@esri/calcite-components:test: at testEscapeAndAssertOpenState (src/tests/stackedFocusTrap.e2e.ts:95:43)
@esri/calcite-components:test: at testStackEscapeSequence (src/tests/stackedFocusTrap.e2e.ts:125:7)
@esri/calcite-components:test: at Object. (src/tests/stackedFocusTrap.e2e.ts:128:5)

Expected Behavior

Components should close on escape when focus-trap is true individually or in a stack.

Reproduction Sample

https://codepen.io/jcfranco/pen/PoMbdMe?editors=100

Reproduction Steps

1. Open the modal
2. Press escape
3. Observe the modal not closing as expected

Reproduction Version

2.13.0

Relevant Info

No response

Regression?

2.12.2

Priority impact

impact - p3 - not time sensitive

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)

[driskull]

@geospatialem since this is a regression shouldn't it be in a patch?

[geospatialem]

@geospatialem since this is a regression shouldn't it be in a patch?

@driskull @jcfranco reminded me that we merged it in with the October milestone, so we just need to address it prior to the launch of 3.0 in November. 💪🏻

[jcfranco]

Updated the impact label accordingly.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified for the input-time-picker and modal components with 3.0.0-next.36 🎉

Observed a few behaviors that may need follow-up cc @Elijbet (assigning back to ya to confirm the following):

• input-date-picker: The component seems to close once focus leaves the component, is this expected?: https://codepen.io/geospatialem/pen/wBwvxge
• sheet: The esc key doesn't seem to close the component when focus-trap-disabled is present unless focus is on the close button, is this expected?: https://codepen.io/geospatialem/pen/VYZwBKY

Note: the full testing suite of components can be accessed at: https://codepen.io/geospatialem/pen/qEWByZz

[geospatialem]

• input-date-picker: The component seems to close once focus leaves the component, is this expected?: https://codepen.io/geospatialem/pen/wBwvxge

This is expected. And input-time-picker has an open issue to mitigate towards this behavior in #10639.

sheet: The esc key doesn't seem to close the component when focus-trap-disabled is present unless focus is on the close button, is this expected?: https://codepen.io/geospatialem/pen/VYZwBKY

Updated the sample to fit the use case, and it performs as-expected. ✨

Closing out the above as verified. Nice work, @Elijbet! 💪🏻