@brightspace-ui/core 2.137.1 → 2.137.3

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

@@ -69,6 +69,13 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Instructions</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-text label="Name" instructions="Use the keyboard to enter some sweet stuff... :)"></d2l-input-text>
+				</template>
+			</d2l-demo-snippet>
+
 			<h3>Invalid</h3>
 			<d2l-demo-snippet>
 				<template>

package/components/inputs/docs/input-text.md

@@ -80,6 +80,7 @@ The `<d2l-input-text>` element is a simple wrapper around the native `<input typ
 | `description` | String | A description to be added to the `input` for accessibility |
 | `disabled` | Boolean | Disables the input |
 | `input-width` | String, default: `100%` | Restricts the maximum width of the input box without impacting the width of the label |
+| `instructions` | String | Additional information relating to how to use the component |
 | `label-hidden` | Boolean | Hides the label visually (moves it to the input's `aria-label` attribute) |
 | `labelled-by` | String | HTML id of an element in the same shadow root which acts as the input's label |
 | `max` | String | For number inputs, maximum value |

package/components/inputs/input-date.js

@@ -242,7 +242,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			? html`<d2l-icon icon="tier1:alert" slot="left" style="${styleMap({ color: 'var(--d2l-color-cinnabar)' })}"></d2l-icon>`
 			: html`<d2l-icon icon="tier1:calendar" slot="left"></d2l-icon>`;
 		const errorTooltip = (this.validationError && !this.opened && this.childErrors.size === 0) ? html`<d2l-tooltip align="start" announced for="${this._inputId}" state="error">${this.validationError}</d2l-tooltip>` : null;
-		const infoTooltip = (this._showInfoTooltip && !errorTooltip && !this.invalid && !this.disabled && this.childErrors.size === 0 && !this.skeleton && this._inputTextFocusShowTooltip) ? html`<d2l-tooltip align="start" announced delay="1000" for="${this._inputId}">${this.localize(`${this._namespace}.openInstructions`, { format: shortDateFormat })}</d2l-tooltip>` : null;
 
 		const dropdownContent = this._dropdownFirstOpened ? html`
 			<d2l-dropdown-content
@@ -276,7 +275,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 				<div>${this.emptyText}</div>
 			</div>
 			${errorTooltip}
-			${infoTooltip}
 			<d2l-dropdown ?disabled="${this.disabled || this.skeleton}" no-auto-open>
 				<d2l-input-text
 					?novalidate="${this.noValidate}"
@@ -284,6 +282,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 					@blur="${this._handleInputTextBlur}"
 					@change="${this._handleChange}"
 					class="d2l-dropdown-opener"
+					instructions="${ifDefined((this._showInfoTooltip && !errorTooltip && !this.invalid && this.childErrors.size === 0 && this._inputTextFocusShowTooltip) ? this.localize(`${this._namespace}.openInstructions`, { format: shortDateFormat }) : undefined)}"
 					description="${ifDefined(this.emptyText ? this.emptyText : undefined)}"
 					?disabled="${this.disabled}"
 					@focus="${this._handleInputTextFocus}"

package/components/inputs/input-text.js

@@ -68,6 +68,11 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
 			 * @type {string}
 			 */
 			inputWidth: { attribute: 'input-width', type: String },
