@brightspace-ui/core 2.102.0 → 2.104.0

package/components/inputs/README.md

@@ -23,7 +23,7 @@ Import the label styles and `RtlMixin` and include them in your component:
 
 ```javascript
 import {inputLabelStyles} from '@brightspace-ui/core/components/inputs/input-label-styles.js';
-import {RtlMixin} from '@brightspace-ui/core/mixins/rtl-mixin.js';
+import {RtlMixin} from '@brightspace-ui/core/mixins/rtl/rtl-mixin.js';
 
 class MyElem extends RtlMixin(LitElement) {
 

package/components/inputs/demo/input-radio-label-simple-test.js

@@ -1,6 +1,6 @@
 import { html, LitElement } from 'lit';
 import { radioStyles } from '../input-radio-styles.js';
-import { RtlMixin } from '../../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../../mixins/rtl/rtl-mixin.js';
 
 class TestInputRadioLabelSimple extends RtlMixin(LitElement) {
 

package/components/inputs/demo/input-radio-label-test.js

@@ -1,6 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { radioStyles } from '../input-radio-styles.js';
-import { RtlMixin } from '../../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../../mixins/rtl/rtl-mixin.js';
 
 class TestInputRadioLabel extends RtlMixin(LitElement) {
 

package/components/inputs/demo/input-select-test.js

@@ -1,5 +1,5 @@
 import { css, html, LitElement } from 'lit';
-import { RtlMixin } from '../../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../../mixins/rtl/rtl-mixin.js';
 import { selectStyles } from '../input-select-styles.js';
 import { SkeletonMixin } from '../../../components/skeleton/skeleton-mixin.js';
 

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

@@ -39,7 +39,7 @@ For disabled items, add the `d2l-input-radio-label-disabled` class on the label
 ```html
 <script type="module">
   import { html, LitElement } from 'lit';
