@brightspace-ui/core 3.188.0 → 3.190.0

package/components/button/button-icon.js

@@ -49,11 +49,11 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
 		return [super.styles, buttonStyles, visibleOnAncestorStyles,
 			css`
 				:host {
-					--d2l-button-icon-background-color: transparent;
-					--d2l-button-icon-background-color-hover: var(--d2l-color-gypsum);
-					--d2l-button-icon-border-radius: 0.3rem;
-					--d2l-button-icon-min-height: calc(2rem + 2px);
-					--d2l-button-icon-min-width: calc(2rem + 2px);
+					--d2l-button-icon-background-color-default: transparent;
+					--d2l-button-icon-background-color-hover-default: var(--d2l-color-gypsum);
+					--d2l-button-icon-border-radius-default: 0.3rem;
+					--d2l-button-icon-min-height-default: calc(2rem + 2px);
+					--d2l-button-icon-min-width-default: calc(2rem + 2px);
 					--d2l-button-icon-h-align: calc(((2rem + 2px - 0.9rem) / 2) * -1);
 					display: inline-block;
 					line-height: 0;
@@ -62,28 +62,28 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
 					display: none;
 				}
 				:host([translucent]) {
-					--d2l-button-icon-background-color: rgba(0, 0, 0, 0.5);
-					--d2l-button-icon-background-color-hover: var(--d2l-color-celestine);
+					--d2l-button-icon-background-color-default: rgba(0, 0, 0, 0.5);
+					--d2l-button-icon-background-color-hover-default: var(--d2l-color-celestine);
 					--d2l-focus-ring-color: white;
 					--d2l-focus-ring-offset: -4px;
 					--d2l-button-icon-fill-color: white;
 					--d2l-button-icon-fill-color-hover: white;
 				}
 				:host([theme="dark"]) {
-					--d2l-button-icon-background-color: transparent;
-					--d2l-button-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
+					--d2l-button-icon-background-color-default: transparent;
+					--d2l-button-icon-background-color-hover-default: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
 					--d2l-button-icon-fill-color: var(--d2l-color-sylvite);
 					--d2l-button-icon-fill-color-hover: var(--d2l-color-sylvite);
 					--d2l-focus-ring-color: var(--d2l-color-celestine-plus-1);
 				}
 
 				button {
-					background-color: var(--d2l-button-icon-background-color);
+					background-color: var(--d2l-button-icon-background-color, var(--d2l-button-icon-background-color-default));
 					border-color: transparent;
-					border-radius: var(--d2l-button-icon-border-radius);
+					border-radius: var(--d2l-button-icon-border-radius, var(--d2l-button-icon-border-radius-default));
 					font-family: inherit;
-					min-height: var(--d2l-button-icon-min-height);
-					min-width: var(--d2l-button-icon-min-width);
+					min-height: var(--d2l-button-icon-min-height, var(--d2l-button-icon-min-height-default));
+					min-width: var(--d2l-button-icon-min-width, var(--d2l-button-icon-min-width-default));
 					padding: 0;
 					position: relative;
 				}
@@ -104,7 +104,7 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
 				button:focus:not([disabled]),
 				:host([active]) button:not([disabled]) {
 					--d2l-button-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-color-tungsten));
-					background-color: var(--d2l-button-icon-background-color-hover);
+					background-color: var(--d2l-button-icon-background-color-hover, var(--d2l-button-icon-background-color-hover-default));
 				}
 
 				d2l-icon,

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/mixins/visible-on-ancestor/README.md

@@ -1,6 +1,6 @@
 # VisibleOnAncestorMixin
 
-The `VisibleOnAncestorMixin` adds a behavior to a component so that it is initially hidden, and becomes visible when user hovers or focuses within an ancestor marked with the `d2l-visible-on-ancestor-target` class. It includes styles that must be included with the component. If the device does not support hovering, the element will be visible regardless of whether the user is hovering or focusing within the target.
+The `VisibleOnAncestorMixin` adds a behavior to a component so that it is initially hidden, and becomes visible when a user hovers or focuses within an ancestor that sets `isVisibleOnAncestorTarget = true` or  has the `d2l-visible-on-ancestor-target` class. It includes styles that must be included with the component. If the device does not support hovering, the element will be visible regardless of whether the user is hovering or focusing within the target.
 
 ## Usage
 

package/mixins/visible-on-ancestor/visible-on-ancestor-mixin.js

@@ -125,9 +125,10 @@ export const VisibleOnAncestorMixin = superclass => class extends superclass {
 		if (!this.visibleOnAncestor) return;
 
 		this.__voaTarget = findComposedAncestor(this, (node) => {
-			if (!node || node.nodeType !== 1) return false;
-			return (node.classList.contains('d2l-visible-on-ancestor-target'));
+			if (!node || node.nodeType !== Node.ELEMENT_NODE) return false;
+			return (node.isVisibleOnAncestorTarget || node.classList.contains('d2l-visible-on-ancestor-target'));
 		});
+
 		if (!this.__voaTarget) {
 			this.__voaState = null;
 			return;

package/package.json

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