@brightspace-ui/core 3.110.2 → 3.111.0

package/components/list/demo/list.html

@@ -6,14 +6,17 @@
 		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
 		<script type="module">
 			import '../../button/button-icon.js';
+			import '../../button/button-subtle.js';
 			import '../../demo/demo-page.js';
 			import '../../dropdown/dropdown-menu.js';
 			import '../../dropdown/dropdown-more.js';
 			import '../../menu/menu.js';
 			import '../../menu/menu-item.js';
 			import '../../tooltip/tooltip.js';
+			import '../../tooltip/tooltip-help.js';
 			import '../list-item-content.js';
 			import '../list-item.js';
+			import '../list-item-button.js';
 			import '../list.js';
 			import '../../tag-list/tag-list.js';
 			import '../../tag-list/tag-list-item.js';
@@ -201,6 +204,96 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>List (with interactive primary action content)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-list grid>
+						<d2l-list-item expandable key="expand-1" label="Expandable item #1" href=" ">
+							<d2l-list-item-content>
+								<div>Week 1: Introduction</div>
+								<div slot="secondary" style="padding: 5px;"><d2l-tooltip-help text="Due: Jan 30, 2023">Available: Aug 11, 2023</d2l-tooltip-help></div>
+								<div slot="supporting-info"><d2l-button-subtle style="padding: 5px;" text="Bookmark" icon="tier1:bookmark-hollow"></d2l-button-subtle></div>
+							</d2l-list-item-content>
+							<d2l-list grid slot="nested">
+								<d2l-list-item selectable key="nested-1" label="Nested 1">
+								  <d2l-list-item-content><div>Nested item #1</div></d2l-list-item-content>
+								</d2l-list-item>
+								<d2l-list-item selectable key="nested-2" label="Nested 2">
+								  <d2l-list-item-content><div>Nested item #2</div></d2l-list-item-content>
+								</d2l-list-item>
+							  </d2l-list>
+						</d2l-list-item>
+						<d2l-list-item href="http://www.d2l.com">
+							<d2l-list-item-content>
+								<div>Week 2: Learn more</div>
+								<div slot="secondary">Secondary Information</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item href="http://www.d2l.com">
+							<d2l-list-item-content>
+								<div>Week 3: Learn even more!</div>
+								<div slot="secondary">Secondary Information</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+					</d2l-list>
+				</template>
+				<script type="module">
+					requestAnimationFrame(() => {
+						document.querySelector('d2l-button-subtle').addEventListener('click', () => {
+							console.log('d2l-button: click event');
+						});
+					});
+				</script>
+			</d2l-demo-snippet>
+
+			<h2>List (with button-items and interactive primary action content) </h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-list grid id="button-item-list">
+						<d2l-list-item-button expandable key="expand-1" label="Expandable item #1">
+							<d2l-list-item-content>
+								<div>Week 1: Introduction</div>
+								<div slot="secondary" style="padding: 5px;"><d2l-tooltip-help text="Due: Jan 30, 2023">Available: Aug 11, 2023</d2l-tooltip-help></div>
+								<div slot="supporting-info"><d2l-button-subtle style="padding: 5px;" text="Bookmark" icon="tier1:bookmark-hollow"></d2l-button-subtle></div>
+							</d2l-list-item-content>
+							<d2l-list grid slot="nested">
+								<d2l-list-item-button selectable key="nested-1" label="Nested 1">
+								  <d2l-list-item-content><div>Nested item #1</div></d2l-list-item-content>
+								</d2l-list-item-button>
+								<d2l-list-item-button selectable key="nested-2" label="Nested 2">
+								  <d2l-list-item-content><div>Nested item #2</div></d2l-list-item-content>
+								</d2l-list-item-button>
+							  </d2l-list>
+						</d2l-list-item-button>
+						<d2l-list-item-button button-disabled>
+							<d2l-list-item-content>
+								<div>Week 2: Learn more</div>
+								<div slot="secondary">Secondary Information</div>
+							</d2l-list-item-content>
+						</d2l-list-item-button>
+						<d2l-list-item-button>
+							<d2l-list-item-content>
+								<div>Week 3: Learn even more!</div>
+								<div slot="secondary">Secondary Information</div>
+							</d2l-list-item-content>
+						</d2l-list-item-button>
+					</d2l-list>
+				</template>
+				<script type="module">
+					requestAnimationFrame(() => {
+						const list = document.querySelector('#button-item-list');
+						list.addEventListener('d2l-list-item-button-click', () => {
+							console.log('d2l-list-item-button: click event');
+						});
+						list.querySelector('d2l-button-subtle').addEventListener('click', () => {
+							console.log('d2l-button: click event');
+						});
+					});
+				</script>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 
 	</body>

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

