@brightspace-ui/core 2.80.5 → 2.80.7

package/components/backdrop/backdrop.js

@@ -3,7 +3,6 @@ import { css, html, LitElement } from 'lit';
 import { cssEscape, getComposedChildren, getComposedParent, isVisible } from '../../helpers/dom.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 
-export const BACKDROP_ROLE = 'data-d2l-backdrop-role';
 const BACKDROP_HIDDEN = 'data-d2l-backdrop-hidden';
 const BACKDROP_ARIA_HIDDEN = 'data-d2l-backdrop-aria-hidden';
 
@@ -68,7 +67,8 @@ class Backdrop extends LitElement {
 				transition: none;
 			}
 			@media (prefers-reduced-motion: reduce) {
-				:host {
+				:host,
+				:host([slow-transition]) {
 					transition: none;
 				}
 			}
@@ -162,20 +162,13 @@ function hideAccessible(target) {
 			if (path.indexOf(child) !== -1) continue;
 			if (child.hasAttribute(BACKDROP_HIDDEN)) continue;
 
-			const role = child.getAttribute('role');
-			if (role) child.setAttribute(BACKDROP_ROLE, role);
-			child.setAttribute('role', 'presentation');
-
-			if (child.nodeName === 'FORM' || child.nodeName === 'A') {
-				const ariaHidden = child.getAttribute('aria-hidden');
-				if (ariaHidden) child.setAttribute(BACKDROP_ARIA_HIDDEN, ariaHidden);
-				child.setAttribute('aria-hidden', 'true');
+			if (child.hasAttribute('aria-hidden')) {
+				child.setAttribute(BACKDROP_ARIA_HIDDEN, child.getAttribute('aria-hidden'));
 			}
+			child.setAttribute('aria-hidden', 'true');
 
 			child.setAttribute(BACKDROP_HIDDEN, BACKDROP_HIDDEN);
 			hiddenElements.push(child);
-
-			hideAccessibleChildren(child);
 		}
 	};
 
@@ -204,21 +197,11 @@ export function preventBodyScroll() {
 function showAccessible(elems) {
 	for (let i = 0; i < elems.length; i++) {
 		const elem = elems[i];
-		const role = elem.getAttribute(BACKDROP_ROLE);
-		if (role) {
-			elem.setAttribute('role', role);
-			elem.removeAttribute(BACKDROP_ROLE);
+		if (elem.hasAttribute(BACKDROP_ARIA_HIDDEN)) {
+			elem.setAttribute('aria-hidden', elem.getAttribute(BACKDROP_ARIA_HIDDEN));
+			elem.removeAttribute(BACKDROP_ARIA_HIDDEN);
 		} else {
-			elem.removeAttribute('role');
-		}
-		if (elem.nodeName === 'FORM' || elem.nodeName === 'A') {
-			const ariaHidden = elem.getAttribute(BACKDROP_ARIA_HIDDEN);
-			if (ariaHidden) {
-				elem.setAttribute('aria-hidden', ariaHidden);
-				elem.removeAttribute(BACKDROP_ARIA_HIDDEN);
-			} else {
-				elem.removeAttribute('aria-hidden');
-			}
+			elem.removeAttribute('aria-hidden');
 		}
 		elem.removeAttribute(BACKDROP_HIDDEN);
 	}

package/components/list/README.md

@@ -476,6 +476,7 @@ The `d2l-list-item-button` provides the same functionality as `d2l-list-item` ex
 | Property | Type | Description |
 |---|---|---|
 | `breakpoints` | Array | Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used. |
+| `button-disabled` | Boolean | Disables the primary action button |
 | `disabled` | Boolean | Disables the input |
 | `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. |

package/components/list/list-item-button-mixin.js

@@ -4,13 +4,30 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ListItemMixin } from './list-item-mixin.js';
 
 export const ListItemButtonMixin = superclass => class extends ListItemMixin(superclass) {
+	static get properties() {
+		return {
+			/**
+			 * Disables the primary action button
+			 * @type {boolean}
+			 */
+			buttonDisabled : { type: Boolean, attribute: 'button-disabled' }
+		};
+	}
 
 	static get styles() {
 
 		const styles = [ css`
-			:host {
+			:host(:not([button-disabled])) {
 				--d2l-list-item-content-text-color: var(--d2l-color-celestine);
 			}
+			:host([button-disabled][_hovering-primary-action]) .d2l-list-item-content,
+			:host([button-disabled][_focusing-primary-action]) .d2l-list-item-content {
+				--d2l-list-item-content-text-color: unset;
+				--d2l-list-item-content-text-decoration: none;
+			}
+			:host([button-disabled]) button {
+				cursor: default;
+			}
 			[slot="outside-control-container"] {
 				margin: 0 -12px;
 			}
@@ -51,6 +68,7 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 	constructor() {
 		super();
 		this._primaryActionId = getUniqueId();
+		this.buttonDisabled = false;
 	}
 
 	_onButtonClick() {
@@ -59,7 +77,7 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 	}
 
 	_renderPrimaryAction(labelledBy) {
-		return html`<button id="${this._primaryActionId}" aria-labelledby="${labelledBy}" @click="${this._onButtonClick}"></button>`;
+		return html`<button id="${this._primaryActionId}" aria-labelledby="${labelledBy}" @click="${this._onButtonClick}" ?disabled="${this.buttonDisabled}"></button>`;
 	}
 
 };

package/custom-elements.json

@@ -7742,6 +7742,12 @@
       "path": "./components/list/list-item-button.js",
       "description": "A component for a \"listitem\" child within a list. It provides semantics, basic layout, breakpoints for responsiveness, a link for navigation, and selection.",
       "attributes": [
+        {
+          "name": "button-disabled",
+          "description": "Disables the primary action button",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "drag-target-handle-only",
           "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
@@ -7838,6 +7844,13 @@
         }
       ],
       "properties": [
+        {
+          "name": "buttonDisabled",
+          "attribute": "button-disabled",
+          "description": "Disables the primary action button",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "dragTargetHandleOnly",
           "attribute": "drag-target-handle-only",

package/package.json

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