+			/**
+			 * ADVANCED: Additional information relating to how to use the component
+			 * @type {string}
+			 */
+			instructions: { type: String, attribute: 'instructions' },
 			/**
 			 * Hides the label visually (moves it to the input's "aria-label" attribute)
 			 * @type {boolean}
@@ -461,8 +466,13 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
 		}
 
 		let tooltip = nothing;
-		if (this.validationError && !this.skeleton && !this.noValidate) {
-			tooltip = html`<d2l-tooltip state="error" announced align="start">${this.validationError} <span class="d2l-offscreen">${this.description}</span></d2l-tooltip>`;
+		if (!this.skeleton) {
+			if (this.validationError && !this.noValidate) {
+				// this tooltip is using "announced" since we don't want aria-describedby wire-up which would bury the message in VoiceOver's More Content Available menu
+				tooltip = html`<d2l-tooltip state="error" announced align="start">${this.validationError} <span class="d2l-offscreen">${this.description}</span></d2l-tooltip>`;
+			} else if (this.instructions) {
+				tooltip = html`<d2l-tooltip align="start" for="${this._inputId}" delay="1000">${this.instructions}</d2l-tooltip>`;
+			}
 		}
 
 		return html`${tooltip}${label}${input}`;

package/components/list/demo/list-item-actions.html

@@ -184,6 +184,12 @@
 						<d2l-list-item selectable key="3" label="Geomorphology and GIS">
 							<d2l-list-item-content>Geomorphology and GIS</d2l-list-item-content>
 						</d2l-list-item>
+						<d2l-list-item selectable key="4" label="Introductory Differential Equations">
+							<d2l-list-item-content>Introductory Differential Equations</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item selectable key="5" label="Fermentation Biology">
+							<d2l-list-item-content>Fermentation Biology</d2l-list-item-content>
+						</d2l-list-item>
 					</d2l-list>
 				</template>
 			</d2l-demo-snippet>

package/components/selection/selection-mixin.js

@@ -1,4 +1,6 @@
+import { getFirstFocusableDescendant, getLastFocusableDescendant, getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { CollectionMixin } from '../../mixins/collection/collection-mixin.js';
+import { isComposedAncestor } from '../../helpers/dom.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const keyCodes = {
@@ -152,29 +154,43 @@ export const SelectionMixin = superclass => class extends RtlMixin(CollectionMix
 	}
 
 	_handleRadioKeyUp(e) {
+
+		const target = e.composedPath()[0];
+
 		// check composed path for radio (e.target could be d2l-list-item or other element due to retargeting)
-		if (!e.composedPath()[0].classList.contains('d2l-selection-input-radio')) return;
+		if (!target.classList.contains('d2l-selection-input-radio')) return;
 		if (e.keyCode < keyCodes.LEFT || e.keyCode > keyCodes.DOWN) return;
 
-		const selectables = Array.from(this._selectionSelectables.values())
-			.filter(item => !item.disabled);
-		let currentIndex = selectables.findIndex(selectable => selectable.selected);
-		if (currentIndex === -1) currentIndex = 0;
-		let newIndex;
-
-		if ((this.dir !== 'rtl' && e.keyCode === keyCodes.RIGHT)
-			|| (this.dir === 'rtl' && e.keyCode === keyCodes.LEFT)
-			|| e.keyCode === keyCodes.DOWN) {
-			if (currentIndex === selectables.length - 1) newIndex = 0;
-			else newIndex = currentIndex + 1;
-		} else if ((this.dir !== 'rtl' && e.keyCode === keyCodes.LEFT)
-			|| (this.dir === 'rtl' && e.keyCode === keyCodes.RIGHT)
-			|| e.keyCode === keyCodes.UP) {
-			if (currentIndex === 0) newIndex = selectables.length - 1;
-			else newIndex = currentIndex - 1;
+		const getSelectionInput = (focusable, forward) => {
+			while (focusable) {
+				if (focusable.classList.contains('d2l-selection-input-radio')) {
+					const selectionInput = focusable.getRootNode().host;
+					if (!selectionInput.disabled && this._selectionSelectables.has(selectionInput)) return selectionInput;
+				}
+
+				if (!isComposedAncestor(this, focusable)) return null;
+
+				focusable = forward ? getNextFocusable(focusable, false, true, true) : getPreviousFocusable(focusable, false, true, true);
+			}
+		};
+
+		const forward = (this.dir !== 'rtl' && e.keyCode === keyCodes.RIGHT) || (this.dir === 'rtl' && e.keyCode === keyCodes.LEFT) || (e.keyCode === keyCodes.DOWN);
+
+		// first try to find next/previous selection-input relative to the event target within the selection component sub-tree that also belongs to the selection component
+		let focusable = forward ? getNextFocusable(target, false, true, true) : getPreviousFocusable(target, false, true, true);
+		let selectionInput = getSelectionInput(focusable, forward);
+
+		if (!selectionInput) {
+			// no selection-input since next/previous focusable is before/after list... cycle to first/last
+			focusable = forward ?  getFirstFocusableDescendant(this, false) : getLastFocusableDescendant(this, false);
+			selectionInput = getSelectionInput(focusable, forward);
 		}
-		selectables[newIndex].selected = true;
-		selectables[newIndex].focus();
+
+		if (selectionInput) {
+			selectionInput.selected = true;
+			selectionInput.focus();
+		}
+
 	}
 
 	_handleSelectionChange(e) {

package/custom-elements.json

@@ -6574,6 +6574,11 @@
           "description": "Restricts the maximum width of the input box without impacting the width of the label.",
           "type": "string"
         },
+        {
+          "name": "instructions",
+          "description": "ADVANCED: Additional information relating to how to use the component",
+          "type": "string"
+        },
         {
           "name": "max",
           "description": "For number inputs, maximum value",
@@ -6741,6 +6746,12 @@
           "description": "Restricts the maximum width of the input box without impacting the width of the label.",
           "type": "string"
         },
+        {
+          "name": "instructions",
+          "attribute": "instructions",
+          "description": "ADVANCED: Additional information relating to how to use the component",
+          "type": "string"
+        },
         {
           "name": "max",
           "attribute": "max",

package/package.json

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