@brightspace-ui/core 2.86.1 → 2.86.3

package/components/collapsible-panel/README.md

@@ -349,7 +349,10 @@ Collapsible panels have two optional slots, `header` and `actions` that can be u
 	</div>
 	<d2l-collapsible-panel-summary-item slot="summary" text="Week 2 Lab (PDF) attached"></d2l-collapsible-panel-summary-item>
 	<d2l-collapsible-panel-summary-item slot="summary" text="1 comment"></d2l-collapsible-panel-summary-item>
-	Expanded content
+	<p style="margin-top: 0;">Sweet roll candy dessert caramels shortbread gummies toffee oat cake cookie. Wafer gummies shortbread sweet halvah jujubes sweet. Cake chocolate chocolate bar carrot cake marzipan. Icing chupa chups jujubes macaroon toffee chocolate bar wafer croissant.</p>
+	<p>Toffee pastry chupa chups lollipop carrot cake chocolate cake sweet roll sweet roll. Marzipan pudding candy canes jelly lemon drops oat cake ice cream. Wafer danish pudding marzipan chupa chups jelly beans brownie.</p>
+	<p>Pastry apple pie biscuit sesame snaps sweet pie apple pie dessert jelly beans. Lemon drops croissant tootsie roll croissant oat cake. Macaroon toffee pie gummi bears cupcake wafer tiramisu.</p>
+	<p style="margin-bottom: 0;">Chocolate cake ice cream cake chocolate bar dessert. Donut tiramisu fruitcake tiramisu liquorice shortbread sugar plum macaroon caramels. Tart candy cookie ice cream dessert tootsie roll.</p>
 </d2l-collapsible-panel>
 ```
 

package/components/collapsible-panel/collapsible-panel.js

@@ -103,15 +103,16 @@ class CollapsiblePanel extends RtlMixin(LitElement) {
 			:host(:not([expanded])) .d2l-collapsible-panel {
 				cursor: pointer;
 			}
-			:host([type=subtle]) .d2l-collapsible-panel {
+			:host([type="subtle"]) .d2l-collapsible-panel {
 				background-color: white;
 				border: none;
 				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03);
 			}
-			:host([type=inline]) .d2l-collapsible-panel {
+			:host([type="inline"]) .d2l-collapsible-panel {
 				border-left: none;
 				border-radius: 0;
 				border-right: none;
+				outline-offset: -2px;
 			}
 			:host([heading-style="1"]) {
 				--d2l-collapsible-panel-header-spacing: 1.2rem;
@@ -124,6 +125,10 @@ class CollapsiblePanel extends RtlMixin(LitElement) {
 				cursor: pointer;
 				padding: var(--d2l-collapsible-panel-header-spacing) 0;
 			}
+			:host([type="inline"]) .d2l-collapsible-panel-header {
+				border-radius: 0;
+				outline-offset: -2px;
+			}
 			.d2l-collapsible-panel.scrolled .d2l-collapsible-panel-header {
 				background-color: white;
 				box-shadow: 0 8px 12px -9px rgba(0, 0, 0, 0.3);

package/components/dialog/README.md

@@ -257,16 +257,28 @@ document.querySelector('#open').addEventListener('click', () => {
 });
 ```
 
-## Focus Management
+## Accessibility
+
+### Focus Management
 
 When opened, focus will be automatically placed within the dialog. The element to be focused will either be the content element having the optional `autofocus` attribute, or a focusable element identified by the dialog depending on the type of dialog. For `d2l-dialog` and `d2l-dialog-fullscreen`, the first focusable element will be focused. For `d2l-dialog-confirm`, the least destructive action will be focused, which is assumed to be the first non-primary button in the footer.
 
-### Specifying an `autofocus` Element (Optional)
+#### Specifying an `autofocus` Element (Optional)
 
 To specify which element should be focused, add the `autofocus` attribute to that element. An element with the `autofocus` attribute will receive focus if the element has a `tabindex` value of `0` or `-1`, or is a naturally focusable element (e.g. button).
 
 Note that the element must be in the dialog content's DOM scope and not within another component's Shadow DOM.
 