@@ -1,7 +1,8 @@
 import '../colors/colors.js';
 import { css, html } from 'lit';
+import { listInteractiveElems, ListItemMixin } from './list-item-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { ListItemMixin } from './list-item-mixin.js';
+import { isInteractiveInComposedPath } from '../../helpers/interactive.js';
 
 export const ListItemButtonMixin = superclass => class extends ListItemMixin(superclass) {
 	static get properties() {
@@ -29,17 +30,20 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 			button {
 				background-color: transparent;
 				border: none;
+				color: unset;
 				cursor: pointer;
 				display: block;
+				font-family: unset;
+				font-size: unset;
+				font-weight: unset;
 				height: 100%;
+				letter-spacing: unset;
+				line-height: unset;
 				outline: none;
+				padding: 0;
+				text-align: start;
 				width: 100%;
 			}
-			:host(:not([button-disabled]):not([no-primary-action])) [slot="content"],
-			:host(:not([no-primary-action])) [slot="control-action"] ~ [slot="content"],
-			:host(:not([no-primary-action])) [slot="outside-control-action"] ~ [slot="content"] {
-				pointer-events: none;
-			}
 			:host(:not([button-disabled])) [slot="control-action"],
 			:host(:not([button-disabled])) [slot="outside-control-action"] {
 				grid-column-end: control-end;
@@ -61,13 +65,35 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 		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 }));
+	_getDescendantClicked(e) {
+		const isPrimaryAction = (elem) => elem === this.shadowRoot.querySelector(`#${this._primaryActionId}`);
+		return isInteractiveInComposedPath(e.composedPath(), isPrimaryAction, { elements: listInteractiveElems });
+	}
+
+	_onButtonClick(e) {
+		if (this._getDescendantClicked(e)) {
+			e.preventDefault();
+		} else {
+			/** Dispatched when the item's primary button action is clicked */
+			this.dispatchEvent(new CustomEvent('d2l-list-item-button-click', { bubbles: true }));
+		}
+	}
+
+	_onButtonFocus(e) {
+		if (this._getDescendantClicked(e)) {
+			e.stopPropagation();
+		}
 	}
 
-	_renderPrimaryAction(labelledBy) {
-		return html`<button id="${this._primaryActionId}" aria-labelledby="${labelledBy}" @click="${this._onButtonClick}" ?disabled="${this.buttonDisabled}"></button>`;
+	_renderPrimaryAction(labelledBy, content) {
+		return html`<button 
+			id="${this._primaryActionId}" 
+			aria-labelledby="${labelledBy}" 
+			@click="${this._onButtonClick}" 
+			@focusin="${this._onButtonFocus}"
+			?disabled="${this.buttonDisabled}">
+			${content}
+		</button>`;
 	}
 
 };

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

@@ -330,6 +330,9 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			:host([_drop-location="7"]) [slot="control-container"]::after {
 				border-color: transparent;
 			}
+			:host(:not([no-primary-action])) [slot="outside-control-action"] ~ [slot="content"] {
+				pointer-events: none;
+			}
 
 			@media only screen and (hover: hover), only screen and (pointer: fine) {
 				d2l-list-item-drag-handle {

package/components/list/list-item-generic-layout.js

@@ -154,7 +154,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			}
 
 			::slotted([slot="content-action"]) {
-				grid-column: content-start / end;
+				grid-column: content-start / content-end;
 			}
 
 			:host([no-primary-action]) ::slotted([slot="content-action"]) {

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

@@ -1,7 +1,8 @@
 import '../colors/colors.js';
 import { css, html } from 'lit';
+import { listInteractiveElems, ListItemMixin } from './list-item-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { ListItemMixin } from './list-item-mixin.js';
+import { isInteractiveInComposedPath } from '../../helpers/interactive.js';
 
 export const ListItemLinkMixin = superclass => class extends ListItemMixin(superclass) {
 
@@ -22,16 +23,13 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 				--d2l-list-item-content-text-color: var(--d2l-color-celestine);
 			}
 			a[href] {
+				color: unset;
 				display: block;
 				height: 100%;
 				outline: none;
+				text-decoration: none;
 				width: 100%;
 			}
-			:host([action-href]:not([action-href=""])) [slot="content"],
-			:host(:not([no-primary-action])) [slot="control-action"] ~ [slot="content"],
-			:host(:not([no-primary-action])) [slot="outside-control-action"] ~ [slot="content"] {
-				pointer-events: none;
-			}
 			:host([action-href]:not([action-href=""])) [slot="control-action"],
 			:host([action-href]:not([action-href=""])) [slot="outside-control-action"] {
 				grid-column-end: control-end;
@@ -53,9 +51,24 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 		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 }));
+	_getDescendantClicked(e) {
+		const isPrimaryAction = (elem) => elem === this.shadowRoot.querySelector(`#${this._primaryActionId}`);
+		return isInteractiveInComposedPath(e.composedPath(), isPrimaryAction, { elements: listInteractiveElems });
+	}
+
+	_handleLinkClick(e) {
+		if (this._getDescendantClicked(e)) {
+			e.preventDefault();
+		} else {
+			/** Dispatched when the item's primary link action is clicked */
+			this.dispatchEvent(new CustomEvent('d2l-list-item-link-click', { bubbles: true }));
+		}
+	}
+
+	_handleLinkFocus(e) {
+		if (this._getDescendantClicked(e)) {
+			e.stopPropagation();
+		}
 	}
 
 	_handleLinkKeyDown(e) {
@@ -63,16 +76,17 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 		// handle the space key
 		e.preventDefault();
 		e.stopPropagation();
-		this.shadowRoot.querySelector(`#${this._primaryActionId}`).click();
+		e.target.click();
 	}
 