-  import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
+  import { RtlMixin } from '@brightspace-ui/core/mixins/rtl/rtl-mixin.js';
   import { radioStyles } from '@brightspace-ui/core/components/inputs/input-radio-styles.js';
 
   class MyRadioElem extends RtlMixin(LitElement) {

package/components/inputs/docs/input-select-styles.md

@@ -56,7 +56,7 @@ Note: in order for RTL to function correctly, make sure your component uses the
 ```html
 <script type="module">
   import { css, html, LitElement } from 'lit';
-  import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
+  import { RtlMixin } from '@brightspace-ui/core/mixins/rtl/rtl-mixin.js';
   import { selectStyles } from '@brightspace-ui/core/components/inputs/input-select-styles.js';
   import { SkeletonMixin } from '@brightspace-ui/core/components/skeleton/skeleton-mixin.js';
 

package/components/inputs/input-checkbox-spacer.js

@@ -1,5 +1,5 @@
 import { css, html, LitElement } from 'lit';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * Used to align related content below checkboxes

package/components/inputs/input-checkbox.js

@@ -1,11 +1,11 @@
 import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 export const checkboxStyles = css`

package/components/inputs/input-color.js

@@ -4,7 +4,7 @@ import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { buttonStyles } from '../button/button-styles.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';

package/components/inputs/input-date-range.js

@@ -4,12 +4,12 @@ import './input-fieldset.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement } from 'lit';
 import { formatDateTimeInISO, getDateFromISODate, parseISODateTime } from '../../helpers/dateTime.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 export function getShiftedEndDate(startValue, endValue, prevStartValue, inclusive) {

package/components/inputs/input-date-time-range.js

@@ -5,12 +5,12 @@ import '../tooltip/tooltip.js';
 import { convertLocalToUTCDateTime, convertUTCToLocalDateTime } from '@brightspace-ui/intl/lib/dateTime.js';
 import { css, html, LitElement } from 'lit';
 import { formatDateTimeInISO, getAdjustedTime, getDateFromISODateTime, getDateNoConversion, parseISODateTime } from '../../helpers/dateTime.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 function _isSameDate(date1, date2) {

package/components/inputs/input-date-time.js

@@ -13,15 +13,15 @@ import { formatDateInISO,
 	parseISODate,
 	parseISODateTime,
 	parseISOTime } from '../../helpers/dateTime.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getDefaultTime } from './input-time.js';
 import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { LabelledMixin } from '../../mixins/labelled-mixin.js';
+import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 

package/components/inputs/input-date.js

@@ -8,11 +8,11 @@ import './input-text.js';
 import { css, html, LitElement } from 'lit';
 import { formatDate, parseDate } from '@brightspace-ui/intl/lib/dateTime.js';
 import { formatDateInISO, getDateFromISODate, getDateTimeDescriptorShared, getToday } from '../../helpers/dateTime.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { LabelledMixin } from '../../mixins/labelled-mixin.js';
+import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';

package/components/inputs/input-fieldset.js

@@ -2,7 +2,7 @@ import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { inputLabelStyles } from './input-label-styles.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 /**

package/components/inputs/input-number.js

@@ -1,11 +1,11 @@
 import './input-text.js';
 import { css, html, LitElement } from 'lit';
 import { formatNumber, getNumberDescriptor, parseNumber } from '@brightspace-ui/intl/lib/number.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { LabelledMixin } from '../../mixins/labelled-mixin.js';
+import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 

package/components/inputs/input-percent.js

@@ -1,11 +1,11 @@
 import './input-number.js';
 import { css, html, LitElement } from 'lit';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { LabelledMixin } from '../../mixins/labelled-mixin.js';
+import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 /**

package/components/inputs/input-radio-spacer.js

@@ -1,5 +1,5 @@
 import { css, html, LitElement } from 'lit';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 /**
  * Used to align related content below radio buttons

package/components/inputs/input-search.js

@@ -2,11 +2,11 @@ import '../button/button-icon.js';
 import '../colors/colors.js';
 import './input-text.js';
 import { css, html, LitElement } from 'lit';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { inputStyles } from './input-styles.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const INPUT_TIMEOUT_MS = 400;
 

package/components/inputs/input-text.js

@@ -2,17 +2,17 @@ import '../colors/colors.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { inputLabelStyles } from './input-label-styles.js';
 import { inputStyles } from './input-styles.js';
-import { LabelledMixin } from '../../mixins/labelled-mixin.js';
+import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { PerfMonitor } from '../../helpers/perfMonitor.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 

package/components/inputs/input-textarea.js

@@ -1,15 +1,15 @@
 import '../tooltip/tooltip.js';
 import { css, html, LitElement } from 'lit';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { inputLabelStyles } from './input-label-styles.js';
 import { inputStyles } from './input-styles.js';
-import { LabelledMixin } from '../../mixins/labelled-mixin.js';
+import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 

package/components/inputs/input-time-range.js

@@ -4,12 +4,12 @@ import '../tooltip/tooltip.js';
 import { css, html, LitElement } from 'lit';
 import { formatDateInISOTime, formatTimeInISO, getAdjustedTime, getDateFromISOTime, isValidTime, parseISOTime } from '../../helpers/dateTime.js';
 import { getDefaultTime, getIntervalNumber, getTimeAtInterval } from './input-time.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 export function getShiftedEndTime(startValue, endValue, prevStartValue, inclusive) {

package/components/inputs/input-time.js

@@ -7,13 +7,13 @@ import { css, html, LitElement } from 'lit';
 import { formatDateInISOTime, getDateFromISOTime, getToday } from '../../helpers/dateTime.js';
 import { formatTime, parseTime } from '@brightspace-ui/intl/lib/dateTime.js';
 import { bodySmallStyles } from '../typography/styles.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { inputLabelStyles } from './input-label-styles.js';
 import { inputStyles } from './input-styles.js';
-import { LabelledMixin } from '../../mixins/labelled-mixin.js';
+import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';

package/components/link/link.js

@@ -1,7 +1,7 @@
 import '../colors/colors.js';
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 

package/components/list/list-item-drag-handle.js

@@ -1,13 +1,13 @@
-import '../button/button-icon.js';
 import '../icons/icon.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement } from 'lit';
 import { buttonStyles } from '../button/button-styles.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
-import { getFirstFocusableDescendant } from '../../helpers/focus.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { moveActions } from '../button/button-move.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const keyCodes = Object.freeze({
 	DOWN: 40,
@@ -43,7 +43,7 @@ let hasDisplayedKeyboardTooltip = false;
 /**
  * @fires d2l-list-item-drag-handle-action - Dispatched when an action performed on the drag handle
  */
-class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
+class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElement))) {
 
 	static get properties() {
 		return {
@@ -79,33 +79,6 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			.d2l-list-item-drag-handle-dragger-button {
 				background-color: unset;
 				display: block;
-			}
-			.d2l-list-item-drag-handle-keyboard-button {
-				display: grid;
-				gap: 2px;
-				grid-auto-rows: 1fr 1fr;
-				position: relative;
-			}
-			.d2l-list-item-drag-handle-keyboard-button-up,
-			.d2l-list-item-drag-handle-keyboard-button-down {
-				height: 1.1rem;
-				left: -0.2rem;
-				position: absolute;
-				width: 1.3rem;
-			}
-			.d2l-list-item-drag-handle-keyboard-button-up {
-				top: -0.25rem;
-			}
-			.d2l-list-item-drag-handle-keyboard-button-down {
-				bottom: -0.25rem;
-			}
-			:host([dir="rtl"]) .d2l-list-item-drag-handle-keyboard-button-up,
-			:host([dir="rtl"]) .d2l-list-item-drag-handle-keyboard-button-down {
-				left: auto;
-				right: -0.2rem;
-			}
-			.d2l-list-item-drag-handle-dragger-button,
-			.d2l-list-item-drag-handle-keyboard-button {
 				margin: 0;
 				min-height: 1.8rem;
 				padding: 0;
@@ -119,20 +92,6 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				height: 0.9rem;
 				width: 0.9rem;
 			}
-			.d2l-button-up-icon,
-			.d2l-button-down-icon {
-				border-radius: 0.1rem;
-				height: 0.85rem;
-				width: 0.9rem;
-			}
-			.d2l-button-up-icon {
-				border-top-left-radius: 0.3rem;
-				border-top-right-radius: 0.3rem;
-			}
-			.d2l-button-down-icon {
-				border-bottom-left-radius: 0.3rem;
-				border-bottom-right-radius: 0.3rem;
-			}
 			button,
 			button[disabled]:hover,
 			button[disabled]:focus {
@@ -143,14 +102,6 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			.d2l-list-item-drag-handle-dragger-button:focus {
 				background-color: var(--d2l-color-mica);
 			}
-			.d2l-list-item-drag-handle-keyboard-button:hover,
-			.d2l-list-item-drag-handle-keyboard-button:focus {
-				background-color: transparent;
-			}
-			.d2l-list-item-drag-handle-keyboard-button:hover > d2l-icon,
-			.d2l-list-item-drag-handle-keyboard-button:focus > d2l-icon {
-				background-color: var(--d2l-color-mica);
-			}
 			button[disabled] {
 				cursor: default;
 				opacity: 0.5;
@@ -178,6 +129,10 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		this._movingElement = false;
 	}
 
+	static get focusElementSelector() {
+		return '.d2l-list-item-drag-handle-button';
+	}
+
 	render() {
 		return this._keyboardActive && !this.disabled ? this._renderKeyboardDragging() : this._renderDragger();
 	}
@@ -192,11 +147,6 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		this._keyboardActive = true;
 	}
 
-	focus() {
-		const node = getFirstFocusableDescendant(this);
-		if (node) node.focus();
-	}
-
 	get _defaultLabel() {
 		const namespace = 'components.list-item-drag-handle';
 		const defaultLabel = this.localize(`${namespace}.${'default'}`, 'name', this.text);
@@ -212,37 +162,96 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		}));
 	}
 
