@brightspace-ui/core 3.80.1 → 3.81.1
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -36,7 +36,13 @@ The `d2l-expand-collapse-content` element can be used to create expandable and c
|
|
|
36
36
|
- `d2l-expand-collapse-content-collapse`: dispatched when the content starts to collapse. The `detail` contains a `collapseComplete` promise that can be waited on to determine when the content has finished collapsing.
|
|
37
37
|
<!-- docs: end hidden content -->
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
## Accessibility
|
|
40
40
|
|
|
41
|
-
To make your usage of `d2l-expand-collapse-content` accessible, the [
|
|
41
|
+
To make your usage of `d2l-expand-collapse-content` accessible, it should follow the [W3C Disclosure (Show/Hide) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
|
|
42
|
+
|
|
43
|
+
To achieve this, the control that toggles the expanded state should:
|
|
44
|
+
- Use the [`d2l-button`](../button) or use an element with the [`button`](https://w3c.github.io/aria/#button) role
|
|
45
|
+
- Toggle between states when using the `Enter` and `Space` buttons and retain focus upon toggle
|
|
46
|
+
- Have the [`aria-expanded`](https://www.w3.org/TR/wai-aria/#aria-expanded) attribute set to `'true'` or `'false'` depending on expansion state so that screen reader users will know what state it's in
|
|
47
|
+
- Be adjacent to the expanded/collapsed content
|
|
42
48
|
|
|
@@ -29,12 +29,13 @@ const contentBorderSize = 1;
|
|
|
29
29
|
const contentHorizontalPadding = 15;
|
|
30
30
|
const outlineSize = 1;
|
|
31
31
|
|
|
32
|
-
/* once a user
|
|
32
|
+
/* once a user closes a tooltip, ignore delay if they hover adjacent target within this timeout */
|
|
33
33
|
let delayTimeoutId;
|
|
34
34
|
const resetDelayTimeout = () => {
|
|
35
35
|
if (delayTimeoutId) clearTimeout(delayTimeoutId);
|
|
36
36
|
delayTimeoutId = setTimeout(() => delayTimeoutId = null, 1000);
|
|
37
37
|
};
|
|
38
|
+
/* ignore delay if user hovers adjacent target when a tooltip is already open */
|
|
38
39
|
const getDelay = delay => {
|
|
39
40
|
if (delayTimeoutId) return 0;
|
|
40
41
|
else return delay;
|
|
@@ -847,7 +848,6 @@ class Tooltip extends RtlMixin(LitElement) {
|
|
|
847
848
|
if (!this._truncating) return;
|
|
848
849
|
}
|
|
849
850
|
|
|
850
|
-
resetDelayTimeout();
|
|
851
851
|
this._isHovering = true;
|
|
852
852
|
this._updateShowing();
|
|
853
853
|
}, getDelay(this.delay));
|
|
@@ -925,6 +925,7 @@ class Tooltip extends RtlMixin(LitElement) {
|
|
|
925
925
|
this._dismissibleId = null;
|
|
926
926
|
}
|
|
927
927
|
if (dispatch) {
|
|
928
|
+
resetDelayTimeout();
|
|
928
929
|
this.dispatchEvent(new CustomEvent(
|
|
929
930
|
'd2l-tooltip-hide', { bubbles: true, composed: true }
|
|
930
931
|
));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.81.1",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|