@vaadin/confirm-dialog 25.0.0-alpha13 → 25.0.0-alpha15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/confirm-dialog",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-alpha15",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,24 +34,24 @@
|
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
37
|
-
"@vaadin/button": "25.0.0-
|
|
38
|
-
"@vaadin/component-base": "25.0.0-
|
|
39
|
-
"@vaadin/dialog": "25.0.0-
|
|
40
|
-
"@vaadin/overlay": "25.0.0-
|
|
41
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-
|
|
37
|
+
"@vaadin/button": "25.0.0-alpha15",
|
|
38
|
+
"@vaadin/component-base": "25.0.0-alpha15",
|
|
39
|
+
"@vaadin/dialog": "25.0.0-alpha15",
|
|
40
|
+
"@vaadin/overlay": "25.0.0-alpha15",
|
|
41
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha15",
|
|
42
42
|
"lit": "^3.0.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
46
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
47
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
45
|
+
"@vaadin/a11y-base": "25.0.0-alpha15",
|
|
46
|
+
"@vaadin/chai-plugins": "25.0.0-alpha15",
|
|
47
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha15",
|
|
48
48
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
49
|
-
"@vaadin/vaadin-lumo-styles": "25.0.0-
|
|
49
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha15",
|
|
50
50
|
"sinon": "^18.0.0"
|
|
51
51
|
},
|
|
52
52
|
"web-types": [
|
|
53
53
|
"web-types.json",
|
|
54
54
|
"web-types.lit.json"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "1ad98437e7600769bf66f870929feefbeef16edf"
|
|
57
57
|
}
|
|
@@ -36,7 +36,7 @@ export declare function ConfirmDialogMixin<T extends Constructor<HTMLElement>>(
|
|
|
36
36
|
|
|
37
37
|
export declare class ConfirmDialogMixinClass {
|
|
38
38
|
/**
|
|
39
|
-
* Sets the `aria-describedby` attribute of the
|
|
39
|
+
* Sets the `aria-describedby` attribute of the dialog.
|
|
40
40
|
*
|
|
41
41
|
* By default, the text contents of all elements inside the message area
|
|
42
42
|
* are combined into the `aria-description` attribute. However, there are
|
|
@@ -49,7 +49,7 @@ export declare class ConfirmDialogMixinClass {
|
|
|
49
49
|
accessibleDescriptionRef: string | null | undefined;
|
|
50
50
|
|
|
51
51
|
/**
|
|
52
|
-
* True if the
|
|
52
|
+
* True if the dialog is visible and available for interaction.
|
|
53
53
|
*/
|
|
54
54
|
opened: boolean;
|
|
55
55
|
|
|
@@ -16,7 +16,7 @@ export const ConfirmDialogMixin = (superClass) =>
|
|
|
16
16
|
static get properties() {
|
|
17
17
|
return {
|
|
18
18
|
/**
|
|
19
|
-
* Sets the `aria-describedby` attribute of the
|
|
19
|
+
* Sets the `aria-describedby` attribute of the dialog.
|
|
20
20
|
*
|
|
21
21
|
* By default, the text contents of all elements inside the message area
|
|
22
22
|
* are combined into the `aria-description` attribute. However, there are
|
|
@@ -30,7 +30,7 @@ export const ConfirmDialogMixin = (superClass) =>
|
|
|
30
30
|
},
|
|
31
31
|
|
|
32
32
|
/**
|
|
33
|
-
* True if the
|
|
33
|
+
* True if the dialog is visible and available for interaction.
|
|
34
34
|
* @type {boolean}
|
|
35
35
|
*/
|
|
36
36
|
opened: {
|
|
@@ -246,6 +246,8 @@ export const ConfirmDialogMixin = (superClass) =>
|
|
|
246
246
|
super.ready();
|
|
247
247
|
|
|
248
248
|
this.role = 'alertdialog';
|
|
249
|
+
this.setAttribute('aria-modal', 'true');
|
|
250
|
+
this.setAttribute('tabindex', '0');
|
|
249
251
|
|
|
250
252
|
this._headerController = new SlotController(this, 'header', 'h3', {
|
|
251
253
|
initializer: (node) => {
|
|
@@ -49,7 +49,7 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMi
|
|
|
49
49
|
render() {
|
|
50
50
|
return html`
|
|
51
51
|
<div part="backdrop" id="backdrop" ?hidden="${!this.withBackdrop}"></div>
|
|
52
|
-
<div part="overlay" id="overlay"
|
|
52
|
+
<div part="overlay" id="overlay">
|
|
53
53
|
<header part="header"><slot name="header"></slot></header>
|
|
54
54
|
<div part="content" id="content">
|
|
55
55
|
<div part="message"><slot></slot></div>
|
|
@@ -98,6 +98,24 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMi
|
|
|
98
98
|
get _modalRoot() {
|
|
99
99
|
return this.owner;
|
|
100
100
|
}
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* Override method from OverlayFocusMixin to use owner as focus trap root
|
|
104
|
+
* @protected
|
|
105
|
+
* @override
|
|
106
|
+
*/
|
|
107
|
+
get _focusTrapRoot() {
|
|
108
|
+
return this.owner;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* Override method from OverlayFocusMixin to not set `aria-hidden`
|
|
113
|
+
* @protected
|
|
114
|
+
* @override
|
|
115
|
+
*/
|
|
116
|
+
get _useAriaHidden() {
|
|
117
|
+
return false;
|
|
118
|
+
}
|
|
101
119
|
}
|
|
102
120
|
|
|
103
121
|
defineCustomElement(ConfirmDialogOverlay);
|
|
@@ -75,13 +75,18 @@ class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(P
|
|
|
75
75
|
:host([opened]),
|
|
76
76
|
:host([opening]),
|
|
77
77
|
:host([closing]) {
|
|
78
|
-
display:
|
|
78
|
+
display: block !important;
|
|
79
|
+
position: absolute;
|
|
79
80
|
}
|
|
80
81
|
|
|
81
82
|
:host,
|
|
82
83
|
:host([hidden]) {
|
|
83
84
|
display: none !important;
|
|
84
85
|
}
|
|
86
|
+
|
|
87
|
+
:host(:focus) ::part(overlay) {
|
|
88
|
+
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
|
|
89
|
+
}
|
|
85
90
|
`;
|
|
86
91
|
}
|
|
87
92
|
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/confirm-dialog",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha15",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "width",
|
|
15
|
-
"description": "Set the width of the
|
|
15
|
+
"description": "Set the width of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
18
|
"string",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
25
|
"name": "height",
|
|
26
|
-
"description": "Set the height of the
|
|
26
|
+
"description": "Set the height of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
27
27
|
"value": {
|
|
28
28
|
"type": [
|
|
29
29
|
"string",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
"name": "accessible-description-ref",
|
|
37
|
-
"description": "Sets the `aria-describedby` attribute of the
|
|
37
|
+
"description": "Sets the `aria-describedby` attribute of the dialog.\n\nBy default, the text contents of all elements inside the message area\nare combined into the `aria-description` attribute. However, there are\ncases where this can confuse screen reader users (e.g. the dialog\nmay present a password confirmation form). For these cases,\nit's better to associate only the elements that will help describe\nthe confirmation dialog through this API.",
|
|
38
38
|
"value": {
|
|
39
39
|
"type": [
|
|
40
40
|
"string",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"name": "opened",
|
|
48
|
-
"description": "True if the
|
|
48
|
+
"description": "True if the dialog is visible and available for interaction.",
|
|
49
49
|
"value": {
|
|
50
50
|
"type": [
|
|
51
51
|
"boolean"
|
|
@@ -169,7 +169,7 @@
|
|
|
169
169
|
"properties": [
|
|
170
170
|
{
|
|
171
171
|
"name": "width",
|
|
172
|
-
"description": "Set the width of the
|
|
172
|
+
"description": "Set the width of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
173
173
|
"value": {
|
|
174
174
|
"type": [
|
|
175
175
|
"string",
|
|
@@ -180,7 +180,7 @@
|
|
|
180
180
|
},
|
|
181
181
|
{
|
|
182
182
|
"name": "height",
|
|
183
|
-
"description": "Set the height of the
|
|
183
|
+
"description": "Set the height of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
184
184
|
"value": {
|
|
185
185
|
"type": [
|
|
186
186
|
"string",
|
|
@@ -191,7 +191,7 @@
|
|
|
191
191
|
},
|
|
192
192
|
{
|
|
193
193
|
"name": "accessibleDescriptionRef",
|
|
194
|
-
"description": "Sets the `aria-describedby` attribute of the
|
|
194
|
+
"description": "Sets the `aria-describedby` attribute of the dialog.\n\nBy default, the text contents of all elements inside the message area\nare combined into the `aria-description` attribute. However, there are\ncases where this can confuse screen reader users (e.g. the dialog\nmay present a password confirmation form). For these cases,\nit's better to associate only the elements that will help describe\nthe confirmation dialog through this API.",
|
|
195
195
|
"value": {
|
|
196
196
|
"type": [
|
|
197
197
|
"string",
|
|
@@ -202,7 +202,7 @@
|
|
|
202
202
|
},
|
|
203
203
|
{
|
|
204
204
|
"name": "opened",
|
|
205
|
-
"description": "True if the
|
|
205
|
+
"description": "True if the dialog is visible and available for interaction.",
|
|
206
206
|
"value": {
|
|
207
207
|
"type": [
|
|
208
208
|
"boolean"
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/confirm-dialog",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha15",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
23
23
|
"name": "?opened",
|
|
24
|
-
"description": "True if the
|
|
24
|
+
"description": "True if the dialog is visible and available for interaction.",
|
|
25
25
|
"value": {
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
@@ -49,21 +49,21 @@
|
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
51
|
"name": ".width",
|
|
52
|
-
"description": "Set the width of the
|
|
52
|
+
"description": "Set the width of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
53
53
|
"value": {
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
58
|
"name": ".height",
|
|
59
|
-
"description": "Set the height of the
|
|
59
|
+
"description": "Set the height of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
60
60
|
"value": {
|
|
61
61
|
"kind": "expression"
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
65
|
"name": ".accessibleDescriptionRef",
|
|
66
|
-
"description": "Sets the `aria-describedby` attribute of the
|
|
66
|
+
"description": "Sets the `aria-describedby` attribute of the dialog.\n\nBy default, the text contents of all elements inside the message area\nare combined into the `aria-description` attribute. However, there are\ncases where this can confuse screen reader users (e.g. the dialog\nmay present a password confirmation form). For these cases,\nit's better to associate only the elements that will help describe\nthe confirmation dialog through this API.",
|
|
67
67
|
"value": {
|
|
68
68
|
"kind": "expression"
|
|
69
69
|
}
|