Add focusTrapDisabled attribute to for non-modal dialogs

[Elijbet]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Add focusTrapDisabled attribute to non-modal dialogs, not enabled by default.

Acceptance Criteria

Non-modal dialogs offer option to disable focus-trap.

Relevant Info

As per mdn resource regarding trapping for dialog (as summed up by @geospatialem )
For non-modal dialogs it is still possible to interact with content outside of the dialog while the dialog is showing. Note that for non-modal dialogs there will have to be a global keyboard shortcut that allows focus to be moved between opened dialogs and the main page.

Which Component

dialog

Example Use Case

Example of where this is useful, a cookie page dialog that mentions cookie tracking, but the user can still interact with the page without acknowledgement/acceptance.

Priority impact

impact - p2 - want for an upcoming milestone

Calcite package

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

Esri team

Calcite (dev)

[ellenupp]

We (Dashboards) would like this property back for all dialogs. We have a scenario where a modal opens a second modal and the first is hidden behind the second until the second is closed. The focus trap for the top dialog should be active, but this is no longer always the case with Calcite 3.0. There is a race condition for which focus trap gets activated. If it's the one for the bottom dialog it makes the top one unusable. A solution for us to work around this would be to disable the focus trap on the first modal until the top one is closed.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified with 3.0.0-next.129 for non-modal dialogs when focus-trap-disabled is set:

<!-- Dialog with focus trap disabled -->
<calcite-dialog focus-trap-disabled heading="Focus trap disabled" id="example-focus-trap-disabled">
...
</calcite-dialog>

<!-- Modal -->
<calcite-dialog modal focus-trap-disabled heading="Focus trap not disabled for modals" id="example-modal-focus-trap-not-disabled">
...
</calcite-dialog>

<!-- Default behavior -->
<calcite-dialog heading="Focus trap not disabled" id="example-dialog-focus-trap-not-disabled">
...
</calcite-dialog>