@brightspace-ui/core 3.179.0 → 3.180.0

package/components/button/button-icon.js

@@ -168,7 +168,7 @@ class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(Butto
 				${this._renderIcon()}
 		</button>
 		${this.description ? html`<span id="${this._describedById}" hidden>${this.description}</span>` : null}
-		${this.disabled && this.disabledTooltip ? html`<d2l-tooltip for="${this._buttonId}">${this.disabledTooltip}</d2l-tooltip>` : ''}
+		${this.disabled && this.disabledTooltip ? html`<d2l-tooltip class="vdiff-target" for="${this._buttonId}">${this.disabledTooltip}</d2l-tooltip>` : ''}
 		`;
 	}
 

package/components/list/README.md

@@ -70,7 +70,7 @@ The list components are fairly complex and aim to be usable by all our users. In
 
 * When the `grid` attribute is used on the `d2l-list` component, it enables the list to follow the [Grid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/). More details on this are [below](#aria-layout-grid).
 
-* When using the `d2l-list-item-nav` component and/or mixin, usage of the `current` attribute adds the `aria-current` attribute to "page" for the `current` item and "location" for any parent and ancestors of the item. The components work together to keep these attributes up-to-date on subsequent selection. 
+* When using the `d2l-list-item-nav` component and/or mixin, usage of the `current` attribute adds the `aria-current` attribute to "page" for the `current` item and "location" for any parent and ancestors of the item. The components work together to keep these attributes up-to-date on subsequent selection.
 
    * Usage of the new `current` attribute over the existing `selected` attribute corresponds to `aria-current` and also leaves open the possibility of using both `current` and selection behavior together.
 
@@ -635,6 +635,7 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 
 | Property | Type | Description |
 |---|---|---|
+| `keyboard-drag-disabled` | Boolean | Disables keyboard dragging interaction. If enabled while implementing drag & drop, a keyboard alternative should be provided for the dragging functionality. |
 | `draggable` |  Boolean | Whether the item is draggable |
 | `drag-handle-text` | String | The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode. |
 | `drag-target-handle-only` | Boolean | Make the drag target the drag handle only. |

package/components/list/demo/demo-list-nested.js

@@ -23,6 +23,7 @@ class ListDemoNested extends LitElement {
 			demoItemKey: { type: String, attribute: 'demo-item-key' },
 			isDraggable: { attribute: 'is-draggable', type: Boolean },
 			selectable: { type: Boolean },
+			keyboardDragDisabled: { type: Boolean, attribute: 'keyboard-drag-disabled' },
 			disableExpandFeature: { type: Boolean, attribute: 'disable-expand-feature' },
 			expanded: { type: Boolean },
 			includeSecondaryActions: { type: Boolean, attribute: 'include-secondary-actions' },
@@ -203,6 +204,7 @@ class ListDemoNested extends LitElement {
 		return html`
 			<d2l-list-item
 				action-href="${this.includeActionHref ? 'http://www.d2l.com' : ''}"
+				?keyboard-drag-disabled="${this.keyboardDragDisabled}"
 				?draggable="${this.isDraggable}"
 				drag-handle-text="${item.primaryText}"
 				?drop-nested="${item.dropNested}"

package/components/list/demo/list-drag-and-drop.html

@@ -46,6 +46,14 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Disable Keyboard Drag</h2>
+
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested demo-item-key="imgPrimaryAndSupporting" is-draggable selectable keyboard-drag-disabled></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
+
 
 	</d2l-demo-page>
 

package/components/list/list-item-drag-drop-mixin.js

@@ -250,6 +250,11 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 
 	static get properties() {
 		return {
+			/**
+			 * **Drag & drop:** Disables keyboard dragging interaction. If draggable, a keyboard alternative should be provided for the dragging functionality.
+			 * @type {boolean}
+			 */
+			keyboardDragDisabled: { type: Boolean, attribute: 'keyboard-drag-disabled' },
 			/**
 			 * **Drag & drop:** Whether the item is draggable
 			 * @type {boolean}
@@ -862,6 +867,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			<d2l-list-item-drag-handle
 				id="${this._itemDragId}"
 				class="${classMap(classes)}"
+				?disabled="${this.keyboardDragDisabled}"
 				text="${ifDefined(this.dragHandleText)}"
 				keyboard-text-info="${ifDefined(this._keyboardTextInfo)}"
 				@focusin="${this._onFocusinDragHandle}"

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

@@ -174,12 +174,7 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(LitElement)) {
 	}
 
 	_onDraggerButtonClick() {
-		this.activateKeyboardMode();
-	}
-
-	_onDraggerButtonKeydown(e) {
-		if (e.keyCode !== keyCodes.ENTER && e.keyCode !== keyCodes.SPACE) return;
-		e.preventDefault();
+		if (this.disabled) return;
 		this.activateKeyboardMode();
 	}
 
@@ -287,7 +282,6 @@ class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(LitElement)) {
 			<button
 				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>

package/custom-elements.json

@@ -8677,6 +8677,10 @@
           "name": "selectable",
           "type": "boolean"
         },
+        {
+          "name": "keyboard-drag-disabled",
+          "type": "boolean"
+        },
         {
           "name": "disable-expand-feature",
           "type": "boolean"
@@ -8735,6 +8739,11 @@
           "attribute": "selectable",
           "type": "boolean"
         },
+        {
+          "name": "keyboardDragDisabled",
+          "attribute": "keyboard-drag-disabled",
+          "type": "boolean"
+        },
         {
           "name": "disableExpandFeature",
           "attribute": "disable-expand-feature",
@@ -8931,6 +8940,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "keyboard-drag-disabled",
+          "description": "**Drag & drop:** Disables keyboard dragging interaction. If draggable, a keyboard alternative should be provided for the dragging functionality.",
+          "type": "boolean"
+        },
         {
           "name": "drag-handle-text",
           "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
@@ -9052,6 +9066,12 @@
         {
           "name": "selectionInfo"
         },
+        {
+          "name": "keyboardDragDisabled",
+          "attribute": "keyboard-drag-disabled",
+          "description": "**Drag & drop:** Disables keyboard dragging interaction. If draggable, a keyboard alternative should be provided for the dragging functionality.",
+          "type": "boolean"
+        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -9292,6 +9312,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "keyboard-drag-disabled",
+          "description": "**Drag & drop:** Disables keyboard dragging interaction. If draggable, a keyboard alternative should be provided for the dragging functionality.",
+          "type": "boolean"
+        },
         {
           "name": "drag-handle-text",
           "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
@@ -9420,6 +9445,12 @@
         {
           "name": "selectionInfo"
         },
+        {
+          "name": "keyboardDragDisabled",
+          "attribute": "keyboard-drag-disabled",
+          "description": "**Drag & drop:** Disables keyboard dragging interaction. If draggable, a keyboard alternative should be provided for the dragging functionality.",
+          "type": "boolean"
+        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -9790,6 +9821,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "keyboard-drag-disabled",
+          "description": "**Drag & drop:** Disables keyboard dragging interaction. If draggable, a keyboard alternative should be provided for the dragging functionality.",
+          "type": "boolean"
+        },
         {
           "name": "drag-handle-text",
           "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
@@ -9930,6 +9966,12 @@
         {
           "name": "selectionInfo"
         },
+        {
+          "name": "keyboardDragDisabled",
+          "attribute": "keyboard-drag-disabled",
+          "description": "**Drag & drop:** Disables keyboard dragging interaction. If draggable, a keyboard alternative should be provided for the dragging functionality.",
+          "type": "boolean"
+        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -10104,6 +10146,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "keyboard-drag-disabled",
+          "description": "**Drag & drop:** Disables keyboard dragging interaction. If draggable, a keyboard alternative should be provided for the dragging functionality.",
+          "type": "boolean"
+        },
         {
           "name": "drag-handle-text",
           "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
@@ -10237,6 +10284,12 @@
         {
           "name": "selectionInfo"
         },
+        {
+          "name": "keyboardDragDisabled",
+          "attribute": "keyboard-drag-disabled",
+          "description": "**Drag & drop:** Disables keyboard dragging interaction. If draggable, a keyboard alternative should be provided for the dragging functionality.",
+          "type": "boolean"
+        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",

package/package.json

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