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 13 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
1 change: 1 addition & 0 deletions src/elements/alert/alert/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ As a base rule, opening animations should be active if an alert arrives after th
| `animation` | `animation` | public | `'open' \| 'close' \| 'all' \| 'none'` | `'all'` | The enabled animations. |
| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. |
| `iconName` | `icon-name` | public | `string \| undefined` | `'info'` | Name of the icon which will be forward to the nested `sbb-icon`. Choose the icons from https://icons.app.sbb.ch. Styling is optimized for icons of type HIM-CUS. |
| `isOpen` | - | public | `boolean` | | Whether the element is open. |
| `linkContent` | `link-content` | public | `string \| undefined` | | Content of the link. |
| `readonly` | `readonly` | public | `boolean` | `false` | Whether the alert is readonly. In readonly mode, there is no dismiss button offered to the user. |
| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. |
Expand Down
1 change: 1 addition & 0 deletions src/elements/autocomplete-grid/autocomplete-grid/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ using `aria-activedescendant` to support navigation though the autocomplete opti

| Name | Attribute | Privacy | Type | Default | Description |
| ------------------- | --------------------- | ------- | ----------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `isOpen` | - | public | `boolean` | | Whether the element is open. |
| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. |
| `origin` | `origin` | public | `string \| HTMLElement \| undefined` | | The element where the autocomplete will attach; accepts both an element's id or an HTMLElement. If not set, it will search for the first 'sbb-form-field' ancestor. |
| `originElement` | - | public | `HTMLElement` | | Returns the element where autocomplete overlay is attached to. |
Expand Down
1 change: 1 addition & 0 deletions src/elements/autocomplete/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ using `aria-activedescendant` to support navigation though the autocomplete opti

| Name | Attribute | Privacy | Type | Default | Description |
| ------------------- | --------------------- | ------- | ----------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `isOpen` | - | public | `boolean` | | Whether the element is open. |
| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. |
| `origin` | `origin` | public | `string \| HTMLElement \| undefined` | | The element where the autocomplete will attach; accepts both an element's id or an HTMLElement. If not set, it will search for the first 'sbb-form-field' ancestor. |
| `originElement` | - | public | `HTMLElement` | | Returns the element where autocomplete overlay is attached to. |
Expand Down
14 changes: 14 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 @@ -27,6 +27,11 @@ export abstract class SbbOpenCloseBaseElement extends LitElement {
return this.getAttribute('data-state') as SbbOpenedClosedState;
}

/** Whether the element is open. */
public get isOpen(): boolean {
return this.state === 'opened';
}

/** Emits whenever the component starts the opening transition. */
protected willOpen: EventEmitter = new EventEmitter(
this,
Expand Down Expand Up @@ -58,3 +63,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/controllers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './controllers/connected-abort-controller.js';
export * from './controllers/inert-controller.js';
export * from './controllers/language-controller.js';
export * from './controllers/slot-state-controller.js';
267 changes: 267 additions & 0 deletions src/elements/core/controllers/__snapshots__/inert-controller.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