Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fix inert mechanism for overlays #2986

Merged
merged 14 commits into from
Aug 21, 2024
Merged

fix: fix inert mechanism for overlays #2986

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
0a8bf06
fix: fix inert mechanism
jeripeierSBB Aug 5, 2024
5518191
refactor: move open close global definition
jeripeierSBB Aug 5, 2024
8d4be2a
fix: avoid warning on disconnection
jeripeierSBB Aug 5, 2024
d9fdff7
refactor: rename inert to inertHandler
jeripeierSBB Aug 5, 2024
5271fae
Merge branch 'refs/heads/main' into inert-fix
jeripeierSBB Aug 20, 2024
7a87e4f
fix: fix review
jeripeierSBB Aug 20, 2024
e70a8e7
feat: replace handler by controller
jeripeierSBB Aug 21, 2024
2a9e83d
refactor: rename inert.ts to inert-controller.ts
jeripeierSBB Aug 21, 2024
86d3224
Merge branch 'refs/heads/main' into inert-fix
jeripeierSBB Aug 21, 2024
4a3f983
fix: fix naming
jeripeierSBB Aug 21, 2024
965cb7c
Merge branch 'refs/heads/main' into inert-fix
jeripeierSBB Aug 21, 2024
076969c
fix: fix review
jeripeierSBB Aug 21, 2024
49360b9
refactor: move to controllers module
jeripeierSBB Aug 21, 2024
95c46f1
fix: review
jeripeierSBB Aug 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/elements/core/base-elements/open-close-base-element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,3 +58,12 @@ export abstract class SbbOpenCloseBaseElement extends LitElement {
this.state ||= 'closed';
}
}

declare global {
interface GlobalEventHandlersEventMap {
willOpen: CustomEvent<void>;
willClose: CustomEvent<void>;
didOpen: CustomEvent<void>;
didClose: CustomEvent<void>;
}
}
1 change: 1 addition & 0 deletions src/elements/core/overlay.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './overlay/inert.js';
export * from './overlay/overlay.js';
export * from './overlay/overlay-option-panel.js';
export * from './overlay/overlay-trigger-attributes.js';
Expand Down
267 changes: 267 additions & 0 deletions src/elements/core/overlay/__snapshots__/inert.spec.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,267 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};

snapshots["inert light DOM should mark inert"] =
`<div>
<div
aria-hidden="true"
data-sbb-aria-hidden=""
data-sbb-inert=""
inert=""
>
</div>
<div
aria-hidden="true"
data-sbb-aria-hidden=""
inert=""
>
</div>
<div
aria-hidden="true"
data-sbb-inert=""
inert=""
>
</div>
<div id="overlay">
</div>
<div
aria-hidden="true"
data-sbb-aria-hidden=""
data-sbb-inert=""
inert=""
>
<div id="overlay2">
</div>
</div>
</div>
`;
/* end snapshot inert light DOM should mark inert */

snapshots["inert light DOM should remove inert"] =
`<div>
<div>
</div>
<div inert="">
</div>
<div aria-hidden="true">
</div>
<div id="overlay">
</div>
<div>
<div id="overlay2">
</div>
</div>
</div>
`;
/* end snapshot inert light DOM should remove inert */

snapshots["inert light DOM stacked should mark inert"] =
`<div>
<div
aria-hidden="true"
data-sbb-aria-hidden=""
data-sbb-inert=""
inert=""
>
</div>
<div
aria-hidden="true"
data-sbb-aria-hidden=""
inert=""
>
</div>
<div
aria-hidden="true"
data-sbb-inert=""
inert=""
>
</div>
<div
aria-hidden="true"
data-sbb-aria-hidden=""
data-sbb-inert=""
id="overlay"
inert=""
>
</div>
<div>
<div id="overlay2">
</div>
</div>
</div>
`;
/* end snapshot inert light DOM stacked should mark inert */

snapshots["inert light DOM stacked should remove inert level 2"] =
`<div>
<div
aria-hidden="true"
data-sbb-aria-hidden=""
data-sbb-inert=""
inert=""
>
</div>
<div
aria-hidden="true"
data-sbb-aria-hidden=""
inert=""
>
</div>
<div
aria-hidden="true"
data-sbb-inert=""
inert=""
>
</div>
<div id="overlay">
</div>
<div
aria-hidden="true"
data-sbb-aria-hidden=""
data-sbb-inert=""
inert=""
>
<div id="overlay2">
</div>
</div>
</div>
`;
/* end snapshot inert light DOM stacked should remove inert level 2 */

snapshots["inert light DOM stacked should remove inert level 1"] =
`<div>
<div>
</div>
<div inert="">
</div>
<div aria-hidden="true">
</div>
<div id="overlay">
</div>
<div>
<div id="overlay2">
</div>
</div>
</div>
`;
/* end snapshot inert light DOM stacked should remove inert level 1 */

snapshots["inert light DOM stacked should handle level skip removal"] =
`<div>
<div>
</div>
<div inert="">
</div>
<div aria-hidden="true">
</div>
<div id="overlay">
</div>
<div>
<div id="overlay2">
</div>
</div>
</div>
`;
/* end snapshot inert light DOM stacked should handle level skip removal */

snapshots["inert with shadow DOM should mark inert DOM"] =
`<div>
<div
aria-hidden="true"
data-sbb-aria-hidden=""
data-sbb-inert=""
inert=""
>
</div>
<div
aria-hidden="true"
data-sbb-aria-hidden=""
inert=""
>
</div>
<div
aria-hidden="true"
data-sbb-inert=""
inert=""
>
</div>
<shadow-element>
</shadow-element>
<div
aria-hidden="true"
data-sbb-aria-hidden=""
data-sbb-inert=""
inert=""
>
<div>
</div>
</div>
</div>
`;
/* end snapshot inert with shadow DOM should mark inert DOM */

snapshots["inert with shadow DOM should mark inert Shadow DOM"] =
`<div
aria-hidden="true"
data-sbb-aria-hidden=""
data-sbb-inert=""
inert=""
>
</div>
<div>
<div
aria-hidden="true"
data-sbb-aria-hidden=""
data-sbb-inert=""
inert=""
>
Sibling
</div>
<div id="overlay">
</div>
<span
aria-hidden="true"
data-sbb-aria-hidden=""
data-sbb-inert=""
inert=""
>
Another sibling
</span>
</div>
`;
/* end snapshot inert with shadow DOM should mark inert Shadow DOM */

snapshots["inert with shadow DOM should remove inert DOM"] =
`<div>
<div>
</div>
<div inert="">
</div>
<div aria-hidden="true">
</div>
<shadow-element>
</shadow-element>
<div>
<div>
</div>
</div>
</div>
`;
/* end snapshot inert with shadow DOM should remove inert DOM */

snapshots["inert with shadow DOM should remove inert Shadow DOM"] =
`<div>
</div>
<div>
<div>
Sibling
</div>
<div id="overlay">
</div>
<span>
Another sibling
</span>
</div>
`;
/* end snapshot inert with shadow DOM should remove inert Shadow DOM */

Loading
Loading