@brightspace-ui/core 3.187.1 → 3.189.0

package/components/inputs/demo/input-radio.html

@@ -59,6 +59,15 @@
 				</d2l-input-radio-group>
 			</d2l-demo-snippet>
 
+			<h2>Group with disabled item(with disabled tooltip)</h2>
+			<d2l-demo-snippet>
+				<d2l-input-radio-group label="Bread">
+					<d2l-input-radio label="Whole wheat" checked></d2l-input-radio>
+					<d2l-input-radio label="Baguette" disabled disabled-tooltip="This option is currently unavailable."></d2l-input-radio>
+					<d2l-input-radio label="Marble Rye"></d2l-input-radio>
+				</d2l-input-radio-group>
+			</d2l-demo-snippet>
+
 			<h2>Inline help</h2>
 			<d2l-demo-snippet>
 				<d2l-input-radio-group label="Bread">

package/components/inputs/input-checkbox.js

@@ -80,7 +80,7 @@ export const checkboxStyles = css`
 	input[type="checkbox"].d2l-input-checkbox:focus,
 	input[type="checkbox"].d2l-input-checkbox.d2l-input-checkbox-focus,
 	:host(.d2l-hovering) input[type="checkbox"]:not(:disabled).d2l-input-checkbox {
-		border-color: var(--d2l-color-celestine);
+		border-color: var(--d2l-input-checkbox-border-color-hover-focus, var(--d2l-color-celestine));
 		border-width: 2px;
 		outline-width: 0;
 	}

package/components/inputs/input-radio-group.js

@@ -72,7 +72,8 @@ class InputRadioGroup extends PropertyRequiredMixin(SkeletonMixin(FormElementMix
 				@click="${this.#handleClick}"
 				@d2l-input-radio-checked="${this.#handleRadioChecked}"
 				@keydown="${this.#handleKeyDown}"
-				role="radiogroup">	
+				@focusout="${this.#handleFocusout}"
+				role="radiogroup">
 				<slot @slotchange="${this.#handleSlotChange}"></slot>
 			</div>
 		`;
@@ -90,29 +91,22 @@ class InputRadioGroup extends PropertyRequiredMixin(SkeletonMixin(FormElementMix
 	}
 
 	focus() {
-		const radios = this.#getRadios();
-		if (radios.length === 0) return;
-		let firstFocusable = null;
-		let firstChecked = null;
-		radios.forEach(el => {
-			if (firstFocusable === null && !el.disabled) firstFocusable = el;
-			if (firstChecked === null && el._checked) firstChecked = el;
-		});
-		const focusElem = firstChecked || firstFocusable;
+		const focusElem = this.#getFirstFocusableRadio();
+		if (!focusElem) return;
 		focusElem.focus();
 		setTimeout(() => focusElem.focus()); // timeout required when following link from form validation
 	}
 
 	#labelId = getUniqueId();
 
-	async #doUpdateChecked(newChecked, doFocus, doDispatchEvent) {
+	async #doUpdateChecked(newChecked, doDispatchEvent) {
+		if (newChecked._checked || newChecked.disabled) return;
+
 		const radios = this.#getRadios();
 		let prevChecked = null;
 		radios.forEach(el => {
 			if (el._checked) prevChecked = el;
 		});
-		if (prevChecked === newChecked) return;
-
 		newChecked._checked = true;
 		if (prevChecked !== null) {
 			prevChecked._checked = false;
@@ -130,10 +124,34 @@ class InputRadioGroup extends PropertyRequiredMixin(SkeletonMixin(FormElementMix
 			}));
 		}
 
-		if (doFocus) {
-			await newChecked.updateComplete; // wait for tabindex to be updated
-			newChecked.focus();
+	}
+
+	async #focusOption(option) {
+		this.#doUpdateChecked(option, true);
+		const active = this.#getActiveRadio();
+		if (active === option) return;
+		option._focusable = true;
+		await option.updateComplete;
+		option.focus();
+		if (active) active._focusable = false;
+	}
+
+	#getActiveRadio() {
+		const activeElem = this.getRootNode().activeElement;
+		if (activeElem?.tagName === 'D2L-INPUT-RADIO' && this.contains(activeElem)) {
+			return activeElem;
+		}
+		return null;
+	}
+
+	#getFirstFocusableRadio() {
+		let firstFocusable = null;
+		for (const radio of this.#getRadios()) {
+			if (radio.focusDisabled) continue;
+			if (radio._checked) return radio;
+			if (!firstFocusable) firstFocusable = radio;
 		}
