@blockquote-web-components/blockquote-dialog 1.0.1 → 1.1.0
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/README.md +30 -63
- package/package.json +3 -3
- package/src/BlockquoteDialog.js +25 -1
package/README.md
CHANGED
|
@@ -30,27 +30,28 @@ Inert content outside an active dialog is typically visually obscured or dimmed
|
|
|
30
30
|
|
|
31
31
|
##### Fields
|
|
32
32
|
|
|
33
|
-
| Name | Privacy | Type | Default | Description
|
|
34
|
-
| ----------------------------- | ------- | --------- | ----------- |
|
|
35
|
-
| `treewalker` | | | |
|
|
36
|
-
| `dialogRef` | | | |
|
|
37
|
-
| `open` | public | `boolean` | | Opens the dialog when set to \`true\` and closes it when set to \`false\`.
|
|
38
|
-
| `_slotTpl` | | | |
|
|
39
|
-
| `_labeledbyTpl` | | | |
|
|
40
|
-
| `_contentTpl` | | | |
|
|
41
|
-
| `_scrollerTpl` | | | |
|
|
42
|
-
| `_firstNodeFocusTrapTpl` | | | |
|
|
43
|
-
| `_lastNodeFocusTrapTpl` | | | |
|
|
44
|
-
| `_isConnectedCallbackResolve` | | | |
|
|
45
|
-
| `_isConnectedCallback` | | | |
|
|
46
|
-
| `_firstFocusableChild` | | | `undefined` |
|
|
47
|
-
| `_lastFocusableChild` | | | `undefined` |
|
|
48
|
-
| `_nextClickIsFromContent` | | `boolean` | `false` |
|
|
49
|
-
| `_overflowRoot` | | | |
|
|
50
|
-
| `type` | public | `string` | `'alert'` | The type of dialog for accessibility. Set this to \`alert\` to announce a
dialog as an alert dialog.
|
|
51
|
-
| `label` | public | `string` | `''` |
|
|
52
|
-
| `labelledby` | public | `string` | `''` |
|
|
53
|
-
| `
|
|
33
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
34
|
+
| ----------------------------- | ------- | --------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
|
|
35
|
+
| `treewalker` | | | | | |
|
|
36
|
+
| `dialogRef` | | | | | |
|
|
37
|
+
| `open` | public | `boolean` | | Opens the dialog when set to \`true\` and closes it when set to \`false\`. | |
|
|
38
|
+
| `_slotTpl` | | | | | |
|
|
39
|
+
| `_labeledbyTpl` | | | | | |
|
|
40
|
+
| `_contentTpl` | | | | | |
|
|
41
|
+
| `_scrollerTpl` | | | | | |
|
|
42
|
+
| `_firstNodeFocusTrapTpl` | | | | | |
|
|
43
|
+
| `_lastNodeFocusTrapTpl` | | | | | |
|
|
44
|
+
| `_isConnectedCallbackResolve` | | | | | |
|
|
45
|
+
| `_isConnectedCallback` | | | | | |
|
|
46
|
+
| `_firstFocusableChild` | | | `undefined` | | |
|
|
47
|
+
| `_lastFocusableChild` | | | `undefined` | | |
|
|
48
|
+
| `_nextClickIsFromContent` | | `boolean` | `false` | | |
|
|
49
|
+
| `_overflowRoot` | | | | | |
|
|
50
|
+
| `type` | public | `string` | `'alert'` | The type of dialog for accessibility. Set this to \`alert\` to announce a
dialog as an alert dialog. | |
|
|
51
|
+
| `label` | public | `string` | `''` | The 'label' attribute will be used as the 'aria-label' for the dialog | |
|
|
52
|
+
| `labelledby` | public | `string` | `''` | The 'labelledby' attribute will be used as the 'aria-labelledby' for the dialog.
It will also be used to create a slot with the same 'id' and 'name'.
This slot is hidden by default and its 'name' and 'id' should correspond to the 'slot' attribute of an element in the Light DOM.
This connects the 'slot', 'name', and 'id' attributes of a slot to be used with ARIA relationships. | |
|
|
53
|
+
| `labelledbyVisible` | public | `boolean` | `false` | The 'labelledbyVisible' attribute will control the visibility of the slot created by 'labelledby'.
By default, it is set to 'hidden'. | |
|
|
54
|
+
| `returnValue` | public | | | Gets or sets the dialog's return value, usually to indicate which button
a user pressed to close it.

https\://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue returnValue | |
|
|
54
55
|
|
|
55
56
|
##### Methods
|
|
56
57
|
|
|
@@ -78,12 +79,14 @@ Inert content outside an active dialog is typically visually obscured or dimmed
|
|
|
78
79
|
|
|
79
80
|
##### Attributes
|
|
80
81
|
|
|
81
|
-
| Name
|
|
82
|
-
|
|
|
83
|
-
| `open`
|
|
84
|
-
| `label`
|
|
85
|
-
| `labelledby`
|
|
86
|
-
| `
|
|
82
|
+
| Name | Field | Inherited From |
|
|
83
|
+
| --------------------- | ----------------- | -------------- |
|
|
84
|
+
| `open` | open | |
|
|
85
|
+
| `label` | label | |
|
|
86
|
+
| `labelledby` | labelledby | |
|
|
87
|
+
| `labelledbyVisible` | | |
|
|
88
|
+
| `type` | type | |
|
|
89
|
+
| `labelledby-visibile` | labelledbyVisible | |
|
|
87
90
|
|
|
88
91
|
##### Slots
|
|
89
92
|
|
|
@@ -109,42 +112,6 @@ Inert content outside an active dialog is typically visually obscured or dimmed
|
|
|
109
112
|
| ---- | ------------------ | ---------------- | ----------------------- | ------- |
|
|
110
113
|
| `js` | `BlockquoteDialog` | BlockquoteDialog | src/BlockquoteDialog.js | |
|
|
111
114
|
|
|
112
|
-
### `src/dom-utils.js`:
|
|
113
|
-
|
|
114
|
-
#### Functions
|
|
115
|
-
|
|
116
|
-
| Name | Description | Parameters | Return |
|
|
117
|
-
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- | ----------------------------------------------------- |
|
|
118
|
-
| `redispatchEvent` | Re-dispatches an event from the provided element.

