@brightspace-ui/core 3.50.1 → 3.51.0

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

@@ -41,12 +41,12 @@ The `<d2l-input-number>` element is similar to `<d2l-input-text>`, except it's i
 
 | Property | Type | Description |
 |---|---|---|
-| `label` | String, required | Label for the input. |
+| `label` | String, required | Explicitly defined label for the element. |
 | `autocomplete` | String | Specifies which types of values [can be autofilled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) by the browser. |
 | `autofocus` | Boolean, default: `false` | When set, will automatically place focus on the input. |
 | `disabled` | Boolean, default: `false` | Disables the input. |
 | `input-width` | String, default: `4rem` | Restricts the maximum width of the input box without impacting the width of the label. |
-| `label-hidden` | Boolean, default: `false` | Hides the label visually (moves it to the input's `aria-label` attribute). |
+| `label-hidden` | Boolean, default: `false` | Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label. |
 | `labelled-by` | String | HTML id of an element in the same shadow root which acts as the input's label |
 | `max` | Number | Maximum value allowed. |
 | `max-exclusive` | Boolean, default: `false` | Indicates whether the max value is exclusive. |
@@ -56,6 +56,7 @@ The `<d2l-input-number>` element is similar to `<d2l-input-text>`, except it's i
 | `min-fraction-digits` | Number, default: `0` | Minimum number of digits allowed after the decimal place. Must be between 0 and 20 and less than or equal to `maxFractionDigits` |
 | `required` | Boolean, default: `false` | Indicates that a value is required. |
 | `unit` | String | Unit associated with the input value, displayed next to input and announced as part of the label |
+| `unit-label` | String | Label for the unit, which is only picked up by screenreaders. Required if `unit` is used. |
 | `value` | Number | Value of the input. |
 
 ### Events
@@ -74,17 +75,6 @@ numberInput.addEventListener('change', (e) => {
 * `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-number` accessible, use the following properties when applicable:
-
-| Attribute | Description |
-|---|---|
-| `label` | **REQUIRED.** [Acts as a primary label on the input](https://www.w3.org/WAI/tutorials/forms/labels/). Visible unless `label-hidden` is also used. |
-| `label-hidden` | Use if label should be visually hidden but available for screen reader users. |
-| `labelled-by` | Use when another visible element should act as the label |
-| `unit` | Use to render the unit (offscreen) as part of the label. |
-
 ### Usage
 
 **Integers Only:**
@@ -120,11 +110,11 @@ The `<d2l-input-percent>` element is similar to `<d2l-input-number>`, except it
 
 | Property | Type | Description |
 |---|---|---|
-| `label` | String, required | Label for the input. |
+| `label` | String, required | Explicitly defined label for the element. |
 | `autofocus` | Boolean, default: `false` | When set, will automatically place focus on the input. |
 | `disabled` | Boolean, default: `false` | Disables the input. |
 | `input-width` | String, default: `4rem` | Restricts the maximum width of the input box without impacting the width of the label. |
-| `label-hidden` | Boolean, default: `false` | Hides the label visually (moves it to the input's `aria-label` attribute). |
+| `label-hidden` | Boolean, default: `false` | Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label. |
 | `max-fraction-digits` | Number | Maximum number of digits allowed after the decimal place. |
 | `min-fraction-digits` | Number | Minimum number of digits allowed after the decimal place. |
 | `required` | Boolean, default: `false` | Indicates that a value is required. |
@@ -146,11 +136,10 @@ numberInput.addEventListener('change', (e) => {
 * `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-percent` accessible, use the following properties when applicable:
-
-| Attribute | Description |
-|---|---|
-| `label` | **REQUIRED.** [Acts as a primary label on the input](https://www.w3.org/WAI/tutorials/forms/labels/). Visible unless `label-hidden` is also used. |
-| `label-hidden` | Use if label should be visually hidden but available for screen reader users. |
+## Accessibility
+- While `unit-label` is not mandatory by default, using the `unit` property makes it a required property
+	- This helps provide screenreaders more context and lets you use short forms for `unit` without risking it being unclear to screenreaders (e.g. `unit` is 'lbs', but `unit-label` is 'in pounds' )
+- Despite being a lighter colour than the input text, the `unit` text still meets the [WCAG Minimum Contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) requirement of 4.5:1
+- Neither input component uses the `type="number"` to denote their numerical nature, so the `label` must make it clear that numerical input is expected
+	- This is because `type="number"` does not take into consideration localizations, which can cause problems for languages that use a comma as the decimal place instead of a period
+	- Using `unit-label` can greatly help with making the numerical nature of the input explicit

package/components/inputs/input-number.js

@@ -107,7 +107,7 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 			 */
 			inputWidth: { attribute: 'input-width', type: String },
 			/**
-			 * Hides the label visually (moves it to the input's `aria-label` attribute)
+			 * Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.
 			 * @type {boolean}
 			 */
 			labelHidden: { type: Boolean, attribute: 'label-hidden' },
@@ -160,7 +160,7 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 			 */
 			unit: { type: String },
 			/**
-			 * Accessible label for the unit which will not be visually rendered
+			 * ACCESSIBILITY: Label for the unit, which is only picked up by screenreaders. Required if `unit` is used.
 			 * @type {string}
 			 */
 			unitLabel: { attribute: 'unit-label', type: String },

package/components/inputs/input-percent.js

@@ -34,7 +34,7 @@ class InputPercent extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMix
 			 */
 			inputWidth: { attribute: 'input-width', type: String },
 			/**
-			 * Hides the label visually (moves it to the input's "aria-label" attribute)
+			 * Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.
 			 * @type {boolean}
 			 */
 			labelHidden: { type: Boolean, attribute: 'label-hidden' },

package/custom-elements.json

@@ -6239,7 +6239,7 @@
         },
         {
           "name": "unit-label",
-          "description": "Accessible label for the unit which will not be visually rendered",
+          "description": "ACCESSIBILITY: Label for the unit, which is only picked up by screenreaders. Required if `unit` is used.",
           "type": "string"
         },
         {
@@ -6271,7 +6271,7 @@
         },
         {
           "name": "label-hidden",
-          "description": "Hides the label visually (moves it to the input's `aria-label` attribute)",
+          "description": "Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
           "type": "boolean",
           "default": "false"
         },
@@ -6354,7 +6354,7 @@
         {
           "name": "unitLabel",
           "attribute": "unit-label",
-          "description": "Accessible label for the unit which will not be visually rendered",
+          "description": "ACCESSIBILITY: Label for the unit, which is only picked up by screenreaders. Required if `unit` is used.",
           "type": "string"
         },
         {
@@ -6405,7 +6405,7 @@
         {
           "name": "labelHidden",
           "attribute": "label-hidden",
-          "description": "Hides the label visually (moves it to the input's `aria-label` attribute)",
+          "description": "Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
           "type": "boolean",
           "default": "false"
         },
@@ -6525,7 +6525,7 @@
         },
         {
           "name": "label-hidden",
-          "description": "Hides the label visually (moves it to the input's \"aria-label\" attribute)",
+          "description": "Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
           "type": "boolean",
           "default": "false"
         },
@@ -6596,7 +6596,7 @@
         {
           "name": "labelHidden",
           "attribute": "label-hidden",
-          "description": "Hides the label visually (moves it to the input's \"aria-label\" attribute)",
+          "description": "Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
           "type": "boolean",
           "default": "false"
         },

package/package.json

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