@brightspace-ui/core 3.106.3 → 3.107.0

package/components/collapsible-panel/README.md

@@ -258,7 +258,7 @@ class CollapsiblePanelDaylightDemo extends LitElement {
 
 				<p class="d2l-label-text">Add-ons</p>
 				${this._addons.map((item) => (
-					html`<d2l-input-checkbox id="${item.id}" @change="${this._onChangeCheckbox}">${item.text}</d2l-input-checkbox>`
+					html`<d2l-input-checkbox id="${item.id}" @change="${this._onChangeCheckbox}" label="${item.text}"></d2l-input-checkbox>`
 				))}
 			</d2l-collapsible-panel>
 		`;

package/components/dialog/demo/dialog.html

@@ -303,7 +303,7 @@
 				<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>
+						<d2l-input-checkbox id="noScroll" label="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>

package/components/focus-trap/demo/focus-trap.html

@@ -34,7 +34,7 @@
 					<d2l-link href="http://www.d2l.com">Before Trap</d2l-link>
 					<d2l-focus-trap trap>
 						<d2l-link href="http://www.d2l.com">Inside Trap</d2l-link>
-						<d2l-input-checkbox checked>Trapping</d2l-input-checkbox>
+						<d2l-input-checkbox checked label="Trapping"></d2l-input-checkbox>
 						Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway.
 						<d2l-link href="http://www.d2l.com">Inside Trap</d2l-link>
 					</d2l-focus-trap>
@@ -49,7 +49,7 @@
 					<d2l-link href="http://www.d2l.com">Before Trap</d2l-link>
 					<d2l-focus-trap id="custom">
 						<d2l-link href="http://www.d2l.com">Inside Trap</d2l-link>
-						<d2l-input-checkbox>Trapping</d2l-input-checkbox>
+						<d2l-input-checkbox label="Trapping"></d2l-input-checkbox>
 						Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway.
 						<d2l-link href="http://www.d2l.com">Inside Trap</d2l-link>
 					</d2l-focus-trap>

package/components/inputs/demo/input-checkbox.html

@@ -16,56 +16,50 @@
 			<h2>Simple checkbox with label</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-checkbox checked>Checked item</d2l-input-checkbox>
-					<d2l-input-checkbox>Unchecked item</d2l-input-checkbox>
+					<d2l-input-checkbox label="Checked item" checked></d2l-input-checkbox>
+					<d2l-input-checkbox label="Unchecked item"></d2l-input-checkbox>
 				</template>
 			</d2l-demo-snippet>
 
 			<h2>Checkbox with multi-line label</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-checkbox style="overflow: hidden; width: 200px;">
-						Label for checkbox that wraps nicely onto
-						multiple lines and stays aligned
-					</d2l-input-checkbox>
-					<d2l-input-checkbox style="overflow: hidden; width: 200px;">
-						https://en.wikipedia.org/wiki/Dark_matter
-					</d2l-input-checkbox>
+					<d2l-input-checkbox style="overflow: hidden; width: 200px;" label="Label for checkbox that wraps nicely onto multiple lines and stays aligned"></d2l-input-checkbox>
+					<d2l-input-checkbox style="overflow: hidden; width: 200px;" label="https://en.wikipedia.org/wiki/Dark_matter"></d2l-input-checkbox>
 				</template>
 			</d2l-demo-snippet>
 
 			<h2>Checkbox with hidden label</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-checkbox aria-label="Label for checkbox"></d2l-input-checkbox>
+					<d2l-input-checkbox label="Label for checkbox" label-hidden></d2l-input-checkbox>
 				</template>
 			</d2l-demo-snippet>
 
 			<h2>Disabled checkbox</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-checkbox checked disabled>Disabled checkbox</d2l-input-checkbox>
+					<d2l-input-checkbox label="Disabled checkbox" checked disabled></d2l-input-checkbox>
 				</template>
 			</d2l-demo-snippet>
 
 			<h2>Disabled checkbox with tooltip</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-checkbox checked disabled disabled-tooltip="Explanation for why checkbox is disabled">Disabled checkbox with tooltip</d2l-input-checkbox>
+					<d2l-input-checkbox label="Disabled checkbox with tooltip" checked disabled disabled-tooltip="Explanation for why checkbox is disabled"></d2l-input-checkbox>
 				</template>
 			</d2l-demo-snippet>
 
 			<h2>Checkbox with label and supporting content</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-checkbox>
-						Label for checkbox
+					<d2l-input-checkbox label="Label for checkbox">
 						<div slot="supporting" style="color: #999999;">
 							Additional content can go here and will<br>
 							also line up nicely with the checkbox.
 						</div>
 					</d2l-input-checkbox>
-					<d2l-input-checkbox>Label for checkbox</d2l-input-checkbox>
+					<d2l-input-checkbox label="Label for checkbox"></d2l-input-checkbox>
 					<d2l-input-checkbox-spacer style="color: #999999;">
 						Additional content can go here and will<br>
 						also line up nicely with the checkbox.
@@ -76,15 +70,14 @@
 			<h2>Indeterminate checkbox</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-checkbox indeterminate>Indeterminate checkbox</d2l-input-checkbox>
+					<d2l-input-checkbox label="Indeterminate checkbox" indeterminate></d2l-input-checkbox>
 				</template>
 			</d2l-demo-snippet>
 
 			<h2>Inline help checkbox</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-checkbox>
-						Inline help checkbox
+					<d2l-input-checkbox label="Inline help checkbox">
 						<div slot="inline-help">
 							Help text <b>right here</b>!
 						</div>
@@ -95,8 +88,7 @@
 			<h2>Inline help (multiline) checkbox</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-checkbox>
-						Inline help checkbox
+					<d2l-input-checkbox label="Inline help checkbox">
 						<div slot="inline-help">
 							Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 							sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

@@ -7,7 +7,7 @@ Checkboxes are used in forms to toggle an option or preference.
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-checkbox.js';
 </script>
-<d2l-input-checkbox checked>Label for checkbox</d2l-input-checkbox>
+<d2l-input-checkbox label="Label for checkbox" checked></d2l-input-checkbox>
 ```
 
 ## Best Practices
@@ -44,8 +44,8 @@ The `<d2l-input-checkbox>` element can be used to get a checkbox and optional vi
   });
 </script>
 <div>
