@brightspace-ui/core 3.177.1 → 3.179.0

package/components/filter/demo/filter-load-more-demo.js

@@ -1,6 +1,7 @@
 import '../filter.js';
 import '../filter-dimension-set.js';
 import '../filter-dimension-set-value.js';
+import '../filter-overflow-group.js';
 import { html, LitElement } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 
@@ -32,11 +33,48 @@ const FullData = [
 			{ key: 'student', selected:false, text: 'Student' }
 		],
 		initialCount: 2
+	},
+	{
+		key: 'dep',
+		text: 'Department',
+		values: [
+			{ key: 'english', selected:false, text: 'English' },
+			{ key: 'spanish', selected:false, text: 'Spanish' },
+			{ key: 'science', selected:false, text: 'Science' }
+		],
+		initialCount: 2
+	},
+	{
+		key: 'grad',
+		text: 'Grade Level',
+		values: [
+			{ key: '1', selected:false, text: '1st Grade' },
+			{ key: '2', selected:false, text: '2nd Grade' },
+			{ key: '3', selected:false, text: '3rd Grade' }
+		],
+		initialCount: 2
+	}
+	,
+	{
+		key: 'city',
+		text: 'City',
+		values: [
+			{ key: '1', selected:false, text: '1st City' },
+			{ key: '2', selected:false, text: '2nd City' },
+			{ key: '3', selected:false, text: '3rd City' }
+		],
+		initialCount: 2
 	}
 ];
 
 class FilterLoadMoreDemo extends LitElement {
 
+	static get properties() {
+		return {
+			useOverflowGroup: { type: Boolean, attribute: 'use-overflow-group' }
+		};
+	}
+
 	constructor() {
 		super();
 		const dimensions = [];
@@ -60,8 +98,16 @@ class FilterLoadMoreDemo extends LitElement {
 	}
 
 	render() {
+		if (this.useOverflowGroup) return html`<d2l-filter-overflow-group min-to-show="0">
+			${repeat(this._dimensions, dimension => dimension.key, dimension => html`<d2l-filter
+				@d2l-filter-change="${this._handleFilterChange}"
+				@d2l-filter-dimension-load-more=${this._handleLoadMore}
+				@d2l-filter-dimension-search=${this._handleSearch}>
+				${this._renderDimensionSet(dimension)}
+			</d2l-filter>`)}
+		</d2l-filter-overflow-group>`;
 		return html`
-			<d2l-filter 
+			<d2l-filter
 				@d2l-filter-change="${this._handleFilterChange}"
 				@d2l-filter-dimension-load-more=${this._handleLoadMore}
 				@d2l-filter-dimension-search=${this._handleSearch}>

package/components/filter/demo/filter-overflow-group.html

@@ -10,6 +10,7 @@
 		import '../../filter/filter-dimension-set-value.js';
 		import '../../filter/filter-overflow-group.js';
 		import '../../filter/filter-tags.js';
+		import './filter-load-more-demo.js';
 	</script>
 	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0">
     <meta charset="UTF-8">
@@ -233,6 +234,13 @@
 				<d2l-filter-tags filter-ids="filter1 filter2 filter3 filter4 filter5 filter6" label="Applied Filters:"></d2l-filter-tags>
 			</template>
 		</d2l-demo-snippet>
+
+		<h2>Filter Overflow Group with Load More and Search</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-filter-load-more-demo use-overflow-group></d2l-filter-load-more-demo>
+			</template>
+		</d2l-demo-snippet>
 	</d2l-demo-page>
 </body>
 </html>

package/components/filter/filter-overflow-group.js

@@ -4,11 +4,7 @@ import { css, html, LitElement } from 'lit';
 import { OVERFLOW_CLASS, OverflowGroupMixin } from '../overflow-group/overflow-group-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 
-function createFilterItem(node) {
-	const dimensionSets = node.querySelectorAll('d2l-filter-dimension-set');
-	const clones = Array.from(dimensionSets).map((set) => set.cloneNode(true));
-	return clones;
-}
+const updateEvents = ['d2l-filter-dimension-load-more', 'd2l-filter-dimension-search'];
 
 /**
  * A component that can be used to display a group of filters that will be put into an overflow filter when they no longer fit on the first line of their container
@@ -23,6 +19,7 @@ class FilterOverflowGroup extends OverflowGroupMixin(LitElement) {
 			 * @type {boolean}
 			 */
 			tags: { type: Boolean },
+			_openedDimensions: { state: true },
 			_filterIds: { state: true }
 		};
 	}
@@ -39,10 +36,18 @@ class FilterOverflowGroup extends OverflowGroupMixin(LitElement) {
 		super();
 
 		this._filterIds = '';
+		this._openedDimensions = [];
+		this._updateFilterData = this._updateFilterData.bind(this);
+		this._handleSlottedFilterChange = this._handleSlottedFilterChange.bind(this);
+		this._handleSlottedDimensionFirstOpen = this._handleSlottedDimensionFirstOpen.bind(this);
 	}
 
 	connectedCallback() {
 		super.connectedCallback();
+		for (const event of updateEvents)
+			this.addEventListener(event, this._updateFilterData);
+		this.addEventListener('d2l-filter-change', this._handleSlottedFilterChange);
+		this.addEventListener('d2l-filter-dimension-first-open', this._handleSlottedDimensionFirstOpen);
 
 		if (!this.tags) return;
 
@@ -51,10 +56,12 @@ class FilterOverflowGroup extends OverflowGroupMixin(LitElement) {
 		this.appendChild(this._filterTags);
 	}
 
-	firstUpdated(changedProperties) {
-		super.firstUpdated(changedProperties);
-
-		this.addEventListener('d2l-filter-change', this._handleFilterChange);
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		for (const event of updateEvents)
+			this.removeEventListener(event, this._updateFilterData);
+		this.removeEventListener('d2l-filter-change', this._handleSlottedFilterChange);
+		this.removeEventListener('d2l-filter-dimension-first-open', this._handleSlottedDimensionFirstOpen);
 	}
 
 	updated(changedProperties) {
@@ -79,30 +86,83 @@ class FilterOverflowGroup extends OverflowGroupMixin(LitElement) {
 			node.setAttribute('data-filter-tags-subscribed', 'data-filter-tags-subscribed');
 		}
 
-		return createFilterItem(node);
+		return node._dimensions;
 	}
 
 	getOverflowContainer(overflowItems) {
+		const newDimensions = overflowItems.reduce((p, n) => p.concat(n), []).map(dim => {
+			return { ...dim, values: dim.values.map(v => ({ ...v })) };
+		});
+
+		/* eslint-disable lit/no-private-properties */
 		return html`
-			<d2l-filter class="${OVERFLOW_CLASS} vdiff-target" @d2l-filter-change="${this._handleFilterChange}">
-				${overflowItems}
+			<d2l-filter
+				class="${OVERFLOW_CLASS} vdiff-target"
+				_ignoreSlotChanges
+				._openedDimensions=${this._openedDimensions}
+				._dimensions=${newDimensions}
+				@d2l-filter-change="${this.#handleFilterChange}"
+				@d2l-filter-dimension-load-more="${this.#handleFilterLoadMore}"
+				@d2l-filter-dimension-search="${this.#handleFilterSearch}"
+				@d2l-filter-dimension-first-open="${this.#handleFirstOpen}">
 			</d2l-filter>
 		`;
+		/* eslint-enable lit/no-private-properties */
+	}
+
+	_handleSlottedDimensionFirstOpen(e) {
+		this._openedDimensions.push(e.detail.key);
+		this.requestUpdate();
 	}
 
-	_handleFilterChange(e) {
-		const target = (e.target.classList && e.target.classList.contains(OVERFLOW_CLASS)) ? this : e.target;
+	_handleSlottedFilterChange(e) {
 		e.detail.dimensions.forEach((dimension) => {
-			const filterSet = target.querySelector(`d2l-filter-dimension-set[key=${dimension.dimensionKey}`);
-			if (!filterSet) return;
 			dimension.changes.forEach((change) => {
-				const filterSetValue = filterSet.querySelector(`d2l-filter-dimension-set-value[key=${change.valueKey}]`);
+				const filterSetValue = this.querySelector(`d2l-filter-dimension-set[key=${dimension.dimensionKey}] > d2l-filter-dimension-set-value[key="${change.valueKey}"]`);
 				if (!filterSetValue) return;
 				filterSetValue.selected = change.selected;
 			});
 		});
 	}
 
+	async _updateFilterData() {
+		await Promise.all([...this.querySelectorAll('d2l-filter')].map(f => f.updateComplete));
+		this.requestUpdate();
+	}
+
+	#handleFilterChange(e) {
+		e.detail.dimensions.forEach((dimension) => {
+			this.#runOnFilterDimension(dimension.dimensionKey, filter => {
+				filter.requestFilterChangeEvent(e.detail.allCleared, [dimension]);
+			});
+		});
+	}
+
+	#handleFilterLoadMore(e) {
+		this.#runOnFilterDimension(e.detail.key, filter => {
+			filter.requestFilterLoadMoreEvent(e.detail.key, e.detail.value, e.detail.loadMoreCompleteCallback);
+		});
+	}
+
+	#handleFilterSearch(e) {
+		this.#runOnFilterDimension(e.detail.key, filter => {
+			filter.requestFilterSearchEvent(e.detail.key, e.detail.value, e.detail.searchCompleteCallback);
+		});
+	}
+
+	#handleFirstOpen(e) {
+		this.#runOnFilterDimension(e.detail.key, filter => {
+			filter.requestFilterDimensionFirstOpenEvent(e.detail.key);
+		});
+	}
+
+	#runOnFilterDimension(key, callback) {
+		const dimension = this.querySelector(`d2l-filter-dimension-set[key=${key}]`);
+		const filter = dimension?.parentNode;
+		if (filter?.tagName !== 'D2L-FILTER') return;
+		callback(filter);
+	}
+
 }
 
 customElements.define('d2l-filter-overflow-group', FilterOverflowGroup);

package/components/filter/filter.js

@@ -93,6 +93,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 			_activeDimensionKey: { type: String, attribute: false },
 			_dimensions: { type: Array, attribute: false },
 			_displayKeyboardTooltip: { state: true },
+			_ignoreSlotChanges: { type: Boolean },
 			_minWidth: { type: Number, attribute: false },
 			_totalAppliedCount: { type: Number, attribute: false }
 		};
@@ -228,6 +229,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		this._changeEventsToDispatch = new Map();
 		this._dimensions = [];
 		this._displayKeyboardTooltip = false;
+		this._ignoreSlotChanges = false;
 		this._minWidth = 285;
 		this._openedDimensions = [];
 		this._totalAppliedCount = 0;
@@ -332,7 +334,8 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		`;
 	}
 
-	update(changedProperties) {
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
 		if (
 			changedProperties.has('opened')
 			&& this.opened
@@ -341,13 +344,70 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		) {
 			this._updateDimensionShouldBubble(this._dimensions[0]);
 		}
-		super.update(changedProperties);
+		if (changedProperties.has('_dimensions')) {
+			this._setFilterCounts();
+			this._activeFiltersSubscribers.updateSubscribers();
+		}
+	}
+
+	requestFilterChangeEvent(allCleared, dimensions) {
+		this.dispatchEvent(new CustomEvent('d2l-filter-change', {
+			bubbles: true,
+			composed: false,
+			detail: { allCleared, dimensions }
+		}));
 	}
 
 	requestFilterClearAll() {
 		this._handleClearAll();
 	}
 
+	requestFilterDimensionFirstOpenEvent(dimensionKey) {
+		this._openedDimensions.push(dimensionKey);
+		this.dispatchEvent(new CustomEvent('d2l-filter-dimension-first-open', {
+			bubbles: true,
+			composed: false,
+			detail: { key: dimensionKey }
+		}));
+	}
+
+	requestFilterLoadMoreEvent(key, searchValue, callback = () => {}) {
+		const applySearch = this._getSearchCallback(key);
+		this.dispatchEvent(new CustomEvent('d2l-filter-dimension-load-more', {
+			detail: {
+				key: key,
+				value: searchValue,
+				loadMoreCompleteCallback: (options) => {
+					applySearch(options);
+					callback(options);
+				}
+			},
+			bubbles: true,
+			composed: false
+		}));
+	}
+
+	requestFilterSearchEvent(key, searchValue, callback = () => {}) {
+		const dimension = this._getDimensionByKey(key);
+		dimension.searchValue = searchValue;
+		dimension.loading = true;
+		this.requestUpdate();
+		const searchCallback = this._getSearchCallback(key);
+
+		this.dispatchEvent(new CustomEvent('d2l-filter-dimension-search', {
+			bubbles: true,
+			composed: false,
+			detail: {
+				key: dimension.key,
+				value: dimension.searchValue,
+				searchCompleteCallback: (options) => {
+					searchCallback(options);
+					callback(options);
+				}
+			}
+		}));
+	}
+
 	requestFilterValueClear(keyObject) {
 		const dimension = this._getDimensionByKey(keyObject.dimension);
 
@@ -660,11 +720,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 			dimension.changes = Array.from(dimension.changes.values());
 		});
 
-		this.dispatchEvent(new CustomEvent('d2l-filter-change', {
-			bubbles: true,
-			composed: false,
-			detail: { allCleared: allCleared, dimensions: dimensions }
-		}));
+		this.requestFilterChangeEvent(allCleared, dimensions);
 		this._changeEventsToDispatch = new Map();
 		clearTimeout(this._changeEventTimeout);
 		this._activeFiltersSubscribers.updateSubscribers();
@@ -678,11 +734,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 
 	_dispatchDimensionFirstOpenEvent(dimension) {
 		if (!this._openedDimensions.includes(dimension.key)) {
-			this.dispatchEvent(new CustomEvent('d2l-filter-dimension-first-open', { bubbles: true, composed: false, detail: { key: dimension.key } }));
+			this.requestFilterDimensionFirstOpenEvent(dimension.key);
 			if (dimension.searchType === 'manual') {
 				this._search(dimension);
 			}
-			this._openedDimensions.push(dimension.key);
 		}
 	}
 
@@ -694,9 +749,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		return this._dimensions.find(dimension => dimension.key === key);
 	}
 
-	_getSearchCallback(dimension) {
+	_getSearchCallback(key) {
 		return function({ keysToDisplay = [], displayAllKeys = false } = {}) {
 			requestAnimationFrame(() => {
+				const dimension = this._getDimensionByKey(key);
 				dimension.displayAllKeys = displayAllKeys;
 				dimension.searchKeysToDisplay = keysToDisplay;
 				this._performDimensionSearch(dimension);
@@ -830,21 +886,11 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 	_handleDimensionLoadMore(e) {
 		const dimensionKey = e.target.parentNode.id.slice(SET_DIMENSION_ID_PREFIX.length);
 		const dimension = this._getDimensionByKey(dimensionKey);
-		const applySearch = this._getSearchCallback(dimension);
 
-		this.dispatchEvent(new CustomEvent('d2l-filter-dimension-load-more', {
-			detail: {
-				key: dimensionKey,
-				value: dimension.searchValue,
-				loadMoreCompleteCallback: (options) => {
-					applySearch(options);
-					const menu = this.shadowRoot.querySelector('d2l-dropdown-menu');
-					menu ? menu.addEventListener('d2l-dropdown-position', e.detail.complete, { once: true }) : e.detail.complete();
-				}
-			},
-			bubbles: true,
-			composed: false
-		}));
+		this.requestFilterLoadMoreEvent(dimensionKey, dimension.value, () => {
+			const menu = this.shadowRoot.querySelector('d2l-dropdown-menu');
+			menu ? menu.addEventListener('d2l-dropdown-position', e.detail.complete, { once: true }) : e.detail.complete();
+		});
 	}
 
 	_handleDimensionShowComplete() {
@@ -919,6 +965,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 
 	_handleSlotChange(e) {
 		const dimensionNodes = this._getSlottedNodes(e.target);
+		if (this._ignoreSlotChanges) return;
 
 		this._dimensions = dimensionNodes.map(dimension => {
 			const type = dimension.tagName.toLowerCase();
@@ -951,9 +998,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 
 			return info;
 		});
-
-		this._setFilterCounts();
-		this._activeFiltersSubscribers.updateSubscribers();
 	}
 
 	_handleTooltipHide() {
@@ -1055,15 +1099,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 			dimension.loading = true;
 			this.requestUpdate();
 
-			this.dispatchEvent(new CustomEvent('d2l-filter-dimension-search', {
-				bubbles: false,
-				composed: false,
-				detail: {
-					key: dimension.key,
-					value: dimension.searchValue,
-					searchCompleteCallback: this._getSearchCallback(dimension)
-				}
-			}));
+			this.requestFilterSearchEvent(dimension.key, dimension.searchValue);
 		}
 	}
 

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/custom-elements.json

@@ -4172,7 +4172,20 @@
     },
     {
       "name": "d2l-filter-load-more-demo",
-      "path": "./components/filter/demo/filter-load-more-demo.js"
+      "path": "./components/filter/demo/filter-load-more-demo.js",
+      "attributes": [
+        {
+          "name": "use-overflow-group",
+          "type": "boolean"
+        }
+      ],
+      "properties": [
+        {
+          "name": "useOverflowGroup",
+          "attribute": "use-overflow-group",
+          "type": "boolean"
+        }
+      ]
     },
     {
       "name": "d2l-filter-search-demo",
@@ -8470,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",
@@ -8480,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",
@@ -8512,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",
@@ -8524,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",

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.177.1",
+  "version": "3.179.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",