-	_dispatchActionDown() {
-		this._dispatchAction(dragActions.down);
+	async _doAction(action) {
+		this._dispatchAction(action);
+		const cell = findComposedAncestor(this, (parent) =>  parent.hasAttribute && parent.hasAttribute('draggable'));
+		if (cell) await cell.updateComplete;
+		await this.updateComplete;
+		this.focus();
+		this._movingElement = false;
 	}
 
-	_dispatchActionUp() {
-		this._dispatchAction(dragActions.up);
+	_onDraggerButtonClick() {
+		this.activateKeyboardMode();
 	}
 
-	async _onActiveKeyboard(e) {
-		if (!this._keyboardActive) {
+	_onDraggerButtonKeydown(e) {
+		if (e.keyCode !== keyCodes.ENTER && e.keyCode !== keyCodes.SPACE) return;
+		e.preventDefault();
+		this.activateKeyboardMode();
+	}
+
+	_onKeyboardButtonFocusIn() {
+		if (hasDisplayedKeyboardTooltip) return;
+		this._displayKeyboardTooltip = true;
+		hasDisplayedKeyboardTooltip = true;
+	}
+
+	_onKeyboardButtonFocusOut(e) {
+		this._displayKeyboardTooltip = false;
+		if (this._movingElement) {
+			this._movingElement = false;
+			e.stopPropagation();
+			e.preventDefault();
 			return;
 		}
+		this._keyboardActive = false;
+		this._dispatchAction(dragActions.save);
+		e.stopPropagation();
+	}
+
+	async _onMoveButtonAction(e) {
+
 		let action = null;
-		switch (e.keyCode) {
-			case keyCodes.UP:
+		switch (e.detail.action) {
+			case moveActions.up:
 				this._movingElement = true;
 				action = dragActions.up;
 				this.updateComplete.then(() => this.blur()); // tell screenreaders to refocus
 				break;
-			case keyCodes.DOWN:
+			case moveActions.down:
 				this._movingElement = true;
 				action = dragActions.down;
 				break;
-			case keyCodes.HOME:
+			case moveActions.right:
+				this._movingElement = true;
+				action = (this.dir === 'rtl' ? dragActions.unnest : dragActions.nest);
+				break;
+			case moveActions.left:
+				this._movingElement = true;
+				action = (this.dir === 'rtl' ? dragActions.nest : dragActions.unnest) ;
+				break;
+			case moveActions.rootHome:
+				this._movingElement = true;
+				action = dragActions.rootFirst;
+				break;
+			case moveActions.home:
 				this._movingElement = true;
-				action = (e.ctrlKey ? dragActions.rootFirst : dragActions.first);
+				action = dragActions.first;
 				break;
-			case keyCodes.END:
+			case moveActions.rootEnd:
 				this._movingElement = true;
-				action = (e.ctrlKey ? dragActions.rootLast : dragActions.last);
+				action = dragActions.rootLast;
 				break;
+			case moveActions.end:
+				this._movingElement = true;
+				action = dragActions.last;
+				break;
+			default:
+				return;
+		}
+
+		this._doAction(action);
+
+	}
+
+	async _onMoveButtonKeydown(e) {
+		if (!this._keyboardActive) {
+			return;
+		}
+
+		let action = null;
+		switch (e.keyCode) {
 			case keyCodes.TAB:
 				action = e.shiftKey ? dragActions.previousElement : dragActions.nextElement;
 				break;
@@ -250,14 +259,6 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				action = dragActions.cancel;
 				this.updateComplete.then(() => this._keyboardActive = false);
 				break;
-			case keyCodes.RIGHT:
-				this._movingElement = true;
-				action = (this.dir === 'rtl' ? dragActions.unnest : dragActions.nest);
-				break;
-			case keyCodes.LEFT:
-				this._movingElement = true;
-				action = (this.dir === 'rtl' ? dragActions.nest : dragActions.unnest) ;
-				break;
 			case keyCodes.ENTER:
 			case keyCodes.SPACE:
 				action = dragActions.save;
@@ -266,49 +267,19 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			default:
 				return;
 		}
-		this._dispatchAction(action);
-		e.preventDefault();
-		e.stopPropagation();
-		const cell = findComposedAncestor(this, (parent) =>  parent.hasAttribute && parent.hasAttribute('draggable'));
-		if (cell) await cell.updateComplete;
-		await this.updateComplete;
-		this.focus();
-		this._movingElement = false;
-	}
 
-	_onFocusInKeyboardButton() {
-		if (hasDisplayedKeyboardTooltip) return;
-		this._displayKeyboardTooltip = true;
-		hasDisplayedKeyboardTooltip = true;
-	}
-
-	_onFocusOutKeyboardButton(e) {
-		this._displayKeyboardTooltip = false;
-		if (this._movingElement) {
-			this._movingElement = false;
-			e.stopPropagation();
-			e.preventDefault();
-			return;
-		}
-		this._keyboardActive = false;
-		this._dispatchAction(dragActions.save);
+		e.preventDefault();
 		e.stopPropagation();
-	}
+		this._doAction(action);
 
-	_onInactiveKeyboard(e) {
-		if (e.type === 'click' || e.keyCode === keyCodes.ENTER || e.keyCode === keyCodes.SPACE) {
-			this._dispatchAction(dragActions.active);
-			this._keyboardActive = true;
-			e.preventDefault();
-		}
 	}
 
 	_renderDragger() {
 		return html`
 			<button
-				class="d2l-list-item-drag-handle-dragger-button"
-				@click="${this._onInactiveKeyboard}"
-				@keydown="${this._onInactiveKeyboard}"
+				class="d2l-list-item-drag-handle-dragger-button d2l-list-item-drag-handle-button"
+				@click="${this._onDraggerButtonClick}"
+				@keydown="${this._onDraggerButtonKeydown}"
 				aria-label="${this._defaultLabel}"
 				?disabled="${this.disabled}">
 				<d2l-icon icon="tier1:dragger" class="d2l-button-dragger-icon"></d2l-icon>
@@ -318,19 +289,16 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 	_renderKeyboardDragging() {
 		return html`
-			<button
-				aria-label="${this._defaultLabel}"
-				class="d2l-list-item-drag-handle-keyboard-button"
-				@focusin="${this._onFocusInKeyboardButton}"
-				@focusout="${this._onFocusOutKeyboardButton}"
+			<d2l-button-move
+				class="d2l-list-item-drag-handle-button"
+				@d2l-button-move-action="${this._onMoveButtonAction}"
+				@focusin="${this._onKeyboardButtonFocusIn}"
+				@focusout="${this._onKeyboardButtonFocusOut}"
 				id="${this._buttonId}"
-				@keydown="${this._onActiveKeyboard}">
-				<d2l-icon icon="tier1:arrow-toggle-up" class="d2l-button-up-icon"></d2l-icon>
-				<d2l-icon icon="tier1:arrow-toggle-down" class="d2l-button-down-icon"></d2l-icon>
-				<div class="d2l-list-item-drag-handle-keyboard-button-up" @click="${this._dispatchActionUp}"></div>
-				<div class="d2l-list-item-drag-handle-keyboard-button-down" @click="${this._dispatchActionDown}"></div>
-			</button>
-			${this._displayKeyboardTooltip ? html`<d2l-tooltip align="start" for="${this._buttonId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}
+				@keydown="${this._onMoveButtonKeydown}"
+				text="${this._defaultLabel}">
+			</d2l-button-move>
+			${this._displayKeyboardTooltip ? html`<d2l-tooltip align="start" announced for="${this._buttonId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}
 		`;
 	}
 

package/components/list/list-item-drag-image.js

@@ -4,7 +4,7 @@ import { css, html, LitElement } from 'lit';
 import { bodySmallStyles } from '../typography/styles.js';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 class ListItemDragImage extends LocalizeCoreElement(SkeletonMixin(RtlMixin(LitElement))) {