@brightspace-ui/core 3.43.0 → 3.44.0

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.43.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",