@vaadin/confirm-dialog 24.1.0-alpha8 → 24.1.0-beta1
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 +9 -9
- package/src/vaadin-confirm-dialog.d.ts +13 -0
- package/src/vaadin-confirm-dialog.js +43 -4
- package/web-types.json +24 -2
- package/web-types.lit.json +9 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/confirm-dialog",
|
|
3
|
-
"version": "24.1.0-
|
|
3
|
+
"version": "24.1.0-beta1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,13 +36,13 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/button": "24.1.0-
|
|
40
|
-
"@vaadin/component-base": "24.1.0-
|
|
41
|
-
"@vaadin/dialog": "24.1.0-
|
|
42
|
-
"@vaadin/overlay": "24.1.0-
|
|
43
|
-
"@vaadin/vaadin-lumo-styles": "24.1.0-
|
|
44
|
-
"@vaadin/vaadin-material-styles": "24.1.0-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "24.1.0-
|
|
39
|
+
"@vaadin/button": "24.1.0-beta1",
|
|
40
|
+
"@vaadin/component-base": "24.1.0-beta1",
|
|
41
|
+
"@vaadin/dialog": "24.1.0-beta1",
|
|
42
|
+
"@vaadin/overlay": "24.1.0-beta1",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "24.1.0-beta1",
|
|
44
|
+
"@vaadin/vaadin-material-styles": "24.1.0-beta1",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "24.1.0-beta1"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"web-types.json",
|
|
54
54
|
"web-types.lit.json"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "f0ddb6576073a6af05ab29867bc5ec82e334f9d7"
|
|
57
57
|
}
|
|
@@ -73,6 +73,19 @@ export type ConfirmDialogEventMap = ConfirmDialogCustomEventMap & HTMLElementEve
|
|
|
73
73
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
74
74
|
*/
|
|
75
75
|
declare class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(HTMLElement))) {
|
|
76
|
+
/**
|
|
77
|
+
* Sets the `aria-describedby` attribute of the overlay element.
|
|
78
|
+
*
|
|
79
|
+
* By default, all elements inside the message area are linked
|
|
80
|
+
* through the `aria-describedby` attribute. However, there are
|
|
81
|
+
* cases where this can confuse screen reader users (e.g. the dialog
|
|
82
|
+
* may present a password confirmation form). For these cases,
|
|
83
|
+
* it's better to associate only the elements that will help describe
|
|
84
|
+
* the confirmation dialog through this API.
|
|
85
|
+
* @attr {string} accessible-description-ref
|
|
86
|
+
*/
|
|
87
|
+
accessibleDescriptionRef: string | null | undefined;
|
|
88
|
+
|
|
76
89
|
/**
|
|
77
90
|
* True if the overlay is currently displayed.
|
|
78
91
|
*/
|
|
@@ -5,9 +5,11 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import './vaadin-confirm-dialog-overlay.js';
|
|
7
7
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
8
|
+
import { setAriaIDReference } from '@vaadin/a11y-base/src/aria-id-reference.js';
|
|
8
9
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
9
10
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
10
11
|
import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
|
|
12
|
+
import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
|
|
11
13
|
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
12
14
|
|
|
13
15
|
/**
|
|
@@ -101,6 +103,19 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
|
|
|
101
103
|
|
|
102
104
|
static get properties() {
|
|
103
105
|
return {
|
|
106
|
+
/**
|
|
107
|
+
* Sets the `aria-describedby` attribute of the overlay element.
|
|
108
|
+
*
|
|
109
|
+
* By default, all elements inside the message area are linked
|
|
110
|
+
* through the `aria-describedby` attribute. However, there are
|
|
111
|
+
* cases where this can confuse screen reader users (e.g. the dialog
|
|
112
|
+
* may present a password confirmation form). For these cases,
|
|
113
|
+
* it's better to associate only the elements that will help describe
|
|
114
|
+
* the confirmation dialog through this API.
|
|
115
|
+
*/
|
|
116
|
+
accessibleDescriptionRef: {
|
|
117
|
+
type: String,
|
|
118
|
+
},
|
|
104
119
|
/**
|
|
105
120
|
* True if the overlay is currently displayed.
|
|
106
121
|
* @type {boolean}
|
|
@@ -302,6 +317,7 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
|
|
|
302
317
|
'__updateHeaderNode(_headerNode, header)',
|
|
303
318
|
'__updateMessageNodes(_messageNodes, message)',
|
|
304
319
|
'__updateRejectButton(_rejectButton, rejectText, rejectTheme, rejectButtonVisible)',
|
|
320
|
+
'__accessibleDescriptionRefChanged(_overlayElement, accessibleDescriptionRef)',
|
|
305
321
|
];
|
|
306
322
|
}
|
|
307
323
|
|
|
@@ -325,6 +341,7 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
|
|
|
325
341
|
this._overlayElement.addEventListener('vaadin-overlay-escape-press', this._escPressed.bind(this));
|
|
326
342
|
this._overlayElement.addEventListener('vaadin-overlay-open', () => this.__onDialogOpened());
|
|
327
343
|
this._overlayElement.addEventListener('vaadin-overlay-closed', () => this.__onDialogClosed());
|
|
344
|
+
this._overlayElement.setAttribute('role', 'alertdialog');
|
|
328
345
|
|
|
329
346
|
this._headerController = new SlotController(this, 'header', 'h3', {
|
|
330
347
|
initializer: (node) => {
|
|
@@ -338,7 +355,14 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
|
|
|
338
355
|
multiple: true,
|
|
339
356
|
observe: false,
|
|
340
357
|
initializer: (node) => {
|
|
341
|
-
|
|
358
|
+
const wrapper = document.createElement('div');
|
|
359
|
+
wrapper.style.display = 'contents';
|
|
360
|
+
const wrapperId = `confirm-dialog-message-${generateUniqueId()}`;
|
|
361
|
+
wrapper.id = wrapperId;
|
|
362
|
+
wrapper.appendChild(node);
|
|
363
|
+
this.appendChild(wrapper);
|
|
364
|
+
setAriaIDReference(this._overlayElement, 'aria-describedby', { newId: wrapperId });
|
|
365
|
+
this._messageNodes = [...this._messageNodes, wrapper];
|
|
342
366
|
},
|
|
343
367
|
});
|
|
344
368
|
this.addController(this._messageController);
|
|
@@ -366,6 +390,19 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
|
|
|
366
390
|
this.addController(this._confirmController);
|
|
367
391
|
}
|
|
368
392
|
|
|
393
|
+
/** @private */
|
|
394
|
+
__accessibleDescriptionRefChanged(_overlayElement, accessibleDescriptionRef) {
|
|
395
|
+
if (!_overlayElement || (!accessibleDescriptionRef && !this.__oldAccessibleDescriptionRef)) {
|
|
396
|
+
return;
|
|
397
|
+
}
|
|
398
|
+
setAriaIDReference(this._overlayElement, 'aria-describedby', {
|
|
399
|
+
newId: accessibleDescriptionRef,
|
|
400
|
+
oldId: this.__oldAccessibleDescriptionRef,
|
|
401
|
+
fromUser: true,
|
|
402
|
+
});
|
|
403
|
+
this.__oldAccessibleDescriptionRef = accessibleDescriptionRef;
|
|
404
|
+
}
|
|
405
|
+
|
|
369
406
|
/** @private */
|
|
370
407
|
__onDialogOpened() {
|
|
371
408
|
const overlay = this._overlayElement;
|
|
@@ -432,9 +469,11 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
|
|
|
432
469
|
/** @private */
|
|
433
470
|
__updateMessageNodes(nodes, message) {
|
|
434
471
|
if (nodes && nodes.length > 0) {
|
|
435
|
-
const
|
|
436
|
-
|
|
437
|
-
|
|
472
|
+
const defaultWrapperNode = nodes.find(
|
|
473
|
+
(node) => this._messageController.defaultNode && node === this._messageController.defaultNode.parentElement,
|
|
474
|
+
);
|
|
475
|
+
if (defaultWrapperNode) {
|
|
476
|
+
defaultWrapperNode.firstChild.textContent = message;
|
|
438
477
|
}
|
|
439
478
|
}
|
|
440
479
|
}
|
package/web-types.json
CHANGED
|
@@ -1,15 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/confirm-dialog",
|
|
4
|
-
"version": "24.1.0-
|
|
4
|
+
"version": "24.1.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-confirm-dialog",
|
|
11
|
-
"description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-
|
|
11
|
+
"description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-beta1/#/elements/vaadin-overlay) for the overlay styling documentation.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for theming:\n\nPart name | Description\n-----------------|-------------------------------------------\n`header` | The header element wrapper\n`message` | The message element wrapper\n`footer` | The footer element that wraps the buttons\n`cancel-button` | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button` | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\nAlso, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the\n`<vaadin-confirm-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name | Description\n------------------|---------------------------\n`header` | Slot for header element\n`cancel-button` | Slot for \"Cancel\" button\n`confirm-button` | Slot for \"Confirm\" button\n`reject-button` | Slot for \"Reject\" button",
|
|
12
12
|
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "accessible-description-ref",
|
|
15
|
+
"description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, all elements inside the message area are linked\nthrough the `aria-describedby` 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.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"string",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
13
24
|
{
|
|
14
25
|
"name": "opened",
|
|
15
26
|
"description": "True if the overlay is currently displayed.",
|
|
@@ -145,6 +156,17 @@
|
|
|
145
156
|
],
|
|
146
157
|
"js": {
|
|
147
158
|
"properties": [
|
|
159
|
+
{
|
|
160
|
+
"name": "accessibleDescriptionRef",
|
|
161
|
+
"description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, all elements inside the message area are linked\nthrough the `aria-describedby` 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.",
|
|
162
|
+
"value": {
|
|
163
|
+
"type": [
|
|
164
|
+
"string",
|
|
165
|
+
"null",
|
|
166
|
+
"undefined"
|
|
167
|
+
]
|
|
168
|
+
}
|
|
169
|
+
},
|
|
148
170
|
{
|
|
149
171
|
"name": "opened",
|
|
150
172
|
"description": "True if the overlay is currently displayed.",
|
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": "24.1.0-
|
|
4
|
+
"version": "24.1.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-confirm-dialog",
|
|
19
|
-
"description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-
|
|
19
|
+
"description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-beta1/#/elements/vaadin-overlay) for the overlay styling documentation.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for theming:\n\nPart name | Description\n-----------------|-------------------------------------------\n`header` | The header element wrapper\n`message` | The message element wrapper\n`footer` | The footer element that wraps the buttons\n`cancel-button` | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button` | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\nAlso, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the\n`<vaadin-confirm-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name | Description\n------------------|---------------------------\n`header` | Slot for header element\n`cancel-button` | Slot for \"Cancel\" button\n`confirm-button` | Slot for \"Confirm\" button\n`reject-button` | Slot for \"Reject\" button",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -47,6 +47,13 @@
|
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
|
+
{
|
|
51
|
+
"name": ".accessibleDescriptionRef",
|
|
52
|
+
"description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, all elements inside the message area are linked\nthrough the `aria-describedby` 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.",
|
|
53
|
+
"value": {
|
|
54
|
+
"kind": "expression"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
50
57
|
{
|
|
51
58
|
"name": ".header",
|
|
52
59
|
"description": "Set the confirmation dialog title.",
|