+		return firstFocusable;
 	}
 
 	#getRadios() {
@@ -144,9 +162,13 @@ class InputRadioGroup extends PropertyRequiredMixin(SkeletonMixin(FormElementMix
 
 	#handleClick(e) {
 		if (e.target.tagName !== 'D2L-INPUT-RADIO') return;
-		if (e.target.disabled) return;
-		this.#doUpdateChecked(e.target, true, true);
-		e.preventDefault();
+		this.#focusOption(e.target);
+		if (!e.target.disabled) e.preventDefault();
+	}
+
+	#handleFocusout(e) {
+		if (this.contains(e.relatedTarget)) return;
+		this.#recalculateState(false);
 	}
 
 	#handleKeyDown(e) {
@@ -164,27 +186,19 @@ class InputRadioGroup extends PropertyRequiredMixin(SkeletonMixin(FormElementMix
 
 		if (newOffset === null) return;
 
-		const radios = this.#getRadios().filter(el => !el.disabled || el._checked);
-		let checkedIndex = -1;
-		let firstFocusableIndex = -1;
-		radios.forEach((el, i) => {
-			if (el._checked) checkedIndex = i;
-			if (firstFocusableIndex < 0 && !el.disabled) firstFocusableIndex = i;
-		});
-		if (checkedIndex === -1) {
-			if (firstFocusableIndex === -1) return;
-			checkedIndex = firstFocusableIndex;
-		}
+		const radios = this.#getRadios().filter(el => !el.focusDisabled);
+		const activeRadio = this.#getActiveRadio();
+		const currentIndex = radios.findIndex(el => el === activeRadio);
 
-		const newIndex = (checkedIndex + newOffset + radios.length) % radios.length;
-		this.#doUpdateChecked(radios[newIndex], true, true);
+		const newIndex = (currentIndex + newOffset + radios.length) % radios.length;
+		this.#focusOption(radios[newIndex]);
 
 		e.preventDefault();
 	}
 
 	#handleRadioChecked(e) {
 		if (e.detail.checked) {
-			this.#doUpdateChecked(e.target, false, false);
+			this.#doUpdateChecked(e.target, false);
 		} else {
 			e.target._checked = false;
 			this.#recalculateState(true);
@@ -195,24 +209,17 @@ class InputRadioGroup extends PropertyRequiredMixin(SkeletonMixin(FormElementMix
 		this.#recalculateState(false);
 	}
 
-	#recalculateState(doValidate) {
+	#recalculateState(doValidate = false) {
 		const radios = this.#getRadios();
 		if (radios.length === 0) return;
 
-		let firstFocusable = null;
 		const checkedRadios = [];
 		radios.forEach(el => {
-			if (firstFocusable === null && !el.disabled) firstFocusable = el;
 			if (el._checked) checkedRadios.push(el);
 			el._isInitFromGroup = true;
-			el._firstFocusable = false;
+			el._focusable = false;
 		});
 
-		// let the first non-disabled radio know it's first so it can be focusable
-		if (checkedRadios.length === 0 && firstFocusable !== null) {
-			firstFocusable._firstFocusable = true;
-		}
-
 		// only the last checked radio is actually checked
 		for (let i = 0; i < checkedRadios.length - 1; i++) {
 			checkedRadios[i]._checked = false;
@@ -220,11 +227,15 @@ class InputRadioGroup extends PropertyRequiredMixin(SkeletonMixin(FormElementMix
 		if (checkedRadios.length > 0) {
 			const lastCheckedRadio = checkedRadios[checkedRadios.length - 1];
 			lastCheckedRadio._checked = true;
+			lastCheckedRadio._focusable = true;
 			this.setFormValue(lastCheckedRadio.value);
 			if (this.required) {
 				this.setValidity({ valueMissing: false });
 			}
 		} else {
+			// let the first non-focus-disabled radio know it's first so it can be focusable
+			const firstFocusable = this.#getFirstFocusableRadio();
+			if (firstFocusable) firstFocusable._focusable = true;
 			this.setFormValue('');
 			if (this.required) {
 				this.setValidity({ valueMissing: true });

package/components/inputs/input-radio-styles.js

@@ -44,7 +44,7 @@ export const radioStyles = css`
 	.d2l-input-radio:focus,
 	.d2l-input-radio-label > input[type="radio"]:hover,
 	.d2l-input-radio-label > input[type="radio"]:focus {
-		border-color: var(--d2l-color-celestine);
+		border-color: var(--d2l-input-radio-border-color-hover-focus, var(--d2l-color-celestine));
 		border-width: 2px;
 		outline: none;
 	}
@@ -70,13 +70,23 @@ export const radioStyles = css`
 		padding-inline-start: 1.7rem;
 		vertical-align: middle;
 	}
-	.d2l-input-radio-label-disabled {
+	.d2l-input-radio-label-disabled:not(.d2l-input-radio-label-disabled-tooltip),
+	.d2l-input-radio-label-disabled-tooltip > * {
 		opacity: 0.5;
 	}
-	.d2l-input-radio-label-disabled > .d2l-input-radio,
-	.d2l-input-radio-label-disabled > input[type="radio"] {
+	.d2l-input-radio-label-disabled:not(.d2l-input-radio-label-disabled-tooltip) > .d2l-input-radio,
+	.d2l-input-radio-label-disabled:not(.d2l-input-radio-label-disabled-tooltip) > input[type="radio"] {
 		opacity: 1;
 	}
+	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio.d2l-hovering,
+	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio:hover,
+	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio:focus,
+	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio-label > input[type="radio"]:hover,
+	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio-label > input[type="radio"]:focus {
+		background-color: color-mix(in srgb, var(--d2l-color-regolith) 50%, transparent); /* mock background opacity */
+		opacity: 1;
+	}
+
 	.d2l-input-radio-label:last-of-type {
 		margin-bottom: 0;
 	}

package/components/inputs/input-radio.js

@@ -1,3 +1,4 @@
+import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
@@ -32,6 +33,11 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 			 * @type {boolean}
 			 */
 			disabled: { type: Boolean, reflect: true },
+			/**
+			 * Tooltip text displayed when the input is disabled
+			 * @type {string}
+			 */
+			disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
 			/**
 			 * REQUIRED: Label for the input
 			 * @type {string}
@@ -48,7 +54,7 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 			 */
 			value: { type: String },
 			_checked: { state: true },
-			_firstFocusable: { state: true },
+			_focusable: { state: true },
 			_hasSupporting: { state: true },
 			_isHovered: { state: true },
 			_invalid: { state: true }
@@ -87,7 +93,7 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 		this.supportingHiddenWhenUnchecked = false;
 		this.value = 'on';
 		this._checked = false;
-		this._firstFocusable = false;
+		this._focusable = false;
 		this._hasSupporting = false;
 		this._isHovered = false;
 		this._isInitFromGroup = false;
@@ -110,20 +116,25 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 		}
 	}
 
+	get focusDisabled() {
+		return (this.disabled && !this.disabledTooltip) || this.skeleton;
+	}
+
 	static get focusElementSelector() {
 		return '.d2l-input-radio';
 	}
 
 	render() {
-		const disabled = this.disabled || this.skeleton;
+		const allowFocus = !this.focusDisabled && this._focusable;
 		const labelClasses = {
 			'd2l-input-radio-label': true,
 			'd2l-input-radio-label-disabled': this.disabled && !this.skeleton,
+			'd2l-input-radio-label-disabled-tooltip': this.disabled && this.disabledTooltip
 		};
 		const radioClasses = {
 			'd2l-input-radio': true,
-			'd2l-disabled': this.disabled && !this.skeleton,
-			'd2l-hovering': this._isHovered && !disabled,
+			'd2l-disabled': this.focusDisabled && !this.skeleton,
+			'd2l-hovering': this._isHovered && !this.focusDisabled,
 			'd2l-skeletize': true
 		};
 		const supportingClasses = {
@@ -132,28 +143,33 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 		};
 		const description = this.description ? html`<div id="${this.#descriptionId}" hidden>${this.description}</div>` : nothing;
 		const ariaDescribedByIds = `${this.description ? this.#descriptionId : ''} ${this._hasInlineHelp ? this.#inlineHelpId : ''}`.trim();
-		const tabindex = (!disabled && (this._checked || this._firstFocusable)) ? '0' : undefined;
+		const disabledTooltip = this.disabled && this.disabledTooltip ?
+			html`<d2l-tooltip align="start" class="vdiff-target" for="${this.#inputId}" ?force-show="${this._isHovered}" position="top">${this.disabledTooltip}</d2l-tooltip>` :
+			nothing;
 		return html`
 			<div class="${classMap(labelClasses)}" @mouseover="${this.#handleMouseOver}" @mouseout="${this.#handleMouseOut}">
 				<div
 					aria-checked="${this._checked}"
 					aria-describedby="${ifDefined(ariaDescribedByIds.length > 0 ? ariaDescribedByIds : undefined)}"
-					aria-disabled="${ifDefined(disabled ? 'true' : undefined)}"
+					aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
 					aria-invalid="${ifDefined(this._invalid ? 'true' : undefined)}"
 					aria-labelledby="${this.#labelId}"
 					class="${classMap(radioClasses)}"
+					id="${this.#inputId}"
 					role="radio"
-					tabindex="${ifDefined(tabindex)}"></div>
+					tabindex="${ifDefined(allowFocus ? '0' : undefined)}"></div>
 				<div id="${this.#labelId}" class="d2l-skeletize">${this.label}</div>
 			</div>
 			${this._renderInlineHelp(this.#inlineHelpId)}
 			${description}
+			${disabledTooltip}
 			<div class="${classMap(supportingClasses)}" @change="${this.#handleSupportingChange}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
 		`;
 	}
 
 	#descriptionId = getUniqueId();
 	#inlineHelpId = getUniqueId();
+	#inputId = getUniqueId();
 	#labelId = getUniqueId();
 
 	#handleMouseOut() {

package/components/list/demo/list-layout.html

@@ -149,6 +149,46 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Selectable</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-toggle pressed>
+						<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
+						<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
+					</d2l-button-toggle>
+					<d2l-list layout="tiles">
+						<d2l-list-item label="item 1" key="1" selectable>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Identify categories of physical activities</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation A1.2</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item label="item 2" key="2" selectable>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation B2.1</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item label="item 3" key="3" selectable>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation B2.2</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+					</d2l-list>
+					<script data-demo-hide>
+						(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Links</h2>
 
 			<d2l-demo-snippet>

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

@@ -175,6 +175,8 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 				?_indeterminate="${this.selectionInfo.state === SelectionInfo.states.some}"
 				key="${this.key}"
 				label="${this.label}"
+				@mouseenter="${this._onMouseEnterSelection}"
+				@mouseleave="${this._onMouseLeaveSelection}"
 				?selected="${this.selected}"
 				?skeleton="${this.skeleton}">
 			</d2l-selection-input>

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

@@ -219,15 +219,18 @@ class ListItemGenericLayout extends LitElement {
 
 			:host([layout="tile"]) {
 				grid-template-columns:
-					[start] minmax(0, auto)
+					[start control-start] minmax(0, min-content)
+					[control-end] minmax(0, auto)
 					[end];
 				grid-template-rows:
-					[start] auto
-					[end];
+					[start header-start] minmax(0, min-content)
+					[header-end content-start] auto
+					[content-end end];
 				height: 100%;
 			}
 			:host([layout="tile"]) ::slotted([slot="content"]),
-			:host([layout="tile"]) ::slotted([slot="content-action"]) {
+			:host([layout="tile"]) ::slotted([slot="content-action"]),
+			:host([layout="tile"]) ::slotted([slot="control-action"]) {
 				grid-column: start / end;
 				grid-row: start / end;
 			}
@@ -235,6 +238,12 @@ class ListItemGenericLayout extends LitElement {
 				grid-column: start / end;
 				grid-row: start / end;
 			}
+			:host([layout="tile"]) ::slotted([slot="control"]) {
+				grid-column: control-start / control-end;
+				grid-row: start;
+				pointer-events: all;
+				width: unset;
+			}
 
 			:host([layout="tile"]) slot[name="add-top"],
 			:host([layout="tile"]) slot[name="control-container"],
@@ -243,8 +252,6 @@ class ListItemGenericLayout extends LitElement {
 			:host([layout="tile"]) slot[name="outside-control-action"],
 			:host([layout="tile"]) slot[name="color-indicator"],
 			:host([layout="tile"]) slot[name="expand-collapse"],
-			:host([layout="tile"]) slot[name="control-action"],
-			:host([layout="tile"]) slot[name="control"],
 			:host([layout="tile"]) slot[name="actions"],
 			:host([layout="tile"]) slot[name="drop-target"],
 			:host([layout="tile"]) slot[name="nested"],

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

@@ -193,10 +193,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				border-top: 0;
 			}
 
-			:host(:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators > [slot="control"] {
+			:host(:not([layout="tile"]):not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators > [slot="control"] {
 				width: 3rem;
 			}
-			:host(:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators > [slot="control"] ~ [slot="control-action"] [slot="content"] {
+			:host(:not([layout="tile"]):not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators > [slot="control"] ~ [slot="control-action"] [slot="content"] {
 				padding-inline-start: 3rem;
 			}
 			:host(:not([_has-color-slot])) .d2l-list-item-content-extend-separators [slot="content"] {
@@ -303,7 +303,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin-block: 0.55rem;
 				margin-inline-end: 0.55rem;
 			}
-			:host(:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators d2l-selection-input {
+			:host(:not([layout="tile"]):not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators d2l-selection-input {
 				margin-inline-start: 0.9rem;
 			}
 			:host(:not([_render-expand-collapse-slot])[_has-color-slot]) .d2l-list-item-content-extend-separators d2l-selection-input {
@@ -511,6 +511,33 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					border-color: transparent;
 				}
 			}
+
+			:host([layout="tile"]) d2l-selection-input {
+				--d2l-input-checkbox-border-color-hover-focus: var(--d2l-color-celestine-minus-1);
+				--d2l-input-radio-border-color-hover-focus: var(--d2l-color-celestine-minus-1);
+				border: 2px solid transparent;
+				border-radius: 8px;
+				margin: 0;
+				padding: 3px;
+			}
+			:host([layout="tile"][_focusing]) d2l-selection-input {
+				border: 2px solid white;
+			}
+			:host([layout="tile"]) [slot="control"] {
+				background-color: rgba(0, 0, 0, 0.5);
+				border-radius: 8px;
+				box-sizing: border-box;
+				margin: 0.5rem;
+				outline: 2px solid transparent;
+			}
+			:host([layout="tile"][_focusing]) [slot="control"] {
+				background-color: var(--d2l-color-celestine);
+				outline-color: var(--d2l-color-celestine-minus-1);
+			}
+			:host([layout="tile"][skeleton]) [slot="control"] {
+				background-color: transparent;
+			}
+
 		`];
 
 		super.styles && styles.unshift(super.styles);

package/custom-elements.json

@@ -7175,6 +7175,11 @@
           "description": "ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input",
           "type": "string"
         },
+        {
+          "name": "disabled-tooltip",
+          "description": "Tooltip text displayed when the input is disabled",
+          "type": "string"
+        },
         {
           "name": "label",
           "description": "REQUIRED: Label for the input",
@@ -7216,6 +7221,12 @@
           "description": "ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input",
           "type": "string"
         },
+        {
+          "name": "disabledTooltip",
+          "attribute": "disabled-tooltip",
+          "description": "Tooltip text displayed when the input is disabled",
+          "type": "string"
+        },
         {
           "name": "label",
           "attribute": "label",
@@ -7228,6 +7239,10 @@
           "description": "Checked state",
           "type": "boolean"
         },
+        {
+          "name": "focusDisabled",
+          "type": "boolean"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",

package/package.json

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