@brightspace-ui/core 2.86.2 → 2.86.4

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/list/list-item-button-mixin.js

@@ -20,38 +20,12 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 			:host(:not([button-disabled])) {
 				--d2l-list-item-content-text-color: var(--d2l-color-celestine);
 			}
-			:host([button-disabled][_hovering-primary-action]) .d2l-list-item-content,
-			:host([button-disabled][_focusing-primary-action]) .d2l-list-item-content {
-				--d2l-list-item-content-text-color: unset;
-				--d2l-list-item-content-text-decoration: none;
-			}
-			:host([button-disabled]) button {
-				cursor: default;
+			:host([button-disabled]) [slot="content-action"] {
+				pointer-events: none;
 			}
 			[slot="outside-control-container"] {
 				margin: 0 -12px;
 			}
-			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_hovering]) [slot="control-container"]::before,
-			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_hovering]) [slot="control-container"]::after,
-			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_focusing]) [slot="control-container"]::before,
-			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_focusing]) [slot="control-container"]::after,
-			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_hovering]) [slot="control-container"]::before,
-			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_hovering]) [slot="control-container"]::after,
-			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_focusing]) [slot="control-container"]::before,
-			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_focusing]) [slot="control-container"]::after {
-				border-top-color: transparent;
-			}
-			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"],
-			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_focusing]) [slot="outside-control-container"],
-			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"],
-			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_focusing]) [slot="outside-control-container"] {
-				background-color: white;
-				border-color: #b6cbe8; /* celestine alpha 0.3 */
-			}
-			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"],
-			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"] {
-				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-			}
 			button {
 				background-color: transparent;
 				border: none;
@@ -61,11 +35,6 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 				outline: none;
 				width: 100%;
 			}
-			/* simply hide the button action layer rather than disabling button so
-			 that the cursor pointer ins't displayed when hovering skeleton */
-			:host([skeleton]) button {
-				display: none;
-			}
 		` ];
 
 		super.styles && styles.unshift(super.styles);
@@ -78,6 +47,11 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 		this.buttonDisabled = false;
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('buttonDisabled') && this.buttonDisabled === true) this._hoveringPrimaryAction = false;
+	}
+
 	_onButtonClick() {
 		/** Dispatched when the item's primary button action is clicked */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-button-click', { bubbles: true }));

package/components/list/list-item-checkbox-mixin.js

@@ -1,6 +1,5 @@
 import '../selection/selection-input.js';
 import { css, html, nothing } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { SelectionInfo } from '../selection/selection-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
@@ -33,7 +32,8 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 			 * Private. The selection info (set by the selection component).
 			 * @ignore
 			 */
-			selectionInfo: { type: Object, attribute: false }
+			selectionInfo: { type: Object, attribute: false },
+			_hoveringSelection: { type: Boolean, attribute: '_hovering-selection', reflect: true }
 		};
 	}
 
@@ -44,7 +44,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 				display: block;
 				height: 100%;
 			}
-			.d2l-checkbox-action.d2l-checkbox-action-disabled {
+			:host([selection-disabled]) .d2l-checkbox-action {
 				cursor: default;
 			}
 		` ];
@@ -95,6 +95,11 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 		if (!suppressEvent) this._dispatchSelected(selected);
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('selectionDisabled') && this.selectionDisabled === true) this._hoveringSelection = false;
+	}
+
 	async _dispatchSelected(value) {
 		/* wait for internal state to be updated in case of action-click case so that a consumer
 		 calling getSelectionInfo will get the correct state */
@@ -124,6 +129,14 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 		}
 	}
 
+	_onMouseEnterSelection() {
+		this._hoveringSelection = !this.selectionDisabled;
+	}
+
+	_onMouseLeaveSelection() {
+		this._hoveringSelection = false;
+	}
+
 	_onNestedSlotChangeCheckboxMixin() {
 		this._updateNestedSelectionProvider();
 	}
@@ -144,19 +157,17 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 				key="${this.key}"
 				label="${this.label}"
 				?skeleton="${this.skeleton}"
-				.hovering="${this._hovering}">
+				.hovering="${this._hoveringSelection}">
 			</d2l-selection-input>
 		` : nothing;
 	}
 
 	_renderCheckboxAction(inner) {
-		const classes = {
-			'd2l-checkbox-action': true,
-			'd2l-checkbox-action-disabled': this.selectionDisabled
-		};
 		return this.selectable ? html`
 			<div @click="${this._onCheckboxActionClick}"