-	_renderPrimaryAction(labelledBy) {
+	_renderPrimaryAction(labelledBy, content) {
 		if (!this.actionHref) return;
 		return html`<a aria-labelledby="${labelledBy}"
 			@click="${this._handleLinkClick}"
+			@focusin="${this._handleLinkFocus}"
 			href="${this.actionHref}"
 			id="${this._primaryActionId}"
-			@keydown="${this._handleLinkKeyDown}"></a>`;
+			@keydown="${this._handleLinkKeyDown}">${content}</a>`;
 	}
 
 };

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

@@ -12,6 +12,7 @@ import { getFirstFocusableDescendant } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { getValidHexColor } from '../../helpers/color.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { interactiveElements } from '../../helpers/interactive.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { ListItemCheckboxMixin } from './list-item-checkbox-mixin.js';
 import { ListItemDragDropMixin } from './list-item-drag-drop-mixin.js';
@@ -39,6 +40,12 @@ function addTabListener() {
 
 let hasDisplayedKeyboardTooltip = false;
 
+export const listInteractiveElems = {
+	...interactiveElements,
+	'd2l-button': true,
+	'd2l-tooltip-help': true
+};
+
 /**
  * @property label - The hidden label for the checkbox and expand collapse control
  */
@@ -679,7 +686,17 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		};
 
 		const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color)) ? 'control' : undefined;
-		const primaryAction = ((!this.noPrimaryAction && this._renderPrimaryAction) ? this._renderPrimaryAction(this._contentId) : null);
+		const contentAreaContent = html`
+			<div slot="content"
+				class="d2l-list-item-content"
+				id="${this._contentId}"
+				@mouseenter="${this._onMouseEnter}"
+				@mouseleave="${this._onMouseLeave}">
+				<slot name="illustration" class="d2l-list-item-illustration">${illustration}</slot>
+				<slot>${content}</slot>
+			</div>
+		`;
+		const primaryAction = ((!this.noPrimaryAction && this._renderPrimaryAction) ? this._renderPrimaryAction(this._contentId, contentAreaContent) : null);
 		let tooltipForId = null;
 		if (this._showAddButton) {
 			tooltipForId = this._addButtonTopId;
@@ -741,15 +758,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					@mouseenter="${this._onMouseEnterPrimaryAction}"
 					@mouseleave="${this._onMouseLeavePrimaryAction}">
 						${primaryAction}
-				</div>` : nothing}
-				<div slot="content"
-					class="d2l-list-item-content"
-					id="${this._contentId}"
-					@mouseenter="${this._onMouseEnter}"
-					@mouseleave="${this._onMouseLeave}">
-					<slot name="illustration" class="d2l-list-item-illustration">${illustration}</slot>
-					<slot>${content}</slot>
-				</div>
+				</div>` : contentAreaContent}
 				<div slot="actions"
 					@mouseenter="${this._onMouseEnter}"
 					@mouseleave="${this._onMouseLeave}"

package/components/tooltip/tooltip.js

@@ -2,6 +2,7 @@ import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { css, html, LitElement } from 'lit';
 import { cssEscape, elemIdListAdd, elemIdListRemove, getBoundingAncestor, getOffsetParent, isComposedAncestor } from '../../helpers/dom.js';
 import { getComposedActiveElement, isFocusable } from '../../helpers/focus.js';
+import { interactiveElements, interactiveRoles, isInteractive } from '../../helpers/interactive.js';
 import { announce } from '../../helpers/announce.js';
 import { bodySmallStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -41,39 +42,20 @@ const getDelay = delay => {
 	else return delay;
 };
 
-const interactiveElements = {
-	// 'a' only if an href is present
-	'button': true,
+const tooltipInteractiveElements = {
+	...interactiveElements,
 	'h1': true,
 	'h2': true,
 	'h3': true,
 	'h4': true,
 	'h5': true,
-	'h6': true,
-	'input': true,
-	'select': true,
-	'textarea': true
+	'h6': true
 };
 
-const interactiveRoles = {
-	'button': true,
-	'checkbox': true,
-	'combobox': true,
+const tooltipInteractiveRoles = {
+	...interactiveRoles,
 	'heading': true,
-	'img': true,
-	'link': true,
-	'listbox': true,
-	'menuitem': true,
-	'menuitemcheckbox': true,
-	'menuitemradio': true,
-	'option': true,
-	'radio': true,
-	'slider': true,
-	'spinbutton': true,
-	'switch': true,
-	'tab:': true,
-	'textbox': true,
-	'treeitem': true
+	'img': true
 };
 
 const computeTooltipShift = (centerDelta, spaceLeft, spaceRight) => {
@@ -813,13 +795,8 @@ class Tooltip extends RtlMixin(LitElement) {
 		if (ele.nodeType !== Node.ELEMENT_NODE) {
 			return false;
 		}
-		const nodeName = ele.nodeName.toLowerCase();
-		const isInteractive = interactiveElements[nodeName];
-		if (isInteractive) {
-			return true;
-		}
-		const role = (ele.getAttribute('role') || '');
-		return (nodeName === 'a' && ele.hasAttribute('href')) || interactiveRoles[role];
+
+		return isInteractive(ele, tooltipInteractiveElements, tooltipInteractiveRoles);
 	}
 
 	_onTargetBlur() {
@@ -961,15 +938,15 @@ class Tooltip extends RtlMixin(LitElement) {
 		if (this._target) {
 			const targetDisabled = this._target.hasAttribute('disabled') || this._target.getAttribute('aria-disabled') === 'true';
 
-			const isInteractive = this._isInteractive(this._target);
+			const isTargetInteractive = this._isInteractive(this._target);
 			this.id = this.id || getUniqueId();
 			this.setAttribute('role', 'tooltip');
 			if (this.forType === 'label') {
 				elemIdListAdd(this._target, 'aria-labelledby', this.id);
-			} else if (!this.announced || isInteractive) {
+			} else if (!this.announced || isTargetInteractive) {
 				elemIdListAdd(this._target, 'aria-describedby', this.id);
 			}
-			if (logAccessibilityWarning && !isInteractive && !this.announced) {
+			if (logAccessibilityWarning && !isTargetInteractive && !this.announced) {
 				console.warn(
 					'd2l-tooltip may be being used in a non-accessible manner; it should be attached to interactive elements like \'a\', \'button\',' +
 					'\'input\'', '\'select\', \'textarea\' or static / custom elements if a role has been set and the element is focusable.',

package/helpers/interactive.js

@@ -0,0 +1,57 @@
+export const interactiveElements = {
+	// 'a' only if an href is present
+	'button': true,
+	'input': true,
+	'select': true,
+	'textarea': true
+};
+
+export const interactiveRoles = {
+	'button': true,
+	'checkbox': true,
+	'combobox': true,
+	'link': true,
+	'listbox': true,
+	'menuitem': true,
+	'menuitemcheckbox': true,
+	'menuitemradio': true,
+	'option': true,
+	'radio': true,
+	'slider': true,
+	'spinbutton': true,
+	'switch': true,
+	'tab:': true,
+	'textbox': true,
+	'treeitem': true
+};
+
+export function isInteractive(ele, elems, roles) {
+	elems = elems || interactiveElements;
+	roles = roles || interactiveRoles;
+
+	const nodeName = ele.nodeName.toLowerCase();
+	const isInteractiveElem = elems[nodeName];
+	if (isInteractiveElem) {
+		return true;
+	}
+	const role = (ele.getAttribute('role') || '');
+	return (nodeName === 'a' && ele.hasAttribute('href')) || roles[role] || false;
+}
+
+export function isInteractiveInComposedPath(composedPath, predicate, options) {
+	const elems = options?.elements || interactiveElements;
+	const roles = options?.roles || interactiveRoles;
+	for (let i = 0; i < composedPath.length; i++) {
+		const elem = composedPath[i];
+		if (!elem.getAttribute) continue;
+
+		if (predicate && predicate(elem)) {
+			break;
+		}
+
+		if (isInteractive(elem, elems, roles)) {
+			return true;
+		}
+	}
+	return false;
+}

package/package.json

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