-  <d2l-input-checkbox id="checkbox">Label for checkbox</d2l-input-checkbox>
-  <d2l-input-checkbox>Label for second checkbox</d2l-input-checkbox>
+  <d2l-input-checkbox id="checkbox" label="Label for checkbox"></d2l-input-checkbox>
+  <d2l-input-checkbox label="Label for second checkbox"></d2l-input-checkbox>
 </div>
 ```
 
@@ -54,11 +54,12 @@ The `<d2l-input-checkbox>` element can be used to get a checkbox and optional vi
 
 | Property | Type | Description |
 |---|---|---|
-| `aria-label` | String | Overrides the text in the `Default` slot for screenreader users |
 | `checked` | Boolean | Checked state |
 | `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 |
+| `label` | String, required | Label for the input |
+| `label-hidden` | Boolean | Hides the label visually (moves it to the input's `aria-label` attribute) |
 | `name` | String | Name of the input |
 | `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 |
@@ -75,15 +76,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.
 * `supporting`: Supporting information which will appear below and be aligned with the checkbox.
 <!-- docs: end hidden content -->
 
-### 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
-
 ## Checkbox Spacer [d2l-input-checkbox-spacer]
 
 > [!NOTE]  

package/components/inputs/input-checkbox.js

@@ -61,7 +61,6 @@ export const checkboxStyles = css`
 
 /**
  * A component that can be used to show a checkbox and optional visible label.
- * @slot - Checkbox information (e.g., text)
  * @slot 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.
  * @slot supporting - Supporting information which will appear below and be aligned with the checkbox.
  * @fires change - Dispatched when the checkbox's state changes
@@ -71,8 +70,7 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 	static get properties() {
 		return {
 			/**
-			 * ACCESSIBILITY: Overrides the text in the `Default` slot for screenreader users
-			 * @type {string}
+			 * @ignore
 			 */
 			ariaLabel: { type: String, attribute: 'aria-label' },
 			/**
@@ -100,6 +98,16 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 			 * @type {boolean}
 			 */
 			indeterminate: { type: Boolean },
+			/**
+			 * REQUIRED: Label for the input
+			 * @type {string}
+			 */
+			label: { type: String },
+			/**
+			 * Hides the label visually
+			 * @type {boolean}
+			 */
+			labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean },
 			/**
 			 * Name of the input
 			 * @type {string}
@@ -130,7 +138,7 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 				:host([hidden]) {
 					display: none;
 				}
-				:host([aria-label]) {
+				:host([label-hidden]) {
 					display: inline-block;
 					margin-bottom: 0;
 				}
@@ -151,7 +159,7 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 					vertical-align: top;
 					white-space: normal;
 				}
-				:host([aria-label]) .d2l-input-checkbox-text {
+				:host([label-hidden]) .d2l-input-checkbox-text {
 					margin-inline-start: 0;
 				}
 				:host([skeleton]) .d2l-input-checkbox-text.d2l-skeletize::before {
@@ -187,6 +195,8 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 		this.checked = false;
 		this.disabled = false;
 		this.indeterminate = false;
+		this.label = '';
+		this.labelHidden = false;
 		this.name = '';
 		this.notTabbable = false;
 		this.value = 'on';
@@ -210,6 +220,8 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 			'd2l-input-checkbox-text-disabled': this.disabled
 		};
 		const ariaChecked = this.indeterminate ? 'mixed' : undefined;
+		const ariaLabel = (this.label && this.labelHidden) ? this.label : undefined;
+		const label = (this.label && !this.labelHidden) ? this.label : nothing;
 		const disabled = this.disabled || this.skeleton;
 		const offscreenContainer = this.description ? html`<div class="d2l-offscreen" id="${this.#descriptionId}">${this.description}</div>` : null;
 		const ariaDescribedByIds = `${this.description ? this.#descriptionId : ''} ${this._hasInlineHelp ? this.#inlineHelpId : ''}`.trim();
@@ -222,7 +234,7 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 					aria-checked="${ifDefined(ariaChecked)}"
 					aria-describedby="${ifDefined(ariaDescribedByIds.length > 0 ? ariaDescribedByIds : undefined)}"
 					aria-disabled="${ifDefined(disabled && this.disabledTooltip ? 'true' : undefined)}"
-					aria-label="${ifDefined(this.ariaLabel)}"
+					aria-label="${ifDefined(ariaLabel)}"
 					@change="${this.#handleChange}"
 					class="d2l-input-checkbox"
 					@click="${this.#handleClick}"
@@ -233,15 +245,23 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 					name="${ifDefined(this.name)}"
 					tabindex="${ifDefined(tabindex)}"
 					type="checkbox"
-					.value="${this.value}"></span><span class="${classMap(textClasses)}"><slot></slot></span>
+					.value="${this.value}"></span><span class="${classMap(textClasses)}">${label}<slot></slot></span>
 			</label>
 			${this._renderInlineHelp(this.#inlineHelpId)}
 			${offscreenContainer}
 			${disabledTooltip}
-			<div class="${classMap(supportingClasses)}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
+			<div class="${classMap(supportingClasses)}" @change="${this.#handleSupportingChange}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
 		`;
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('ariaLabel') && this.ariaLabel !== undefined) {
+			this.label = this.ariaLabel;
+			this.labelHidden = true;
+		}
+	}
+
 	simulateClick() {
 		this.checked = !this.checked;
 		this.indeterminate = false;
@@ -276,6 +296,10 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 		this._isHovered = false;
 	}
 
+	#handleSupportingChange(e) {
+		e.stopPropagation();
+	}
+
 	#handleSupportingSlotChange(e) {
 		const content = e.target.assignedNodes({ flatten: true });
 		this._hasSupporting = content?.length > 0;

package/components/selection/selection-input.js

@@ -114,7 +114,8 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 		} else {
 			return html`
 				<d2l-input-checkbox
-					aria-label="${this.label}"
+					label="${this.label}"
+					label-hidden
 					@change="${this._handleCheckboxChange}"
 					?checked="${this.selected}"
 					class="${ifDefined(this.hovering ? 'd2l-hovering' : undefined)}"

package/components/selection/selection-select-all.js

@@ -51,7 +51,8 @@ class SelectAll extends FocusMixin(LocalizeCoreElement(SelectionObserverMixin(Li
 
 		return html`
 			<d2l-input-checkbox
-				aria-label="${this.localize('components.selection.select-all')}"
+				label="${this.localize('components.selection.select-all')}"
+				label-hidden
 				@change="${this.#handleCheckboxChange}"
 				?checked="${this.#getIsChecked()}"
 				?disabled="${this.disabled}"

package/components/skeleton/README.md

@@ -89,7 +89,7 @@ render() {
     <div class="d2l-skeletize-container">
       <div class="d2l-skeletize">This text will skeletize</div>
       <span>This text will hide</span>
-      <d2l-input-checkbox ?skeleton="{this.skeleton}">This input will skeletize</d2l-input-checkbox>
+      <d2l-input-checkbox ?skeleton="{this.skeleton}" label="This input will skeletize"></d2l-input-checkbox>
     </div>
   `;
 }

package/components/skeleton/demo/skeleton-test-container.js

@@ -36,7 +36,7 @@ export class SkeletonTestContainer extends SkeletonGroupMixin(LitElement) {
 			<div class="d2l-demo-box d2l-skeletize-container">
 				<div class="d2l-skeletize">Container with Skeletons Inside</div>
 				<span class="d2l-body-compact">No skeleton</span>
-				<d2l-input-checkbox checked>Skeleton</d2l-input-checkbox>
+				<d2l-input-checkbox checked label="Skeleton"></d2l-input-checkbox>
 			</div>
 		`;
 	}

package/custom-elements.json

@@ -5129,11 +5129,6 @@
       "path": "./components/inputs/input-checkbox.js",
       "description": "A component that can be used to show a checkbox and optional visible label.",
       "attributes": [
-        {
-          "name": "aria-label",
-          "description": "ACCESSIBILITY: Overrides the text in the `Default` slot for screenreader users",
-          "type": "string"
-        },
         {
           "name": "description",
           "description": "ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input",
@@ -5162,6 +5157,18 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "label",
+          "description": "REQUIRED: Label for the input",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "label-hidden",
+          "description": "Hides the label visually",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "name",
           "description": "Name of the input",
@@ -5187,12 +5194,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "ariaLabel",
-          "attribute": "aria-label",
-          "description": "ACCESSIBILITY: Overrides the text in the `Default` slot for screenreader users",
-          "type": "string"
-        },
         {
           "name": "description",
           "attribute": "description",
@@ -5226,6 +5227,20 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "REQUIRED: Label for the input",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "labelHidden",
+          "attribute": "label-hidden",
+          "description": "Hides the label visually",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "name",
           "attribute": "name",
@@ -5261,10 +5276,6 @@
         }
       ],
       "slots": [
-        {
-          "name": "",
-          "description": "Checkbox information (e.g., text)"
-        },
         {
           "name": "inline-help",
           "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."

package/directives/animate/demo/animate-test.js

@@ -63,7 +63,7 @@ export class AnimateTest extends LitElement {
 				</d2l-list-item>` : null;
 		});
 		return html`
-			<d2l-input-checkbox .checked="${this._listVisibility}" @change="${this._handleToggleList}">Show items</d2l-input-checkbox>
+			<d2l-input-checkbox .checked="${this._listVisibility}" @change="${this._handleToggleList}" label="Show items"></d2l-input-checkbox>
 			<d2l-list .animate="${animateAction}">${items}</d2l-list>
 			<d2l-button @click="${this._handleAddItem}" ?disabled="${!this._listVisibility}">Add Item</d2l-button>
 			<d2l-button @click="${this._handleReRender}">Re-render (${this._renderCount})</d2l-button>

package/mixins/labelled/demo/labelled-mixin.html

@@ -22,7 +22,7 @@
 				}
 				render() {
 					return html`
-						<d2l-input-checkbox aria-label="${ifDefined(this.label)}"></d2l-input-checkbox>
+						<d2l-input-checkbox label="${ifDefined(this.label)}" label-hidden></d2l-input-checkbox>
 					`;
 				}
 			}

package/package.json

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