+### Announcing the dialog text
+
+When using `d2l-dialog` or `d2l-dialog-fullscreen` the dialog text will not be announced by screen readers. Screen readers will announce the presence of a dialog, the dialog title, and the currently focused element. For example, the general dialog example at the top of this page reads "Dialog Title dialog. clickable Done button.". The text "Some dialog content" is not announced.
+
+To announce the dialog text, use one of the following methods:
+
+1. Use `d2l-dialog-confirm` instead
+2. Add `describe-content="true"` (if using `d2l-dialog`)
+3. Set `autofocus` on the first text element (see above for details)
+
 <!-- docs: start hidden content -->
 ## Future Improvements
 

package/components/tooltip/tooltip.js

@@ -11,6 +11,9 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 let logAccessibilityWarning = true;
 
+/* only one tooltip is to be shown at once - track the active tooltip so it can be hidden if necessary */
+let activeTooltip = null;
+
 const pointerLength = 16;
 const pointerOverhang = 7; /* how far the pointer extends outside the content */
 
@@ -430,8 +433,6 @@ class Tooltip extends RtlMixin(LitElement) {
 		this._onTargetTouchStart = this._onTargetTouchStart.bind(this);
 		this._onTargetTouchEnd = this._onTargetTouchEnd.bind(this);
 
-		this._onTooltipShowOther = this._onTooltipShowOther.bind(this);
-
 		this.announced = false;
 		this.closeOnClick = false;
 		this.delay = 300;
@@ -474,9 +475,9 @@ class Tooltip extends RtlMixin(LitElement) {
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		if (activeTooltip === this) activeTooltip = null;
 		this._removeListeners();
 		window.removeEventListener('resize', this._onTargetResize);
-		document.body.removeEventListener('d2l-tooltip-show', this._onTooltipShowOther);
 		clearDismissible(this._dismissibleId);
 		delayTimeoutId = null;
 		this._dismissibleId = null;
@@ -862,11 +863,6 @@ class Tooltip extends RtlMixin(LitElement) {
 		}, 500);
 	}
 
-	_onTooltipShowOther() {
-		// only allow one tooltip showing at a time
-		this.hide();
-	}
-
 	_removeListeners() {
 		if (!this._target) {
 			return;
@@ -890,6 +886,11 @@ class Tooltip extends RtlMixin(LitElement) {
 		clearTimeout(this._hoverTimeout);
 		clearTimeout(this._longPressTimeout);
 		if (newValue) {
+			if (!this.forceShow) {
+				if (activeTooltip) activeTooltip.hide();
+				activeTooltip = this;
+			}
+
 			this._dismissibleId = setDismissible(() => this.hide());
 			this.setAttribute('aria-hidden', 'false');
 			await this.updateComplete;
@@ -898,10 +899,10 @@ class Tooltip extends RtlMixin(LitElement) {
 				'd2l-tooltip-show', { bubbles: true, composed: true }
 			));
 
-			document.body.addEventListener('d2l-tooltip-show', this._onTooltipShowOther, true);
-
 			if (this.announced && !this._isInteractive(this._target)) announce(this.innerText);
 		} else {
+			if (activeTooltip === this) activeTooltip = null;
+
 			this.setAttribute('aria-hidden', 'true');
 			if (this._dismissibleId) {
 				clearDismissible(this._dismissibleId);
@@ -910,8 +911,6 @@ class Tooltip extends RtlMixin(LitElement) {
 			this.dispatchEvent(new CustomEvent(
 				'd2l-tooltip-hide', { bubbles: true, composed: true }
 			));
-
-			document.body.removeEventListener('d2l-tooltip-show', this._onTooltipShowOther, true);
 		}
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.86.1",
+  "version": "2.86.3",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",