@brightspace-ui/core 3.80.1 → 3.81.1

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.
Files changed (3) hide show
  1. package/components/expand-collapse/README.md +8 -2
  2. package/components/tooltip/tooltip.js +3 -2
  3. package/package.json +1 -1
package/components/expand-collapse/README.md CHANGED
@@ -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
- ### Accessibility Properties
39
+ ## Accessibility
40
40
 
41
- To make your usage of `d2l-expand-collapse-content` accessible, the [`aria-expanded` attribute](https://www.w3.org/TR/wai-aria/#aria-expanded) should be added to the element that controls expanding and collapsing the content with `"true"` or `"false"` to indicate that the content is expanded or collapsed.
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
 
package/components/tooltip/tooltip.js CHANGED
@@ -29,12 +29,13 @@ const contentBorderSize = 1;
29
29
  const contentHorizontalPadding = 15;
30
30
  const outlineSize = 1;
31
31
 
32
- /* once a user shows a tooltip, ignore delay if they hover adjacent target within this timeout */
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.80.1",
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",