@brightspace-ui/core 2.137.0 → 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/list/list-item-generic-layout.js

@@ -102,6 +102,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 
 			::slotted([slot="control"]) {
 				grid-column: control-start / control-end;
+				pointer-events: none;
 				width: 2.2rem;
 			}
 
@@ -109,11 +110,6 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				grid-column: content-start / content-end;
 			}
 
-			::slotted([slot="control"]),
-			::slotted([slot="outside-control"]) {
-				pointer-events: none;
-			}
-
 			::slotted([slot="control-action"]) ~ ::slotted([slot="content"]),
 			::slotted([slot="outside-control-action"]) ~ ::slotted([slot="content"]) {
 				pointer-events: unset;
@@ -200,8 +196,8 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			<slot name="outside-control-container"></slot>
 
 			<slot name="content-action" class="d2l-cell" data-cell-num="6"></slot>
-			<slot name="outside-control-action" class="d2l-cell" data-cell-num="1"></slot>
 			<slot name="outside-control" class="d2l-cell" data-cell-num="2"></slot>
+			<slot name="outside-control-action" class="d2l-cell" data-cell-num="1"></slot>
 			<slot name="expand-collapse" class="d2l-cell" data-cell-num="4"></slot>
 			<slot name="content" class="d2l-cell" data-cell-num="8" @focus="${!this.noPrimaryAction ? this._preventFocus : null}"></slot>
 			<slot name="control-action" class="d2l-cell" data-cell-num="3"></slot>

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.0",
+  "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",