@brightspace-ui/core 3.188.0 → 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-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

@@ -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/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.188.0",
+  "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",