This function is useful for forwarding non-composed events, such as \`change\`
events. | `element: Element, event: Event\|string, options: Object` | `boolean` |
|
|
119
|
-
| `isElementInvisible` | Checks if an element should be ignored. | `element: Element, exceptions: Array` | `boolean` |
|
|
120
|
-
| `isFocusable` | Checks if an element is focusable. An element is considered focusable if it matches
standard focusable elements criteria (such as buttons, inputs, etc., that are not disabled
and do not have a negative tabindex) or is a custom element with a shadow root that delegates focus. | `element: Element` | `boolean` |
|
|
121
|
-
| `getFirstAndLastFocusableChildren` | Retrieves the first and last focusable children of a node using a TreeWalker. | `walker: IterableIterator<HTMLElement>` | `[first: HTMLElement\|null, last: HTMLElement\|null]` |
|
|
122
|
-
| `walkComposedTree` | Traverse the composed tree from the root, selecting elements that meet the provided filter criteria.
You can pass \[NodeFilter]\(https\://developer.mozilla.org/en-US/docs/Web/API/NodeFilter) or 0 to retrieve all nodes. | `node: Node, whatToShow: number, filter: function, skipNode: function` | `IterableIterator<Node>` |
|
|
123
|
-
| `getDeepActiveElement` | Returns the deepest active element, considering Shadow DOM subtrees | `root: Document \| ShadowRoot` | `Element` |
|
|
124
|
-
| `deepContains` | Returns true if the first node contains the second, even if the second node
is in a shadow tree.

The standard Node.contains() function does not account for Shadow DOM, and
returns false if the supplied target node is sitting inside a shadow tree
within the container. | `container: Node, target: Node` | `boolean` |
|
|
125
|
-
| `indexOfItemContainingTarget` | Search a list element for the item that contains the specified target.

When dealing with UI events (e.g., mouse clicks) that may occur in
subelements inside a list item, you can use this routine to obtain the
containing list item. | `items: NodeList\|Node[], target: Node` | `number` |
|
|
126
|
-
| `composedAncestors` | Return the ancestors of the given node in the composed tree.

In the composed tree, the ancestor of a node assigned to a slot is that slot,
not the node's DOM ancestor. The ancestor of a shadow root is its host. | `node: Node` | `Iterable<Node>` |
|
|
127
|
-
| `isClickInsideRect` | Checks if a click event occurred inside a given bounding rectangle. | `rect: DOMRect, ev: PointerEvent` | `boolean` |
|
|
128
|
-
| `randomID` | | `length` | |
|
|
129
|
-
|
|
130
|
-
<hr/>
|
|
131
|
-
|
|
132
|
-
#### Exports
|
|
133
|
-
|
|
134
|
-
| Kind | Name | Declaration | Module | Package |
|
|
135
|
-
| ---- | ---------------------------------- | -------------------------------- | ---------------- | ------- |
|
|
136
|
-
| `js` | `redispatchEvent` | redispatchEvent | src/dom-utils.js | |
|
|
137
|
-
| `js` | `isElementInvisible` | isElementInvisible | src/dom-utils.js | |
|
|
138
|
-
| `js` | `isFocusable` | isFocusable | src/dom-utils.js | |
|
|
139
|
-
| `js` | `getFirstAndLastFocusableChildren` | getFirstAndLastFocusableChildren | src/dom-utils.js | |
|
|
140
|
-
| `js` | `walkComposedTree` | walkComposedTree | src/dom-utils.js | |
|
|
141
|
-
| `js` | `getDeepActiveElement` | getDeepActiveElement | src/dom-utils.js | |
|
|
142
|
-
| `js` | `deepContains` | deepContains | src/dom-utils.js | |
|
|
143
|
-
| `js` | `indexOfItemContainingTarget` | indexOfItemContainingTarget | src/dom-utils.js | |
|
|
144
|
-
| `js` | `composedAncestors` | composedAncestors | src/dom-utils.js | |
|
|
145
|
-
| `js` | `isClickInsideRect` | isClickInsideRect | src/dom-utils.js | |
|
|
146
|
-
| `js` | `randomID` | randomID | src/dom-utils.js | |
|
|
147
|
-
|
|
148
115
|
### `src/index.js`:
|
|
149
116
|
|
|
150
117
|
#### Exports
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blockquote-web-components/blockquote-dialog",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Webcomponent blockquote-dialog following open-wc recommendations",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit",
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
"SwitchCase": 1,
|
|
104
104
|
"ignoredNodes": [
|
|
105
105
|
"PropertyDefinition",
|
|
106
|
-
"TemplateLiteral >
|
|
106
|
+
"TemplateLiteral > *"
|
|
107
107
|
]
|
|
108
108
|
}
|
|
109
109
|
],
|
|
@@ -165,5 +165,5 @@
|
|
|
165
165
|
"access": "public"
|
|
166
166
|
},
|
|
167
167
|
"customElements": "custom-elements.json",
|
|
168
|
-
"gitHead": "
|
|
168
|
+
"gitHead": "d0a77e49014065e4265fa11d4736e65671f53479"
|
|
169
169
|
}
|
package/src/BlockquoteDialog.js
CHANGED
|
@@ -44,6 +44,7 @@ import { styles as animations } from './styles/blockqoute-dialog-animations-styl
|
|
|
44
44
|
* @attribute open
|
|
45
45
|
* @attribute label
|
|
46
46
|
* @attribute labelledby
|
|
47
|
+
* @attribute labelledbyVisible
|
|
47
48
|
* @attribute type
|
|
48
49
|
* @fires open
|
|
49
50
|
* @fires close
|
|
@@ -84,14 +85,32 @@ export class BlockquoteDialog extends LitElement {
|
|
|
84
85
|
attribute: false,
|
|
85
86
|
},
|
|
86
87
|
|
|
88
|
+
/**
|
|
89
|
+
* The 'label' attribute will be used as the 'aria-label' for the dialog
|
|
90
|
+
*/
|
|
87
91
|
label: {
|
|
88
92
|
type: String,
|
|
89
93
|
},
|
|
90
94
|
|
|
95
|
+
/**
|
|
96
|
+
* The 'labelledby' attribute will be used as the 'aria-labelledby' for the dialog.
|
|
97
|
+
* It will also be used to create a slot with the same 'id' and 'name'.
|
|
98
|
+
* This slot is hidden by default and its 'name' and 'id' should correspond to the 'slot' attribute of an element in the Light DOM.
|
|
99
|
+
* This connects the 'slot', 'name', and 'id' attributes of a slot to be used with ARIA relationships.
|
|
100
|
+
*/
|
|
91
101
|
labelledby: {
|
|
92
102
|
type: String,
|
|
93
103
|
},
|
|
94
104
|
|
|
105
|
+
/**
|
|
106
|
+
* The 'labelledbyVisible' attribute will control the visibility of the slot created by 'labelledby'.
|
|
107
|
+
* By default, it is set to 'hidden'.
|
|
108
|
+
*/
|
|
109
|
+
labelledbyVisible: {
|
|
110
|
+
type: String,
|
|
111
|
+
attribute: 'labelledby-visibile',
|
|
112
|
+
},
|
|
113
|
+
|
|
95
114
|
/**
|
|
96
115
|
* The type of dialog for accessibility. Set this to `alert` to announce a
|
|
97
116
|
* dialog as an alert dialog.
|
|
@@ -131,6 +150,7 @@ export class BlockquoteDialog extends LitElement {
|
|
|
131
150
|
this.type = 'alert';
|
|
132
151
|
this.label = '';
|
|
133
152
|
this.labelledby = '';
|
|
153
|
+
this.labelledbyVisible = false;
|
|
134
154
|
|
|
135
155
|
if (!isServer) {
|
|
136
156
|
this.addEventListener('submit', this._handleSubmit);
|
|
@@ -210,7 +230,11 @@ export class BlockquoteDialog extends LitElement {
|
|
|
210
230
|
}
|
|
211
231
|
|
|
212
232
|
get _labeledbyTpl() {
|
|
213
|
-
return html`
|
|
233
|
+
return html`
|
|
234
|
+
${this.labelledby
|
|
235
|
+
? blockquoteDirectiveAriaidrefSlot(this.labelledby, this.labelledbyVisible)
|
|
236
|
+
: ''}
|
|
237
|
+
`;
|
|
214
238
|
}
|
|
215
239
|
|
|
216
240
|
get _contentTpl() {
|