Skip to content

Commit

Permalink
fix: fix inert mechanism for overlays (#2986)
Browse files Browse the repository at this point in the history 
Closes #2969
  • Loading branch information
@jeripeierSBB
jeripeierSBB authored Aug 21, 2024
1 parent 7c8a690 commit 92992d2
Show file tree
Hide file tree
Showing 21 changed files with 600 additions and 154 deletions.
1 change: 1 addition & 0 deletions src/elements/alert/alert/readme.md
View file
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
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
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
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
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
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

0 comments on commit 92992d2

Please sign in to comment.