@brightspace-ui/core 3.41.1 → 3.43.0

package/components/dialog/demo/dialog-confirm.html

@@ -22,7 +22,7 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-button id="openConfirm">Show Confirm</d2l-button>
-					<d2l-dialog-confirm id="confirm" text="Are you sure you want more cookies?">
+					<d2l-dialog-confirm id="confirm" title-text="Confirm Title" text="Are you sure you want more cookies?">
 						<d2l-button slot="footer" primary data-dialog-action="ok">Yes</d2l-button>
 						<d2l-button slot="footer" data-dialog-action>No</d2l-button>
 					</d2l-dialog-confirm>

package/components/dialog/demo/dialog.html

@@ -247,6 +247,32 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Dialog (overflowing content)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button id="openScrollFocus">Show Dialog</d2l-button>
+					<d2l-dialog title-text="My Dialog" id="dialogScrollFocus">
+						<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>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>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>
+						<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>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>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>
+						<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>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>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>
+						<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('#openScrollFocus').addEventListener('click', () => {
+							document.querySelector('#dialogScrollFocus').opened = true;
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/dialog/dialog-confirm.js

@@ -3,6 +3,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 
 /**
@@ -81,6 +82,7 @@ class DialogConfirm extends LocalizeCoreElement(DialogMixin(LitElement)) {
 	}
 
 	render() {
+		const contentTabIndex = !this.focusableContentElemPresent ? '0' : undefined;
 		const inner = html`
 			${this.critical ? html`<div id="${this._criticalLabelId}" hidden>${this.localize('components.dialog.critical')}</div>` : nothing}
 			<div class="d2l-dialog-inner">
@@ -88,7 +90,7 @@ class DialogConfirm extends LocalizeCoreElement(DialogMixin(LitElement)) {
 					<div class="d2l-dialog-header">
 						<div><h2 id="${this._titleId}" class="d2l-heading-3">${this.titleText}</h2></div>
 					</div>` : null}
-				<div id="${this._textId}" class="d2l-dialog-content">
+				<div id="${this._textId}" class="d2l-dialog-content" tabindex="${ifDefined(contentTabIndex)}">
 					<div>${this.text ? this.text.split('\n').map(line => html`<p>${line}</p>`) : null}</div>
 				</div>
 				<div class="d2l-dialog-footer">

package/components/dialog/dialog-fullscreen.js

@@ -7,6 +7,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -256,6 +257,8 @@ class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncCo
 			<div style=${styleMap(slotStyles)}><slot></slot></div>
 		`;
 
+		const contentTabIndex = !this.focusableContentElemPresent ? '0' : undefined;
+
 		const inner = html`
 			<div class="d2l-dialog-inner" style=${styleMap(heightOverride)}>
 				<div class="d2l-dialog-header">
@@ -264,7 +267,7 @@ class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncCo
 						<d2l-button-icon icon="${this._icon}" text="${this.localize('components.dialog.close')}" @click="${this._abort}"></d2l-button-icon>
 					</div>
 				</div>
-				<div class="d2l-dialog-content" @pending-state="${this._handleAsyncItemState}">${content}</div>
+				<div class="d2l-dialog-content" @pending-state="${this._handleAsyncItemState}" tabindex="${ifDefined(contentTabIndex)}">${content}</div>
 				<div class="${classMap(footerClasses)}">
 					<slot name="footer" @slotchange="${this._handleFooterSlotChange}"></slot>
 				</div>

package/components/dialog/dialog-mixin.js

@@ -33,6 +33,10 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 
 	static get properties() {
 		return {
+			/**
+			 * @ignore
+			 */
+			focusableContentElemPresent: { state: true },
 			/**
 			 * Whether or not the dialog is open
 			 */
@@ -64,6 +68,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 
 	constructor() {
 		super();
+		this.focusableContentElemPresent = false;
 		this.opened = false;
 		this._autoSize = true;
 		this._dialogId = getUniqueId();
@@ -71,6 +76,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		this._handleDropdownOpenClose = this._handleDropdownOpenClose.bind(this);
 		this._handleMvcDialogOpen = this._handleMvcDialogOpen.bind(this);
 		this._inIframe = false;
+		this._isDialogMixin = true;
 		this._isFullHeight = false;
 		this._height = 0;
 		this._left = 0;
@@ -219,6 +225,9 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		const content = this.shadowRoot.querySelector('.d2l-dialog-content');
 		if (content) {
 			const elementToFocus = this._findAutofocusElement(content) ?? getNextFocusable(content);
+			if (isComposedAncestor(this.shadowRoot.querySelector('.d2l-dialog-content'), elementToFocus)) {
+				this.focusableContentElemPresent = true;
+			}
 			if (isComposedAncestor(this.shadowRoot.querySelector('.d2l-dialog-inner'), elementToFocus)) {
 				this._focusElemOrDescendant(elementToFocus);
 				return;

package/components/dialog/dialog-styles.js

@@ -132,6 +132,12 @@ export const dialogStyles = css`
 		padding: 0 30px;
 	}
 
+	.d2l-dialog-content:focus-visible {
+		border-radius: 6px;
+		outline: 2px solid var(--d2l-color-celestine);
+		outline-offset: -2px;
+	}
+
 	.d2l-dialog-content > div {
 		position: relative; /* make this the positioned parent for absolute positioned elements like d2l-template-primary-secondary */
 	}

package/components/dialog/dialog.js

@@ -170,6 +170,7 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 			<div id="${ifDefined(this._textId)}" style=${styleMap(slotStyles)}><slot></slot></div>
 		`;
 
+		const contentTabIndex = !this.focusableContentElemPresent ? '0' : undefined;
 		const labelId = this.critical ? `${this._criticalLabelId} ${this._titleId}` : this._titleId;
 		const inner = html`
 			${this.critical ? html`<div id="${this._criticalLabelId}" hidden>${this.localize('components.dialog.critical')}</div>` : nothing}
@@ -180,7 +181,7 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 						<d2l-button-icon icon="tier1:close-small" text="${this.localize('components.dialog.close')}" @click="${this._abort}"></d2l-button-icon>
 					</div>
 				</div>
-				<div class="d2l-dialog-content" @pending-state="${this._handleAsyncItemState}">${content}</div>
+				<div class="d2l-dialog-content" @pending-state="${this._handleAsyncItemState}" tabindex="${ifDefined(contentTabIndex)}">${content}</div>
 				<div class="${classMap(footerClasses)}">
 					<slot name="footer" @slotchange="${this._handleFooterSlotChange}"></slot>
 				</div>

package/components/form/demo/form-demo.js

@@ -71,6 +71,7 @@ class FormNestedDemo extends LitElement {
 				</div>
 				<d2l-floating-buttons always-float>
 					<d2l-button primary @click=${this._submit}>Save</d2l-button>
+					<d2l-button @click=${this._reset}>Reset</d2l-button>
 				</d2l-floating-buttons>
 			</d2l-form>
 		`;
@@ -85,6 +86,10 @@ class FormNestedDemo extends LitElement {
 		e.preventDefault();
 	}
 
+	_reset() {
+		if (this.shadowRoot) this.shadowRoot.querySelector('#root').resetValidation();
+	}
+
 	_submit() {
 		if (this.shadowRoot) this.shadowRoot.querySelector('#root').submit();
 	}

package/components/form/docs/form-element-mixin.md

@@ -18,6 +18,7 @@ invalid state.
 | `name` | String | The name of the form control. Submitted with the form as part of a name/value pair. |
 
 **Methods:**
+- `resetValidation()`: Resets any validation errors on the form element. Note that this does not reset any form element value.
 - `setFormValue(value)`: Sets the current value of the form control. Submitted with the form as part of a name/value pair. `value` may be a:
 	1. An `Object`: `{ 'key1': val, 'key2': val }`
 		- When an `Object` is provided, all keys-value pairs will be submitted. To avoid collision it is recommended that you prefix each key with the component's `name` property value.

package/components/form/docs/form.md

@@ -114,6 +114,7 @@ If you're looking to emulate native form element submission, `d2l-form-native` m
 ### Methods
 - `submit()`: Submits the form. This will first perform validation on all elements within the form including nested `d2l-form` elements.
   - **Note:** If validation succeeds, the form data will be aggregated and passed back to the caller via the `d2l-form-submit` event. It will not be submitted by the form itself.
+- `resetValidation()`: Resets the validation errors. Note that this does not reset any form values. Daylight dialog components (e.g., `d2l-dialog`) will automatically run this method on close.
 - `async validate()`: Validates the form and any nested `d2l-form` elements without submitting even if validation succeeds for all elements. Returns a `Map` mapping from an element to the list of error messages associated with it.
   - **Note:** The return value will include elements and errors from both the root form and any nested descendant forms.
 

package/components/form/form-element-mixin.js

@@ -227,6 +227,18 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 		await this.updatedComplete;
 	}
 
+	resetValidation() {
+		this.invalid = false;
+		this.validationError = null;
+		this._errors = [];
+
+		this.childErrors.forEach((_, ele) => {
+			if (!isCustomFormElement(ele)) return;
+			ele.resetValidation();
+		});
+		this.childErrors = new Map();
+	}
+
 	setFormValue(formValue) {
 		this.formValue = formValue;
 	}

package/components/form/form.js

@@ -1,5 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { findFormElements, flattenMap, getFormElementData, isCustomFormElement, isNativeFormElement } from './form-helper.js';
+import { findComposedAncestor } from '../../helpers/dom.js';
 import { FormMixin } from './form-mixin.js';
 
 /**
@@ -55,6 +56,12 @@ class Form extends FormMixin(LitElement) {
 		this._isSubForm = false;
 	}
 
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		this._setupDialogValidationReset();
+	}
+
 	render() {
 		let errorSummary = null;
 		if (this._isRootForm()) {
@@ -77,6 +84,26 @@ class Form extends FormMixin(LitElement) {
 		this._submitData(submitter);
 	}
 
+	resetValidation() {
+		const formElements = this._findFormElements();
+		for (const ele of formElements) {
+			if (this._hasSubForms(ele)) {
+				const forms = this._getSubForms(ele);
+				for (const form of forms) {
+					form.resetValidation();
+				}
+			} else {
+				if (isCustomFormElement(ele)) {
+					ele.resetValidation();
+				} else if (isNativeFormElement(ele)) {
+					this._displayValid(ele);
+				}
+			}
+		}
+		this._errors = new Map();
+		this._tooltips = new Map();
+	}
+
 	async submit() {
 		return this.requestSubmit(null);
 	}
@@ -165,6 +192,21 @@ class Form extends FormMixin(LitElement) {
 
 	}
 
+	_setupDialogValidationReset() {
+		const flag = window.D2L?.LP?.Web?.UI?.Flags.Flag('GAUD-6979-dialog-close-reset-validation', true) ?? true;
+		if (!flag) return;
+
+		const dialogAncestor = findComposedAncestor(
+			this,
+			node => node?._isDialogMixin
+		);
+		if (!dialogAncestor) return;
+
+		dialogAncestor.addEventListener('d2l-dialog-close', () => {
+			this.resetValidation();
+		});
+	}
+
 	async _submitData(submitter) {
 		this._dirty = false;
 

package/custom-elements.json

@@ -2008,6 +2008,11 @@
           "description": "The optional title for the dialog",
           "type": "string"
         },
+        {
+          "name": "focusableContentElemPresent",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -2109,6 +2114,11 @@
           "description": "REQUIRED: the title for the dialog",
           "type": "string"
         },
+        {
+          "name": "focusableContentElemPresent",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -2240,6 +2250,11 @@
           "description": "REQUIRED: the title for the dialog",
           "type": "string"
         },
+        {
+          "name": "focusableContentElemPresent",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",

package/package.json

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