@brightspace-ui/core 3.42.0 → 3.44.0

package/components/dialog/dialog-mixin.js

@@ -76,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;

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/components/inputs/docs/input-checkbox.md

@@ -54,13 +54,13 @@ The `<d2l-input-checkbox>` element can be used to get a checkbox and optional vi
 
 | Property | Type | Description |
 |---|---|---|
-| `aria-label` | String | Set instead of placing label inside to hide the visible label |
+| `aria-label` | String | Overrides the text in the `Default` slot for screenreader users |
 | `checked` | Boolean | Checked state |
-| `description` | String | A description to be added to the `input` for accessibility |
+| `description` | String | Additional information communicated to screenreader users when focusing on the input |
 | `disabled` | Boolean | Disables the input |
 | `indeterminate` | Boolean | Sets checkbox to an indeterminate state |
 | `name` | String | Name of the input |
-| `not-tabbable` | Boolean | Sets `tabindex="-1"` on the checkbox |
+| `not-tabbable` | Boolean | Sets `tabindex="-1"` on the checkbox. Note that an alternative method of focusing is necessary to implement if using this property. |
 | `value` | String | Value of the input |
 
 ### Events
@@ -75,18 +75,10 @@ checkbox.addEventListener('change', (e) => {
 
 ### Slots
 
+* `default`: Primary text that will appear next to the input box and function as the label for the checkbox.
 * `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
 
-### Accessibility Properties
-
-To make your usage of `d2l-input-checkbox` accessible, use the following properties when applicable:
-
-| Attribute | Description |
-|---|---|
-| `aria-label` | Use when text on checkbox does not provide enough context |
-| `description` | Use when label on input does not provide enough context. |
-
 ### Methods
 
 - `simulateClick()`: useful for testing, it simulates the user clicking on the checkbox, which toggles the state of the checkbox and fires the `change` event
@@ -135,3 +127,9 @@ As an alternative to using the `<d2l-input-checkbox>` custom element, you can st
 </script>
 <d2l-my-checkbox-elem></d2l-my-checkbox-elem>
 ```
+
+## Accessibility
+
+The `d2l-input-checkbox` component follows W3C's best practice recommendations for a [checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/). This means that the component works in the following way:
+- The `Space` key is used to select a focused checkbox (not the `Enter` key)
+- The `aria-checked` state is set to `true`, `false` or `mixed` to represent if it's selected, unselected, or partially selected

package/components/inputs/input-checkbox.js

@@ -69,7 +69,7 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(RtlMix
 	static get properties() {
 		return {
 			/**
-			 * Use when text on checkbox does not provide enough context
+			 * ACCESSIBILITY: Overrides the text in the `Default` slot for screenreader users
 			 * @type {string}
 			 */
 			ariaLabel: { type: String, attribute: 'aria-label' },
@@ -79,7 +79,7 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(RtlMix
 			 */
 			checked: { type: Boolean },
 			/**
-			 * Additional information communicated in the aria-describedby on the input
+			 * ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input
 			 * @type {string}
 			 */
 			description: { type: String },
@@ -99,7 +99,7 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(RtlMix
 			 */
 			name: { type: String },
 			/**
-			 * Sets "tabindex="-1"" on the checkbox
+			 * ACCESSIBILITY: ADVANCED: Sets "tabindex="-1"" on the checkbox. Note that an alternative method of focusing is necessary to implement if using this property.
 			 * @type {boolean}
 			 */
 			notTabbable: { type: Boolean, attribute: 'not-tabbable' },

package/custom-elements.json

@@ -4934,12 +4934,12 @@
       "attributes": [
         {
           "name": "aria-label",
-          "description": "Use when text on checkbox does not provide enough context",
+          "description": "ACCESSIBILITY: Overrides the text in the `Default` slot for screenreader users",
           "type": "string"
         },
         {
           "name": "description",
-          "description": "Additional information communicated in the aria-describedby on the input",
+          "description": "ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input",
           "type": "string"
         },
         {
@@ -4968,7 +4968,7 @@
         },
         {
           "name": "not-tabbable",
-          "description": "Sets \"tabindex=\"-1\"\" on the checkbox",
+          "description": "ACCESSIBILITY: ADVANCED: Sets \"tabindex=\"-1\"\" on the checkbox. Note that an alternative method of focusing is necessary to implement if using this property.",
           "type": "boolean",
           "default": "false"
         },
@@ -4988,13 +4988,13 @@
         {
           "name": "ariaLabel",
           "attribute": "aria-label",
-          "description": "Use when text on checkbox does not provide enough context",
+          "description": "ACCESSIBILITY: Overrides the text in the `Default` slot for screenreader users",
           "type": "string"
         },
         {
           "name": "description",
           "attribute": "description",
-          "description": "Additional information communicated in the aria-describedby on the input",
+          "description": "ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input",
           "type": "string"
         },
         {
@@ -5028,7 +5028,7 @@
         {
           "name": "notTabbable",
           "attribute": "not-tabbable",
-          "description": "Sets \"tabindex=\"-1\"\" on the checkbox",
+          "description": "ACCESSIBILITY: ADVANCED: Sets \"tabindex=\"-1\"\" on the checkbox. Note that an alternative method of focusing is necessary to implement if using this property.",
           "type": "boolean",
           "default": "false"
         },

package/package.json

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