Update Input Checkbox docn

components/inputs/docs/input-checkbox.md

@@ -54,9 +54,9 @@ 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 | Use when text in `Default` slot in checkbox does not provide enough context |
 | `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 |
@@ -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,11 @@ 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 instead of the `Enter` key
+- The `aria-checked` state is set to `true`, `false` or `mixed` to represent if it's selected, unselected, or partially selected.

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: Use when text in `Default` slot in checkbox does not provide enough context
 			 * @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 },