@brightspace-ui/core 2.57.0 → 2.59.0

package/components/inputs/docs/input-search.md

@@ -56,6 +56,7 @@ For text searches use `<d2l-input-search>`, which wraps the native `<input type=
 | Property | Type | Description |
 |---|---|---|
 | `label` | String, required | Accessible label for the input |
+| `description` | String | Additional information communicated in the `aria-describedby` on the input |
 | `disabled` | Boolean | Disables the input |
 | `maxlength` | Number | Imposes an upper character limit |
 | `no-clear` | Boolean | Prevents the "clear" button from appearing |
@@ -82,4 +83,5 @@ To make your usage of `d2l-input-search` accessible, use the following property
 
 | Attribute | Description |
 |---|---|
+| `description` | Use when label on input does not provide enough context. |
 | label | **REQUIRED** [Acts as a primary label on the input](https://www.w3.org/WAI/tutorials/forms/labels/). Not visible. |

package/components/inputs/input-search.js

@@ -16,6 +16,11 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 
 	static get properties() {
 		return {
+			/**
+			 * Additional information communicated in the aria-describedby on the input
+			 * @type {string}
+			 */
+			description: { type: String, reflect: true },
 			/**
 			 * Disables the input
 			 * @type {boolean}
@@ -115,6 +120,7 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 			<d2l-input-text
 				label="${ifDefined(this.label)}"
 				label-hidden
+				description="${this.description}"
 				?disabled="${this.disabled}"
 				@input="${this._handleInput}"
 				@keypress="${this._handleInputKeyPress}"

package/components/selection/selection-observer-mixin.js

@@ -28,9 +28,14 @@ export const SelectionObserverMixin = superclass => class extends superclass {
 
 	connectedCallback() {
 		super.connectedCallback();
+		this.addEventListener('d2l-selection-observer-subscribe', this._handleSelectionObserverSubscribe);
+
 		// delay subscription otherwise import/upgrade order can cause selection mixin to miss event
 		requestAnimationFrame(() => {
-			if (this.selectionFor) return;
+			if (this.selectionFor) {
+				this._handleSelectionFor();
+				return this._provider?.subscribeObserver(this);
+			}
 
 			const evt = new CustomEvent('d2l-selection-observer-subscribe', {
 				bubbles: true,
@@ -44,34 +49,57 @@ export const SelectionObserverMixin = superclass => class extends superclass {
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		if (this._selectionForObserver) this._selectionForObserver.disconnect();
-		if (this._provider) this._provider.unsubscribeObserver(this);
+		this._disconnectSelectionForObserver();
+		this._disconnectProvider();
+		this.removeEventListener('d2l-selection-observer-subscribe', this._handleSelectionObserverSubscribe);
 	}
 
 	updated(changedProperties) {
 		super.updated(changedProperties);
 
-		if (!changedProperties.has('selectionFor')) return;
+		if (changedProperties.has('selectionFor')) this._handleSelectionFor();
+	}
+
+	_disconnectProvider() {
+		if (!this._provider) return;
+		this._provider.unsubscribeObserver(this);
+		this._provider = undefined;
+	}
 
-		if (this._selectionForObserver) this._selectionForObserver.disconnect();
-		if (this._provider) this._provider.unsubscribeObserver(this);
+	_disconnectSelectionForObserver() {
+		if (!this._selectionForObserver) return;
+		this._selectionForObserver.disconnect();
+		this._selectionForObserver = undefined;
+	}
 
+	_handleSelectionFor() {
+		this._disconnectSelectionForObserver();
 		this._updateProvider();
 
-		this._selectionForObserver = new MutationObserver(() => {
-			this._updateProvider();
-		});
+		if (this.selectionFor) {
+			this._selectionForObserver = new MutationObserver(() => this._updateProvider());
 
-		this._selectionForObserver.observe(this.getRootNode(), {
-			childList: true,
-			subtree: true
-		});
+			this._selectionForObserver.observe(this.getRootNode(), {
+				childList: true,
+				subtree: true
+			});
+		}
+	}
+
+	_handleSelectionObserverSubscribe(e) {
+		if (e.target !== this && this._provider) {
+			e.stopPropagation();
+			e.detail.provider = this._provider;
+			const target = e.composedPath()[0];
+			this._provider.subscribeObserver(target);
+		}
 	}
 
 	_updateProvider() {
-		const selectionComponent = this.getRootNode().querySelector(`#${cssEscape(this.selectionFor)}`);
+		const selectionComponent = this.selectionFor ? this.getRootNode().querySelector(`#${cssEscape(this.selectionFor)}`) : undefined;
 		if (this._provider === selectionComponent) return;
 
+		this._disconnectProvider();
 		this._provider = selectionComponent;
 		if (this._provider) {
 			this._provider.subscribeObserver(this);

package/custom-elements.json

@@ -5797,6 +5797,11 @@
       "path": "./components/inputs/input-search.js",
       "description": "This component wraps the native \"<input type=\"search\">\"\" element and is for text searching.",
       "attributes": [
+        {
+          "name": "description",
+          "description": "Additional information communicated in the aria-describedby on the input",
+          "type": "string"
+        },
         {
           "name": "label",
           "description": "REQUIRED: Accessible label for the input",
@@ -5832,6 +5837,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "Additional information communicated in the aria-describedby on the input",
+          "type": "string"
+        },
         {
           "name": "label",
           "attribute": "label",
@@ -9990,6 +10001,37 @@
         }
       ]
     },
+    {
+      "name": "d2l-test-selection-observer",
+      "path": "./components/selection/test/selection-component.js",
+      "attributes": [
+        {
+          "name": "selection-for",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "selectionFor",
+          "attribute": "selection-for",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
+        {
+          "name": "selectionInfo"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-selection-observer-subscribe"
+        }
+      ]
+    },
+    {
+      "name": "d2l-test-selection-observer-shadow",
+      "path": "./components/selection/test/selection-component.js"
+    },
     {
       "name": "d2l-test-skeleton-box",
       "path": "./components/skeleton/demo/skeleton-test-box.js",

package/package.json

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