-				class="${classMap(classes)}">
+				@mouseenter="${this._onMouseEnterSelection}"
+				@mouseleave="${this._onMouseLeaveSelection}"
+				class="d2l-checkbox-action">
 				${inner}
 			</div>
 			` : nothing;

package/components/list/list-item-link-mixin.js

@@ -21,29 +21,12 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 			:host([action-href]:not([action-href=""])) {
 				--d2l-list-item-content-text-color: var(--d2l-color-celestine);
 			}
-			:host([action-href]:not([action-href=""])[_hovering]) [slot="control-container"]::before,
-			:host([action-href]:not([action-href=""])[_hovering]) [slot="control-container"]::after,
-			:host([action-href]:not([action-href=""])[_focusing]) [slot="control-container"]::before,
-			:host([action-href]:not([action-href=""])[_focusing]) [slot="control-container"]::after {
-				border-top-color: transparent;
-			}
-			:host(:not([skeleton])[action-href]:not([action-href=""])[_hovering]) [slot="outside-control-container"],
-			:host(:not([skeleton])[action-href]:not([action-href=""])[_focusing]) [slot="outside-control-container"] {
-				background-color: white;
-				border-color: #b6cbe8; /* celestine alpha 0.3 */
-			}
-			:host(:not([skeleton])[action-href]:not([action-href=""])[_hovering]) [slot="outside-control-container"] {
-				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-			}
 			a[href] {
 				display: block;
 				height: 100%;
 				outline: none;
 				width: 100%;
 			}
-			:host([skeleton]) a {
-				display: none;
-			}
 		` ];
 
 		super.styles && styles.unshift(super.styles);
@@ -56,6 +39,11 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 		this._primaryActionId = getUniqueId();
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('actionHref') && !this.actionHref) this._hoveringPrimaryAction = false;
+	}
+
 	_handleLinkClick() {
 		/** Dispatched when the item's primary link action is clicked */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-link-click', { bubbles: true }));

package/components/list/list-item-mixin.js

@@ -147,12 +147,16 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host(:last-of-type[_separators="between"]) [slot="control-container"]::after,
 			:host([_separators="none"]) [slot="control-container"]::before,
 			:host([_separators="none"]) [slot="control-container"]::after,
-			:host([selectable][_hovering]:not([selection-disabled])) [slot="control-container"]::before,
-			:host([selectable][_hovering]:not([selection-disabled])) [slot="control-container"]::after,
+			:host([_hovering-selection]) [slot="control-container"]::before,
+			:host([_hovering-selection]) [slot="control-container"]::after,
+			:host([_hovering-primary-action]) [slot="control-container"]::before,
+			:host([_hovering-primary-action]) [slot="control-container"]::after,
 			:host([selectable][_focusing]) [slot="control-container"]::before,
 			:host([selectable][_focusing]) [slot="control-container"]::after,
-			:host([selected]) [slot="control-container"]::before,
-			:host([selected]) [slot="control-container"]::after,
+			:host([_focusing-primary-action]) [slot="control-container"]::before,
+			:host([_focusing-primary-action]) [slot="control-container"]::after,
+			:host([selected]:not([selection-disabled]):not([skeleton])) [slot="control-container"]::before,
+			:host([selected]:not([selection-disabled]):not([skeleton])) [slot="control-container"]::after,
 			:host(:first-of-type[_nested]) [slot="control-container"]::before {
 				border-top-color: transparent;
 			}
@@ -317,17 +321,21 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin: 0;
 			}
 
-			:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"],
-			:host(:not([selection-disabled]):not([skeleton])[selectable][_hovering]) [slot="outside-control-container"],
+			:host([_hovering-primary-action]) [slot="outside-control-container"],
+			:host([_hovering-selection]) [slot="outside-control-container"],
+			:host([_focusing-primary-action]) [slot="outside-control-container"],
+			:host(:not([selection-disabled]):not([skeleton])[selected][_hovering-selection]) [slot="outside-control-container"],
 			:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"] {
 				background-color: white;
 				border-color: #b6cbe8; /* celestine alpha 0.3 */
 			}
-			:host(:not([selection-disabled]):not([skeleton])[selectable][_hovering]) [slot="outside-control-container"] {
+			:host([_hovering-primary-action]) [slot="outside-control-container"],
+			:host([_hovering-selection]) [slot="outside-control-container"] {
 				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 			}
 			:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"] {
 				background-color: #f3fbff;
+				border-color: #b6cbe8; /* celestine alpha 0.3 */
 			}
 
 			:host(:not([selection-disabled]):not([skeleton])[padding-type="none"]) [slot="outside-control-container"] {
@@ -343,7 +351,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				transition: border-color 400ms linear;
 			}
 			:host([_highlighting]) [slot="outside-control-container"],
-			:host(:not([selection-disabled]):not([skeleton])[_hovering][_highlighting]) [slot="outside-control-container"],
+			:host([_hovering-selection][_highlighting]) [slot="outside-control-container"],
 			:host(:not([selection-disabled]):not([skeleton])[_focusing][_highlighting]) [slot="outside-control-container"],
 			:host(:not([selection-disabled]):not([skeleton])[selected][_highlighting]) [slot="outside-control-container"] {
 				background-color: var(--d2l-color-celestine-plus-2);
@@ -363,6 +371,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			.d2l-list-item-tooltip-key {
 				font-weight: 700;
 			}
+			:host([skeleton]) {
+				pointer-events: none;
+			}
 		`];
 
 		super.styles && styles.unshift(super.styles);
@@ -632,7 +643,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					${this._renderExpandCollapse()}
 				</div>
 				${this.selectable ? html`<div slot="control">${this._renderCheckbox()}</div>` : nothing}
-				${this.selectable || this.expandable ? html`<div slot="control-action"
+				${this.selectable || this.expandable ? html`
+				<div slot="control-action"
 					@mouseenter="${this._onMouseEnter}"
 					@mouseleave="${this._onMouseLeave}">
 						${this._renderCheckboxAction('')}

package/package.json

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