@brightspace-ui/core 3.104.0 → 3.106.0

package/components/button/README.md

@@ -241,7 +241,7 @@ Daylight buttons rely on standard button semantics to ensure a smooth experience
 * If the button's context is implied by visual layout, then `description` can be used to add missing context
   * Example: if multiple page sections have an Edit button relying on visual layout to indicate which section it edits, there could be extra information in the `description` to help differentiate the Edit buttons for non-sighted users
 
-* If expanding other content in a dropdown, use the [Dropdown](../../components/dropdown) component; if building custom expand/collapse behaviour, be sure to use [`aria-expanded`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded) and [`aria-haspopup`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-haspopup) attributes in accordance with best practices.
+* If expanding other content in a dropdown, use the [Dropdown](../../components/dropdown) component; if building custom expand/collapse behaviour, be sure to use [`expanded`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded) and [`aria-haspopup`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-haspopup) attributes in accordance with best practices.
 
 * Disabled buttons are normally not focusable as per web standards, but if the disabled state needs explaining you can use `disabled-tooltip` to provide an explanation that appears in a [tooltip](../../components/tooltip) via [aria-describedby](https://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby)
 

package/components/button/button-icon.js

@@ -172,7 +172,7 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
 			<button
 				aria-describedby="${ifDefined(this.description ? this._describedById : undefined)}"
 				aria-disabled="${ifDefined(this.disabled && this.disabledTooltip ? 'true' : undefined)}"
-				aria-expanded="${ifDefined(this.ariaExpanded)}"
+				aria-expanded="${ifDefined(this.expanded)}"
 				aria-haspopup="${ifDefined(this.ariaHaspopup)}"
 				aria-label="${this.ariaLabel ? this.ariaLabel : ifDefined(this.text)}"
 				?autofocus="${this.autofocus}"

package/components/button/button-mixin.js

@@ -21,6 +21,11 @@ export const ButtonMixin = superclass => class extends FocusMixin(superclass) {
 			 */
 			// eslint-disable-next-line lit/no-native-attributes
 			autofocus: { type: Boolean, reflect: true },
+			/**
+			 * Wether the controlled element is expanded. Replaces 'aria-expanded'
+			 * @type {'true' | 'false'}
+			 */
+			expanded: { type: String, reflect: true, attribute: 'expanded' },
 			/**
 			 * Disables the button
 			 * @type {boolean}
@@ -102,6 +107,10 @@ export const ButtonMixin = superclass => class extends FocusMixin(superclass) {
 		return 'button';
 	}
 
+	get isButtonMixin() {
+		return true;
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener('click', this._handleClick, true);
@@ -112,6 +121,13 @@ export const ButtonMixin = superclass => class extends FocusMixin(superclass) {
 		this.removeEventListener('click', this._handleClick, true);
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('ariaExpanded') && this.ariaExpanded !== undefined) {
+			this.expanded = this.ariaExpanded;
+		}
+	}
+
 	/** @internal */
 	_getType() {
 		if (this.type === 'submit' || this.type === 'reset') {

package/components/button/button-subtle.js

@@ -204,7 +204,7 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
 			<button
 				aria-describedby="${ifDefined(this.description ? this._describedById : undefined)}"
 				aria-disabled="${ifDefined(this.disabled && this.disabledTooltip ? 'true' : undefined)}"
-				aria-expanded="${ifDefined(this.ariaExpanded)}"
+				aria-expanded="${ifDefined(this.expanded)}"
 				aria-haspopup="${ifDefined(this.ariaHaspopup)}"
 				aria-label="${ifDefined(this.ariaLabel)}"
 				?autofocus="${this.autofocus}"

package/components/button/button.js

@@ -99,7 +99,7 @@ class Button extends ButtonMixin(LitElement) {
 			<button
 				aria-describedby="${ifDefined(this.description ? this._describedById : undefined)}"
 				aria-disabled="${ifDefined(this.disabled && this.disabledTooltip ? 'true' : undefined)}"
-				aria-expanded="${ifDefined(this.ariaExpanded)}"
+				aria-expanded="${ifDefined(this.expanded)}"
 				aria-haspopup="${ifDefined(this.ariaHaspopup)}"
 				aria-label="${ifDefined(this.ariaLabel)}"
 				?autofocus="${this.autofocus}"

package/components/dialog/demo/dialog.html

@@ -15,6 +15,7 @@
 			import '../../filter/filter.js';
 			import '../../filter/filter-dimension-set.js';
 			import '../../filter/filter-dimension-set-value.js';
+			import '../../inputs/input-checkbox.js';
 			import '../../list/demo/demo-list.js';
 			import '../dialog.js';
 			import './dialog-async-content.js';
@@ -296,6 +297,38 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Dialog (no content scrolling)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button id="openNoScrollDialog">Show Dialog</d2l-button>
+					<d2l-dialog id="noScrollDialog" title-text="Dialog Title">
+						<d2l-input-checkbox id="noScroll">Show extra paragraphs</d2l-input-checkbox>
+						<div>
+							<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+							<p id="p2" style="display: none;">Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+							<p id="p3" style="display: none;">Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						</div>
+						<d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
+						<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+					</d2l-dialog>
+					<script>
+						document.querySelector('#noScroll').addEventListener('change', async(e) => {
+							const dialog = document.querySelector('#noScrollDialog');
+							dialog.noContentScroll = true;
+							const display = e.target.checked ? 'block' : 'none';
+							dialog.querySelector('#p2').style.display = display;
+							dialog.querySelector('#p3').style.display = display;
+							await dialog.resize();
+							dialog.noContentScroll = false;
+						});
+						document.querySelector('#openNoScrollDialog').addEventListener('click', () => {
+							document.querySelector('#noScrollDialog').opened = true;
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/dialog/dialog-mixin.js

@@ -41,7 +41,10 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			 * Whether or not the dialog is open
 			 */
 			opened: { type: Boolean, reflect: true },
-
+			/**
+			 * ADVANCED: Opt out of dialog content scrolling
+			 */
+			noContentScroll: { type: Boolean, attribute: 'no-content-scroll', reflect: true },
 			/**
 			 * The optional title for the dialog
 			 */
@@ -68,6 +71,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 	constructor() {
 		super();
 		this.focusableContentElemPresent = false;
+		this.noContentScroll = false;
 		this.opened = false;
 		this._autoSize = true;
 		this._dialogId = getUniqueId();

package/components/dialog/dialog-styles.js

@@ -147,7 +147,7 @@ export const dialogStyles = css`
 		height: 100%;
 	}
 
-	.d2l-dialog-outer-scroll .d2l-dialog-content {
+	:host(:not([no-content-scroll])) .d2l-dialog-outer-scroll .d2l-dialog-content {
 		overflow: auto;
 	}
 

package/components/dropdown/dropdown-opener-mixin.js

@@ -113,13 +113,8 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 
 		this.addEventListener('d2l-dropdown-open', this.__onOpened);
 		this.addEventListener('d2l-dropdown-close', this.__onClosed);
-
-		const opener = this.getOpenerElement();
 		const content = this.__getContentElement();
-		if (!opener) {
-			return;
-		}
-		opener.setAttribute('aria-expanded', (content && content.opened || false).toString());
+		this._setOpenerElementAttribute(content?.opened || false);
 	}
 
 	updated(changedProperties) {
@@ -201,12 +196,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 	__onClosed() {
 		intersectionObserver.unobserve(this);
 
-		const opener = this.getOpenerElement();
-		if (!opener) {
-			return;
-		}
-		opener.setAttribute('aria-expanded', 'false');
-		opener.removeAttribute('active');
+		if (!this._setOpenerElementAttribute(false, true)) return;
 		this.dropdownOpened = false;
 		this._isOpenedViaClick = false;
 	}
@@ -273,12 +263,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 	}
 
 	__onOpened() {
-		const opener = this.getOpenerElement();
-		if (!opener) {
-			return;
-		}
-		opener.setAttribute('aria-expanded', 'true');
-		opener.setAttribute('active', 'true');
+		if (!this._setOpenerElementAttribute(true, true)) return;
 		this._isFading = false;
 
 		intersectionObserver.observe(this);
@@ -345,4 +330,16 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 			this.closeDropdown();
 		}
 	}
+
+	_setOpenerElementAttribute(val, setActive = false) {
+		const opener = this.getOpenerElement();
+		if (!opener) return false;
+		const attribute = opener.isButtonMixin ? 'expanded' : 'aria-expanded';
+		opener.setAttribute(attribute, val.toString());
+		if (setActive) {
+			if (val) opener.setAttribute('active', 'true');
+			else opener.removeAttribute('active');
+		}
+		return true;
+	}
 };

package/components/expand-collapse/README.md

@@ -14,7 +14,7 @@ The `d2l-expand-collapse-content` element can be used to create expandable and c
   button.addEventListener('click', () => {
     const section = document.querySelector('d2l-expand-collapse-content');
     section.expanded = !section.expanded;
-    button.setAttribute('aria-expanded', section.expanded ? 'true' : 'false');
+    button.setAttribute('expanded', section.expanded ? 'true' : 'false');
   });
 </script>
 <d2l-button primary>Toggle</d2l-button>
@@ -43,6 +43,6 @@ To make your usage of `d2l-expand-collapse-content` accessible, it should follow
 To achieve this, the control that toggles the expanded state should:
  - Use the [`d2l-button`](../button) or use an element with the [`button`](https://w3c.github.io/aria/#button) role
  - Toggle between states when using the `Enter` and `Space` buttons and retain focus upon toggle
- - Have the [`aria-expanded`](https://www.w3.org/TR/wai-aria/#aria-expanded) attribute set to `'true'` or `'false'` depending on expansion state so that screen reader users will know what state it's in
+ - Have the [`aria-expanded`](https://www.w3.org/TR/wai-aria/#aria-expanded)(`expanded` on controls using `ButtonMixin` like core [button components](../../components/button)) attribute set to `'true'` or `'false'` depending on expansion state so that screen reader users will know what state it's in
  - Be adjacent to the expanded/collapsed content
 

package/components/expand-collapse/demo/expand-collapse-content.html

@@ -43,7 +43,7 @@
 					button.addEventListener('click', () => {
 						const section = document.querySelector('d2l-expand-collapse-content');
 						section.expanded = !section.expanded;
-						button.setAttribute('aria-expanded', section.expanded ? 'true' : 'false');
+						button.setAttribute('expanded', section.expanded ? 'true' : 'false');
 					});
 				</script>
 			</template>

package/components/form/form-errory-summary.js

@@ -71,7 +71,7 @@ class FormErrorSummary extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				<div class="d2l-form-error-summary-header" @click=${this._toggleExpandCollapse}>
 					<div class="d2l-form-error-summary-text">${this.localize('components.form-error-summary.errorSummary', { count: this.errors.length })}</div>
 					<d2l-button-icon
-						aria-expanded=${this._expanded ? 'true' : 'false'}
+						expanded=${this._expanded ? 'true' : 'false'}
 						icon=${this._expanded ? 'tier1:arrow-collapse-small' : 'tier1:arrow-expand-small' }
 						text="${this.localize('components.form-error-summary.text')}"
 						@click=${this._toggleExpandCollapse}>

package/components/list/list-item-expand-collapse-mixin.js

@@ -131,7 +131,7 @@ export const ListItemExpandCollapseMixin = superclass => class extends SkeletonM
 			<d2l-button-icon
 				class="d2l-skeletize"
 				icon="${this.expanded ? 'tier1:arrow-collapse-small' : 'tier1:arrow-expand-small' }"
-				aria-expanded="${this.expanded ? 'true' : 'false'}"
+				expanded="${this.expanded ? 'true' : 'false'}"
 				text="${this.label}"
 				@click="${this._toggleExpandCollapse}"></d2l-button-icon>`;
 	}

package/components/more-less/more-less.js

@@ -152,7 +152,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 				class="d2l-more-less-toggle"
 				icon="${this.__computeIcon()}"
 				aria-controls="${this.__contentId}"
-				aria-expanded="${this.__computeAriaExpanded()}"
+				expanded="${this.__computeAriaExpanded()}"
 				@click="${this.__toggleOnClick}"
 				text="${this.__computeText()}"
 				h-align="${ifDefined(this.hAlign)}">

package/custom-elements.json

@@ -426,6 +426,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "expanded",
+          "description": "Wether the controlled element is expanded. Replaces 'aria-expanded'",
+          "type": "'true' | 'false'"
+        },
         {
           "name": "disabled-tooltip",
           "description": "Tooltip text when disabled",
@@ -470,12 +475,22 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "expanded",
+          "attribute": "expanded",
+          "description": "Wether the controlled element is expanded. Replaces 'aria-expanded'",
+          "type": "'true' | 'false'"
+        },
         {
           "name": "disabledTooltip",
           "attribute": "disabled-tooltip",
           "description": "Tooltip text when disabled",
           "type": "string"
         },
+        {
+          "name": "isButtonMixin",
+          "type": "boolean"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -641,6 +656,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "expanded",
+          "description": "Wether the controlled element is expanded. Replaces 'aria-expanded'",
+          "type": "'true' | 'false'"
+        },
         {
           "name": "disabled-tooltip",
           "description": "Tooltip text when disabled",
@@ -692,12 +712,22 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "expanded",
+          "attribute": "expanded",
+          "description": "Wether the controlled element is expanded. Replaces 'aria-expanded'",
+          "type": "'true' | 'false'"
+        },
         {
           "name": "disabledTooltip",
           "attribute": "disabled-tooltip",
           "description": "Tooltip text when disabled",
           "type": "string"
         },
+        {
+          "name": "isButtonMixin",
+          "type": "boolean"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -765,6 +795,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "expanded",
+          "description": "Wether the controlled element is expanded. Replaces 'aria-expanded'",
+          "type": "'true' | 'false'"
+        },
         {
           "name": "disabled-tooltip",
           "description": "Tooltip text when disabled",
@@ -791,12 +826,22 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "expanded",
+          "attribute": "expanded",
+          "description": "Wether the controlled element is expanded. Replaces 'aria-expanded'",
+          "type": "'true' | 'false'"
+        },
         {
           "name": "disabledTooltip",
           "attribute": "disabled-tooltip",
           "description": "Tooltip text when disabled",
           "type": "string"
         },
+        {
+          "name": "isButtonMixin",
+          "type": "boolean"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -2072,6 +2117,12 @@
           "description": "The optional title for the dialog",
           "type": "string"
         },
+        {
+          "name": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether or not the dialog is open",
@@ -2104,6 +2155,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "noContentScroll",
+          "attribute": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -2161,6 +2219,12 @@
           "description": "REQUIRED: the title for the dialog",
           "type": "string"
         },
+        {
+          "name": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether or not the dialog is open",
@@ -2210,6 +2274,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "noContentScroll",
+          "attribute": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -2283,6 +2354,12 @@
           "description": "REQUIRED: the title for the dialog",
           "type": "string"
         },
+        {
+          "name": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether or not the dialog is open",
@@ -2346,6 +2423,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "noContentScroll",
+          "attribute": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -11337,6 +11421,11 @@
           "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
           "type": "string"
         },
+        {
+          "name": "expanded",
+          "description": "Wether the controlled element is expanded. Replaces 'aria-expanded'",
+          "type": "'true' | 'false'"
+        },
         {
           "name": "disabled-tooltip",
           "description": "Tooltip text when disabled",
@@ -11385,12 +11474,22 @@
         {
           "name": "selectionInfo"
         },
+        {
+          "name": "expanded",
+          "attribute": "expanded",
+          "description": "Wether the controlled element is expanded. Replaces 'aria-expanded'",
+          "type": "'true' | 'false'"
+        },
         {
           "name": "disabledTooltip",
           "attribute": "disabled-tooltip",
           "description": "Tooltip text when disabled",
           "type": "string"
         },
+        {
+          "name": "isButtonMixin",
+          "type": "boolean"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",

package/package.json

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