@brightspace-ui/core 3.178.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/link/README.md

@@ -49,6 +49,8 @@ Import and use the `<d2l-link>` web component instead of the native `<a>` elemen
 |--|--|--|
 | `aria-label` | String | Label to provide more context for screen reader users when the link text is not enough |
 | `href` | String, required | URL or URL fragment of the link |
+| `disabled` | Boolean | Disables the link |
+| `disabled-tooltip` | String | Tooltip text when disabled |
 | `download` | String | If the attribute is provided, it will prompt the user to download the resource instead of navigating to it. Additionally, if the attribute is provided with a value, that value will be used for the filename. |
 | `main` | Boolean | Whether to apply the "main" link style |
 | `lines` | Number | The number of lines to display before truncating text with an ellipsis. The text will not be truncated unless a value is specified. |

package/components/link/demo/link.html

@@ -92,6 +92,20 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Disabled</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-link disabled href="https://www.d2l.com" target="_blank">Disabled Link</d2l-link>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Disabled with Tooltip</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-link disabled disabled-tooltip="This link is disabled because you do not have permission" href="https://www.d2l.com" target="_blank">Disabled Link with Tooltip</d2l-link>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/link/link.js

@@ -1,11 +1,13 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
+import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { getOverflowDeclarations, overflowEllipsisDeclarations } from '../../helpers/overflow.js';
 import { _generateLinkStyles } from './link-styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getFlag } from '../../helpers/flags.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
@@ -28,6 +30,16 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 			 * @type {string}
 			 */
 			ariaLabel: { type: String, attribute: 'aria-label' },
+			/**
+			 * Disables the link
+			 * @type {boolean}
+			 */
+			disabled: { type: Boolean, reflect: true },
+			/**
+			 * Tooltip text when disabled
+			 * @type {string}
+			 */
+			disabledTooltip: { type: String, attribute: 'disabled-tooltip', reflect: true },
 			/**
 			 * Download a URL instead of navigating to it
 			 * @type {boolean}
@@ -113,6 +125,24 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 					--d2l-icon-fill-color: var(--d2l-color-celestine-minus-1);
 				}
 
+				:host([disabled]:not([disabled-tooltip])) a:hover {
+					color: var(--d2l-color-celestine);
+					text-decoration: none;
+				}
+				:host([disabled]:not([disabled-tooltip])) a:hover d2l-icon {
+					--d2l-icon-fill-color: var(--d2l-color-celestine);
+				}
+				a[aria-disabled="true"],
+				a[aria-disabled="true"]:active {
+					cursor: default;
+				}
+				a[aria-disabled="true"] .d2l-link-content {
+					opacity: 0.74;
+				}
+				a[aria-disabled="true"] d2l-icon {
+					opacity: 0.64;
+				}
+
 				@media print {
 					d2l-icon {
 						display: none;
@@ -124,6 +154,7 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 
 	constructor() {
 		super();
+		this.disabled = false;
 		this.download = false;
 		this.main = false;
 		this.small = false;
@@ -141,6 +172,7 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 			'd2l-link-small': this.small
 		};
 		const spanClasses = {
+			'd2l-link-content': true,
 			'truncate': this.lines > 1,
 			'truncate-one': this.lines === 1
 		};
@@ -148,6 +180,9 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 		const newWindowElements = (this.target === '_blank')
 			? html`<span id="new-window"><span style="font-size: 0;">&nbsp;</span><d2l-icon icon="tier1:new-window"></d2l-icon></span><span class="d2l-offscreen">${this.localize('components.link.open-in-new-window')}</span>`
 			: nothing;
+		const disabledTooltip = this.disabled && this.disabledTooltip
+			? html`<d2l-tooltip class="vdiff-target" for="${this.#linkId}">${this.disabledTooltip}</d2l-tooltip>`
+			: nothing;
 
 		/*
 		* NOTICE:
@@ -155,14 +190,27 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 		* Do not modify for readability!
 		*/
 		return html`<a
+				aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
 				aria-label="${ifDefined(this.ariaLabel)}"
 				class="${classMap(linkClasses)}"
+				@click="${this.#handleClick}"
 				?download="${this.download}"
-				href="${ifDefined(this.href)}"
+				href="${ifDefined(!this.disabled ? this.href : undefined)}"
+				id="${this.#linkId}"
+				tabindex="${ifDefined(this.disabled && this.disabledTooltip ? 0 : undefined)}"
 				target="${ifDefined(this.target)}"
 				><span
 					class="${classMap(spanClasses)}"
-					style="${styleMap(styles)}"><slot></slot></span>${newWindowElements}</a>`;
+					style="${styleMap(styles)}"><slot></slot></span>${newWindowElements}</a>${disabledTooltip}`;
+	}
+
+	#linkId = getUniqueId();
+
+	#handleClick(e) {
+		if (this.disabled) {
+			e.stopPropagation();
+			e.preventDefault();
+		}
 	}
 
 }

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

@@ -8483,6 +8483,11 @@
           "description": "ACCESSIBILITY: Label to provide more context for screen reader users when the link text is not enough",
           "type": "string"
         },
+        {
+          "name": "disabled-tooltip",
+          "description": "Tooltip text when disabled",
+          "type": "string"
+        },
         {
           "name": "href",
           "description": "REQUIRED: URL or URL fragment of the link",
@@ -8493,6 +8498,12 @@
           "description": "Where to display the linked URL",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "description": "Disables the link",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "download",
           "description": "Download a URL instead of navigating to it",
@@ -8525,6 +8536,12 @@
           "description": "ACCESSIBILITY: Label to provide more context for screen reader users when the link text is not enough",
           "type": "string"
         },
+        {
+          "name": "disabledTooltip",
+          "attribute": "disabled-tooltip",
+          "description": "Tooltip text when disabled",
+          "type": "string"
+        },
         {
           "name": "href",
           "attribute": "href",
@@ -8537,6 +8554,13 @@
           "description": "Where to display the linked URL",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the link",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "download",
           "attribute": "download",
@@ -8653,6 +8677,10 @@
           "name": "selectable",
           "type": "boolean"
         },
+        {
+          "name": "keyboard-drag-disabled",
+          "type": "boolean"
+        },
         {
           "name": "disable-expand-feature",
           "type": "boolean"
@@ -8711,6 +8739,11 @@
           "attribute": "selectable",
           "type": "boolean"
         },
+        {
+          "name": "keyboardDragDisabled",
+          "attribute": "keyboard-drag-disabled",
+          "type": "boolean"
+        },
         {
           "name": "disableExpandFeature",
           "attribute": "disable-expand-feature",
@@ -8907,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.",
@@ -9028,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",
@@ -9268,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.",
@@ -9396,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",
@@ -9766,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.",
@@ -9906,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",
@@ -10080,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.",
@@ -10213,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/helpers/interactive.js

@@ -35,7 +35,7 @@ export function isInteractive(ele, elems, roles) {
 		return true;
 	}
 	const role = (ele.getAttribute('role') || '');
-	return (nodeName === 'a' && ele.hasAttribute('href')) || roles[role] || false;
+	return (nodeName === 'a' && (ele.hasAttribute('href') || ele.getAttribute('tabindex') === '0')) || roles[role] || false;
 }
 
 export function isInteractiveInComposedPath(composedPath, predicate, options) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.178.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",