@brightspace-ui/core 2.137.1 → 2.137.2

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/package.json

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