@brightspace-ui/core 2.59.2 → 2.59.4

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

@@ -155,7 +155,7 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 		return this.localize('components.form-element.defaultError', { label });
 	}
 
-	/** @ignore */
+	/** @ignore Note: this may be our custom FormElementValidityState or native ValidityState depending on the source. */
 	get validity() {
 		return this._validity;
 	}

package/components/inputs/input-number.js

@@ -306,6 +306,15 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 		return super.validationMessage;
 	}
 
+	/** @ignore */
+	get validity() {
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-input-text');
+		if (elem && !elem.validity.valid) {
+			return elem.validity;
+		}
+		return super.validity;
+	}
+
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		this.addEventListener('d2l-localize-resources-change', () => {
@@ -331,6 +340,7 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 				?hide-invalid-icon="${this.hideInvalidIcon}"
 				id="${this._inputId}"
 				input-width="${this.inputWidth}"
+				@invalid-change="${this._handleInvalidChange}"
 				label="${ifDefined(this.label)}"
 				?label-hidden="${this.labelHidden || this.labelledBy}"
 				.labelRequired="${false}"
@@ -352,27 +362,35 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 	updated(changedProperties) {
 		super.updated(changedProperties);
 
+		let checkValidity = false;
 		changedProperties.forEach((oldVal, prop) => {
 			if (prop === 'value') {
 				this.setFormValue(this.value);
-
-				let rangeUnderflowCondition = false;
-				if (typeof(this.min) === 'number') {
-					rangeUnderflowCondition = this.minExclusive ? this.value <= this.min : this.value < this.min;
-				}
-
-				let rangeOverflowCondition = false;
-				if (typeof(this.max) === 'number') {
-					rangeOverflowCondition = this.maxExclusive ? this.value >= this.max : this.value > this.max;
-				}
-
-				this.setValidity({
-					rangeUnderflow: rangeUnderflowCondition,
-					rangeOverflow: rangeOverflowCondition
-				});
-				this.requestValidate(true);
+				checkValidity = true;
+			} else if ((prop === 'min' && oldVal !== undefined)
+				|| (prop === 'max' && oldVal !== undefined)
+				|| (prop === 'minExclusive' && oldVal !== undefined)
+				|| (prop === 'maxExclusive' && oldVal !== undefined)) {
+				checkValidity = true;
 			}
 		});
+
+		if (checkValidity) {
+			let rangeUnderflowCondition = false;
+			if (typeof(this.min) === 'number') {
+				rangeUnderflowCondition = this.minExclusive ? this.value <= this.min : this.value < this.min;
+			}
+			let rangeOverflowCondition = false;
+			if (typeof(this.max) === 'number') {
+				rangeOverflowCondition = this.maxExclusive ? this.value >= this.max : this.value > this.max;
+			}
+
+			this.setValidity({
+				rangeUnderflow: rangeUnderflowCondition,
+				rangeOverflow: rangeOverflowCondition
+			});
+			this.requestValidate(true);
+		}
 	}
 
 	async validate() {
@@ -456,6 +474,10 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 		}
 	}
 
+	_handleInvalidChange() {
+		this.requestValidate(true);
+	}
+
 	_handleKeyPress(e) {
 		// NOTE: keypress event is deprecated, but keydown fires for ALL keys (including Shift/Tab/etc.)
 		// which makes it hard to selectively supress "not numbers". The "beforeinput" event is

package/components/inputs/input-text.js

@@ -307,7 +307,7 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
 	/** @ignore */
 	get validity() {
 		const elem = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input');
-		if (!elem.validity.valid) {
+		if (elem && !elem.validity.valid) {
 			return elem.validity;
 		}
 		return super.validity;

package/components/table/README.md

@@ -18,6 +18,7 @@ Tables are used to display tabular data in rows and columns. They can allow user
   * There are more than just a few dimensions
   * The dimensions need to be sortable
   * The dimensions need to be easily compared across rows (ie- scannable)
+* Specify [column and row headings](https://www.w3.org/WAI/tutorials/tables/) so data is meaningful to screen reader users
 <!-- docs: end dos -->
 
 <!-- docs: start donts -->

package/package.json

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