@brightspace-ui/core 3.39.0 → 3.40.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -65,16 +65,6 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
65
65
  * `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.
66
66
  <!-- docs: end hidden content -->
67
67
 
68
- ### Accessibility Properties
69
-
70
- To make your usage of `d2l-input-date` accessible, use the following properties when applicable:
71
-
72
- | Attribute | Description |
73
- |--|--|
74
- | `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. |
75
- | `label-hidden` | Use if label should be visually hidden but available for screen reader users |
76
- | `labelled-by` | String | Use when another visible element should act as the label |
77
-
78
68
  ## Date Range Input [d2l-input-date-range]
79
69
 
80
70
  Use the `<d2l-input-date-range>` component when users need to enter two dates in a range, like a course start and end date. The component consists of two input-date components - one for the start of a range and one for the end of a range. Values specified for these components (through the `start-value` and/or `end-value` attributes) are displayed if specified, and selected values are reflected.
@@ -120,17 +110,6 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
120
110
  * `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.
121
111
  <!-- docs: end hidden content -->
122
112
 
123
- ### Accessibility Properties
124
-
125
- To make your usage of `d2l-input-date-range` accessible, use the following properties when applicable:
126
-
127
- | Attribute | Description |
128
- |--|--|
129
- | `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. |
130
- | `label-hidden` | Use if label should be visually hidden but available for screen reader users |
131
- | `end-label` | Accessible label for the second date input |
132
- | `start-label` | Accessible label for the first date input |
133
-
134
113
  ## Time Input [d2l-input-time]
135
114
 
136
115
  Use the `<d2l-input-time>` component when users need to enter a time, without a date. The component consists of a text input field for typing a time and an attached dropdown for time selection. The dropdown opens on click of the text input, or on enter or down arrow press if the text input is focused. It displays the `value` if one is specified, or a placeholder if not, and reflects the selected value when one is selected in the dropdown or entered in the text input.
@@ -171,16 +150,6 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
171
150
  * `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.
172
151
  <!-- docs: end hidden content -->
173
152
 
174
- ### Accessibility Properties
175
-
176
- To make your usage of `d2l-input-time` accessible, use the following properties when applicable:
177
-
178
- | Attribute | Description |
179
- |--|--|
180
- | `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. |
181
- | `label-hidden` | Use if label should be visually hidden but available for screen reader users |
182
- | `labelled-by` | Use when another visible element should act as the label |
183
-
184
153
  ## Time Range Input [d2l-input-time-range]
185
154
 
186
155
  Use the `<d2l-input-time-range>` component when users need to enter two times in a range, and the date is already known. The component consists of two input-time components - one for the start of a range and one for the end of a range. Values specified for these components (through the `start-value` and/or `end-value` attributes) are displayed if specified, and selected values are reflected.
@@ -222,17 +191,6 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
222
191
  * `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.
223
192
  <!-- docs: end hidden content -->
224
193
 
225
- ### Accessibility Properties
226
-
227
- To make your usage of `d2l-input-time-range` accessible, use the following properties when applicable:
228
-
229
- | Attribute | Description |
230
- |--|--|
231
- | `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. |
232
- | `label-hidden` | Use if label should be visually hidden but available for screen reader users |
233
- | `end-label` | Accessible label for the second time input |
234
- | `start-label` | Accessible label for the first time input |
235
-
236
194
  ## Date-Time Input [d2l-input-date-time]
237
195
 
238
196
  Use the `<d2l-input-date-time>` component when users need to enter a single date and time, like a due date. The component consists of a `<d2l-input-date>` and a `<d2l-input-time>` component. The time input only appears once a date is selected. This component displays the `value` if one is specified, and reflects the selected value when one is selected or entered.
@@ -274,16 +232,6 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
274
232
  * `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.
275
233
  <!-- docs: end hidden content -->
276
234
 
277
- ### Accessibility Properties
278
-
279
- To make your usage of `d2l-input-date-time` accessible, use the following property:
280
-
281
- | Attribute | Description |
282
- |--|--|
283
- | `label` | **REQUIRED** [Acts as a primary label on the input](https://www.w3.org/WAI/tutorials/forms/labels/) |
284
- | `label-hidden` | Use if label should be visually hidden but available for screen reader users |
285
- | `labelled-by` | String | Use when another visible element should act as the label |
286
-
287
235
  ## Date-Time Range Input [d2l-input-date-time-range]
288
236
 
289
237
  Use the `<d2l-input-date-time-range>` component when users need to enter two dates and times in a range, like an assignment start and end date/time. The component consists of two input-date-time components - one for the start of a range and one for the end of a range. Values specified for these components (through the `start-value` and/or `end-value` attributes) are displayed if specified, and selected values are reflected.
@@ -327,16 +275,16 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
327
275
  * `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.
328
276
  <!-- docs: end hidden content -->
329
277
 
330
- ### Accessibility Properties
278
+ ## Accessibility
279
+
280
+ The date and time components generally follow the W3C's best practice recommendations for a [Date picker dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/). For details on the accessibility of the calendar within the date input components, see [Calendar Accessibility](../calendar#accessibility).
331
281
 
332
- To make your usage of `d2l-input-date-time-range` accessible, use the following properties when applicable:
282
+ A few notable accessibility-related features of these components are:
333
283
 
334
- | Attribute | Description |
335
- |--|--|
336
- | `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. |
337
- | `label-hidden` | Use if label should be visually hidden but available for screen reader users |
338
- | `end-label` | Accessible label for the second date-time input |
339
- | `start-label` | Accessible label for the first date-time input |
284
+ * The expected date format is indicated both in placeholder text and a tooltip available on hover and focus
285
+ * Focus is trapped in the date input dropdown
286
+ * When the date input is opened with the keyboard, focus goes to either selected date, today, or earliest valid date if today is prior to `min-date`
287
+ * Extensive intuitive keyboard interaction support
340
288
 
341
289
  ## Timezone
342
290
 
@@ -43,7 +43,7 @@ class InputDateRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormEleme
43
43
  */
44
44
  autoShiftDates: { attribute: 'auto-shift-dates', reflect: true, type: Boolean },
45
45
  /**
46
- * Hides the start and end labels visually
46
+ * Hides the start and end labels visually. Hidden labels are still read by screen readers so make sure to set appropriate start and end labels.
47
47
  * @type {boolean}
48
48
  */
49
49
  childLabelsHidden: { attribute: 'child-labels-hidden', reflect: true, type: Boolean },
@@ -53,7 +53,7 @@ class InputDateRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormEleme
53
53
  */
54
54
  disabled: { type: Boolean, reflect: true },
55
55
  /**
56
- * Accessible label for the end date input. Defaults to localized "End Date".
56
+ * ACCESSIBILITY: Label for the end date input. Defaults to localized "End Date".
57
57
  * @type {string}
58
58
  * @default "End Date"
59
59
  */
@@ -74,12 +74,12 @@ class InputDateRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormEleme
74
74
  */
75
75
  inclusiveDateRange: { attribute: 'inclusive-date-range', reflect: true, type: Boolean },
76
76
  /**
77
- * REQUIRED: Accessible label for the input fieldset that wraps the date inputs
77
+ * ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the date inputs
78
78
  * @type {string}
79
79
  */
80
80
  label: { type: String, reflect: true },
81
81
  /**
82
- * Hides the fieldset label visually
82
+ * Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.
83
83
  * @type {boolean}
84
84
  */
85
85
  labelHidden: { type: Boolean, attribute: 'label-hidden', reflect: true },
@@ -104,7 +104,7 @@ class InputDateRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormEleme
104
104
  */
105
105
  required: { type: Boolean, reflect: true },
106
106
  /**
107
- * Accessible label for the start date input. Defaults to localized "Start Date".
107
+ * ACCESSIBILITY: Label for the start date input. Defaults to localized "Start Date".
108
108
  * @type {string}
109
109
  * @default "Start Date"
110
110
  */
@@ -76,7 +76,7 @@ class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormE
76
76
  */
77
77
  autoShiftDates: { attribute: 'auto-shift-dates', reflect: true, type: Boolean },
78
78
  /**
79
- * Hides the start and end labels visually
79
+ * Hides the start and end labels visually. Hidden labels are still read by screen readers so make sure to set appropriate start and end labels.
80
80
  * @type {boolean}
81
81
  */
82
82
  childLabelsHidden: { attribute: 'child-labels-hidden', reflect: true, type: Boolean },
@@ -86,7 +86,7 @@ class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormE
86
86
  */
87
87
  disabled: { type: Boolean, reflect: true },
88
88
  /**
89
- * Accessible label for the end date-time input. Defaults to localized "End Date".
89
+ * ACCESSIBILITY: Label for the end date-time input. Defaults to localized "End Date".
90
90
  * @type {string}
91
91
  * @default "End Date"
92
92
  */
@@ -107,12 +107,12 @@ class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormE
107
107
  */
108
108
  inclusiveDateRange: { attribute: 'inclusive-date-range', reflect: true, type: Boolean },
109
109
  /**
110
- * REQUIRED: Accessible label for the input fieldset that wraps the date-time inputs
110
+ * ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the date-time inputs
111
111
  * @type {string}
112
112
  */
113
113
  label: { type: String, reflect: true },
114
114
  /**
115
- * Hides the fieldset label visually
115
+ * Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.
116
116
  * @type {boolean}
117
117
  */
118
118
  labelHidden: { type: Boolean, attribute: 'label-hidden', reflect: true },
@@ -142,7 +142,7 @@ class InputDateTimeRange extends InteractiveMixin(FocusMixin(SkeletonMixin(FormE
142
142
  */
143
143
  required: { type: Boolean, reflect: true },
144
144
  /**
145
- * Accessible label for the start date-time input. Defaults to localized "Start Date".
145
+ * ACCESSIBILITY: Label for the start date-time input. Defaults to localized "Start Date".
146
146
  * @type {string}
147
147
  * @default "Start Date"
148
148
  */
@@ -52,7 +52,7 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
52
52
  */
53
53
  disabled: { type: Boolean },
54
54
  /**
55
- * Hides the fieldset label visually
55
+ * Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.
56
56
  * @type {boolean}
57
57
  */
58
58
  labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean },
@@ -49,7 +49,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
49
49
  */
50
50
  hasNow: { attribute: 'has-now', type: Boolean },
51
51
  /**
52
- * Hides the label visually (moves it to the input's "aria-label" attribute)
52
+ * Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.
53
53
  * @type {boolean}
54
54
  */
55
55
  labelHidden: { type: Boolean, attribute: 'label-hidden' },
@@ -50,7 +50,7 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
50
50
  */
51
51
  autoShiftTimes: { attribute: 'auto-shift-times', reflect: true, type: Boolean },
52
52
  /**
53
- * Hides the start and end labels visually
53
+ * Hides the start and end labels visually. Hidden labels are still read by screen readers so make sure to set appropriate start and end labels.
54
54
  * @type {boolean}
55
55
  */
56
56
  childLabelsHidden: { attribute: 'child-labels-hidden', reflect: true, type: Boolean },
@@ -60,7 +60,7 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
60
60
  */
61
61
  disabled: { type: Boolean, reflect: true },
62
62
  /**
63
- * Accessible label for the end time input. Defaults to localized "End Time".
63
+ * ACCESSIBILITY: Label for the end time input. Defaults to localized "End Time".
64
64
  * @type {string}
65
65
  * @default "End Time"
66
66
  */
@@ -86,12 +86,12 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
86
86
  */
87
87
  inclusiveTimeRange: { attribute: 'inclusive-time-range', reflect: true, type: Boolean },
88
88
  /**
89
- * REQUIRED: Accessible label for the input fieldset that wraps the time inputs
89
+ * ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the time inputs
90
90
  * @type {string}
91
91
  */
92
92
  label: { type: String, reflect: true },
93
93
  /**
94
- * Hides the fieldset label visually
94
+ * Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.
95
95
  * @type {boolean}
96
96
  */
97
97
  labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean },
@@ -106,7 +106,7 @@ class InputTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMixin(
106
106
  */
107
107
  required: { type: Boolean, reflect: true },
108
108
  /**
109
- * Accessible label for the start time input. Defaults to localized "Start Time".
109
+ * ACCESSIBILITY: Label for the start time input. Defaults to localized "Start Time".
110
110
  * @type {string}
111
111
  * @default "Start Time"
112
112
  */
@@ -140,7 +140,7 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
140
140
  */
141
141
  enforceTimeIntervals: { type: Boolean, attribute: 'enforce-time-intervals' },
142
142
  /**
143
- * Hides the label visually (moves it to the input's "aria-label" attribute)
143
+ * Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.
144
144
  * @type {boolean}
145
145
  */
146
146
  labelHidden: { type: Boolean, attribute: 'label-hidden' },
@@ -5201,7 +5201,7 @@
5201
5201
  "attributes": [
5202
5202
  {
5203
5203
  "name": "end-label",
5204
- "description": "Accessible label for the end date input. Defaults to localized \"End Date\".",
5204
+ "description": "ACCESSIBILITY: Label for the end date input. Defaults to localized \"End Date\".",
5205
5205
  "type": "string",
5206
5206
  "default": "\"\\\"End Date\\\"\""
5207
5207
  },
@@ -5212,7 +5212,7 @@
5212
5212
  },
5213
5213
  {
5214
5214
  "name": "label",
5215
- "description": "REQUIRED: Accessible label for the input fieldset that wraps the date inputs",
5215
+ "description": "ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the date inputs",
5216
5216
  "type": "string"
5217
5217
  },
5218
5218
  {
@@ -5227,7 +5227,7 @@
5227
5227
  },
5228
5228
  {
5229
5229
  "name": "start-label",
5230
- "description": "Accessible label for the start date input. Defaults to localized \"Start Date\".",
5230
+ "description": "ACCESSIBILITY: Label for the start date input. Defaults to localized \"Start Date\".",
5231
5231
  "type": "string",
5232
5232
  "default": "\"\\\"Start Date\\\"\""
5233
5233
  },
@@ -5244,7 +5244,7 @@
5244
5244
  },
5245
5245
  {
5246
5246
  "name": "child-labels-hidden",
5247
- "description": "Hides the start and end labels visually",
5247
+ "description": "Hides the start and end labels visually. Hidden labels are still read by screen readers so make sure to set appropriate start and end labels.",
5248
5248
  "type": "boolean",
5249
5249
  "default": "false"
5250
5250
  },
@@ -5268,7 +5268,7 @@
5268
5268
  },
5269
5269
  {
5270
5270
  "name": "label-hidden",
5271
- "description": "Hides the fieldset label visually",
5271
+ "description": "Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
5272
5272
  "type": "boolean",
5273
5273
  "default": "false"
5274
5274
  },
@@ -5299,7 +5299,7 @@
5299
5299
  {
5300
5300
  "name": "endLabel",
5301
5301
  "attribute": "end-label",
5302
- "description": "Accessible label for the end date input. Defaults to localized \"End Date\".",
5302
+ "description": "ACCESSIBILITY: Label for the end date input. Defaults to localized \"End Date\".",
5303
5303
  "type": "string",
5304
5304
  "default": "\"\\\"End Date\\\"\""
5305
5305
  },
@@ -5312,7 +5312,7 @@
5312
5312
  {
5313
5313
  "name": "label",
5314
5314
  "attribute": "label",
5315
- "description": "REQUIRED: Accessible label for the input fieldset that wraps the date inputs",
5315
+ "description": "ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the date inputs",
5316
5316
  "type": "string"
5317
5317
  },
5318
5318
  {
@@ -5330,7 +5330,7 @@
5330
5330
  {
5331
5331
  "name": "startLabel",
5332
5332
  "attribute": "start-label",
5333
- "description": "Accessible label for the start date input. Defaults to localized \"Start Date\".",
5333
+ "description": "ACCESSIBILITY: Label for the start date input. Defaults to localized \"Start Date\".",
5334
5334
  "type": "string",
5335
5335
  "default": "\"\\\"Start Date\\\"\""
5336
5336
  },
@@ -5350,7 +5350,7 @@
5350
5350
  {
5351
5351
  "name": "childLabelsHidden",
5352
5352
  "attribute": "child-labels-hidden",
5353
- "description": "Hides the start and end labels visually",
5353
+ "description": "Hides the start and end labels visually. Hidden labels are still read by screen readers so make sure to set appropriate start and end labels.",
5354
5354
  "type": "boolean",
5355
5355
  "default": "false"
5356
5356
  },
@@ -5378,7 +5378,7 @@
5378
5378
  {
5379
5379
  "name": "labelHidden",
5380
5380
  "attribute": "label-hidden",
5381
- "description": "Hides the fieldset label visually",
5381
+ "description": "Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
5382
5382
  "type": "boolean",
5383
5383
  "default": "false"
5384
5384
  },
@@ -5487,7 +5487,7 @@
5487
5487
  "attributes": [
5488
5488
  {
5489
5489
  "name": "end-label",
5490
- "description": "Accessible label for the end date-time input. Defaults to localized \"End Date\".",
5490
+ "description": "ACCESSIBILITY: Label for the end date-time input. Defaults to localized \"End Date\".",
5491
5491
  "type": "string",
5492
5492
  "default": "\"\\\"End Date\\\"\""
5493
5493
  },
@@ -5498,7 +5498,7 @@
5498
5498
  },
5499
5499
  {
5500
5500
  "name": "label",
5501
- "description": "REQUIRED: Accessible label for the input fieldset that wraps the date-time inputs",
5501
+ "description": "ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the date-time inputs",
5502
5502
  "type": "string"
5503
5503
  },
5504
5504
  {
@@ -5513,7 +5513,7 @@
5513
5513
  },
5514
5514
  {
5515
5515
  "name": "start-label",
5516
- "description": "Accessible label for the start date-time input. Defaults to localized \"Start Date\".",
5516
+ "description": "ACCESSIBILITY: Label for the start date-time input. Defaults to localized \"Start Date\".",
5517
5517
  "type": "string",
5518
5518
  "default": "\"\\\"Start Date\\\"\""
5519
5519
  },
@@ -5530,7 +5530,7 @@
5530
5530
  },
5531
5531
  {
5532
5532
  "name": "child-labels-hidden",
5533
- "description": "Hides the start and end labels visually",
5533
+ "description": "Hides the start and end labels visually. Hidden labels are still read by screen readers so make sure to set appropriate start and end labels.",
5534
5534
  "type": "boolean",
5535
5535
  "default": "false"
5536
5536
  },
@@ -5554,7 +5554,7 @@
5554
5554
  },
5555
5555
  {
5556
5556
  "name": "label-hidden",
5557
- "description": "Hides the fieldset label visually",
5557
+ "description": "Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
5558
5558
  "type": "boolean",
5559
5559
  "default": "false"
5560
5560
  },
@@ -5591,7 +5591,7 @@
5591
5591
  {
5592
5592
  "name": "endLabel",
5593
5593
  "attribute": "end-label",
5594
- "description": "Accessible label for the end date-time input. Defaults to localized \"End Date\".",
5594
+ "description": "ACCESSIBILITY: Label for the end date-time input. Defaults to localized \"End Date\".",
5595
5595
  "type": "string",
5596
5596
  "default": "\"\\\"End Date\\\"\""
5597
5597
  },
@@ -5604,7 +5604,7 @@
5604
5604
  {
5605
5605
  "name": "label",
5606
5606
  "attribute": "label",
5607
- "description": "REQUIRED: Accessible label for the input fieldset that wraps the date-time inputs",
5607
+ "description": "ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the date-time inputs",
5608
5608
  "type": "string"
5609
5609
  },
5610
5610
  {
@@ -5622,7 +5622,7 @@
5622
5622
  {
5623
5623
  "name": "startLabel",
5624
5624
  "attribute": "start-label",
5625
- "description": "Accessible label for the start date-time input. Defaults to localized \"Start Date\".",
5625
+ "description": "ACCESSIBILITY: Label for the start date-time input. Defaults to localized \"Start Date\".",
5626
5626
  "type": "string",
5627
5627
  "default": "\"\\\"Start Date\\\"\""
5628
5628
  },
@@ -5642,7 +5642,7 @@
5642
5642
  {
5643
5643
  "name": "childLabelsHidden",
5644
5644
  "attribute": "child-labels-hidden",
5645
- "description": "Hides the start and end labels visually",
5645
+ "description": "Hides the start and end labels visually. Hidden labels are still read by screen readers so make sure to set appropriate start and end labels.",
5646
5646
  "type": "boolean",
5647
5647
  "default": "false"
5648
5648
  },
@@ -5670,7 +5670,7 @@
5670
5670
  {
5671
5671
  "name": "labelHidden",
5672
5672
  "attribute": "label-hidden",
5673
- "description": "Hides the fieldset label visually",
5673
+ "description": "Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
5674
5674
  "type": "boolean",
5675
5675
  "default": "false"
5676
5676
  },
@@ -5757,7 +5757,7 @@
5757
5757
  },
5758
5758
  {
5759
5759
  "name": "label-hidden",
5760
- "description": "Hides the fieldset label visually",
5760
+ "description": "Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
5761
5761
  "type": "boolean",
5762
5762
  "default": "false"
5763
5763
  },
@@ -5787,12 +5787,12 @@
5787
5787
  },
5788
5788
  {
5789
5789
  "name": "labelled-by",
5790
- "description": "The id of element that provides the label for this element",
5790
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
5791
5791
  "type": "string"
5792
5792
  },
5793
5793
  {
5794
5794
  "name": "label",
5795
- "description": "REQUIRED: Explicitly defined label for the element",
5795
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
5796
5796
  "type": "string"
5797
5797
  },
5798
5798
  {
@@ -5835,7 +5835,7 @@
5835
5835
  {
5836
5836
  "name": "labelHidden",
5837
5837
  "attribute": "label-hidden",
5838
- "description": "Hides the fieldset label visually",
5838
+ "description": "Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
5839
5839
  "type": "boolean",
5840
5840
  "default": "false"
5841
5841
  },
@@ -5870,13 +5870,13 @@
5870
5870
  {
5871
5871
  "name": "labelledBy",
5872
5872
  "attribute": "labelled-by",
5873
- "description": "The id of element that provides the label for this element",
5873
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
5874
5874
  "type": "string"
5875
5875
  },
5876
5876
  {
5877
5877
  "name": "label",
5878
5878
  "attribute": "label",
5879
- "description": "REQUIRED: Explicitly defined label for the element",
5879
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
5880
5880
  "type": "string"
5881
5881
  },
5882
5882
  {
@@ -5939,7 +5939,7 @@
5939
5939
  },
5940
5940
  {
5941
5941
  "name": "label-hidden",
5942
- "description": "Hides the label visually (moves it to the input's \"aria-label\" attribute)",
5942
+ "description": "Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
5943
5943
  "type": "boolean",
5944
5944
  "default": "false"
5945
5945
  },
@@ -5963,12 +5963,12 @@
5963
5963
  },
5964
5964
  {
5965
5965
  "name": "labelled-by",
5966
- "description": "The id of element that provides the label for this element",
5966
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
5967
5967
  "type": "string"
5968
5968
  },
5969
5969
  {
5970
5970
  "name": "label",
5971
- "description": "REQUIRED: Explicitly defined label for the element",
5971
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
5972
5972
  "type": "string"
5973
5973
  },
5974
5974
  {
@@ -6012,7 +6012,7 @@
6012
6012
  {
6013
6013
  "name": "labelHidden",
6014
6014
  "attribute": "label-hidden",
6015
- "description": "Hides the label visually (moves it to the input's \"aria-label\" attribute)",
6015
+ "description": "Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
6016
6016
  "type": "boolean",
6017
6017
  "default": "false"
6018
6018
  },
@@ -6040,13 +6040,13 @@
6040
6040
  {
6041
6041
  "name": "labelledBy",
6042
6042
  "attribute": "labelled-by",
6043
- "description": "The id of element that provides the label for this element",
6043
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
6044
6044
  "type": "string"
6045
6045
  },
6046
6046
  {
6047
6047
  "name": "label",
6048
6048
  "attribute": "label",
6049
- "description": "REQUIRED: Explicitly defined label for the element",
6049
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
6050
6050
  "type": "string"
6051
6051
  },
6052
6052
  {
@@ -6242,12 +6242,12 @@
6242
6242
  },
6243
6243
  {
6244
6244
  "name": "labelled-by",
6245
- "description": "The id of element that provides the label for this element",
6245
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
6246
6246
  "type": "string"
6247
6247
  },
6248
6248
  {
6249
6249
  "name": "label",
6250
- "description": "REQUIRED: Explicitly defined label for the element",
6250
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
6251
6251
  "type": "string"
6252
6252
  },
6253
6253
  {
@@ -6387,13 +6387,13 @@
6387
6387
  {
6388
6388
  "name": "labelledBy",
6389
6389
  "attribute": "labelled-by",
6390
- "description": "The id of element that provides the label for this element",
6390
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
6391
6391
  "type": "string"
6392
6392
  },
6393
6393
  {
6394
6394
  "name": "label",
6395
6395
  "attribute": "label",
6396
- "description": "REQUIRED: Explicitly defined label for the element",
6396
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
6397
6397
  "type": "string"
6398
6398
  },
6399
6399
  {
@@ -6489,12 +6489,12 @@
6489
6489
  },
6490
6490
  {
6491
6491
  "name": "labelled-by",
6492
- "description": "The id of element that provides the label for this element",
6492
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
6493
6493
  "type": "string"
6494
6494
  },
6495
6495
  {
6496
6496
  "name": "label",
6497
- "description": "REQUIRED: Explicitly defined label for the element",
6497
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
6498
6498
  "type": "string"
6499
6499
  },
6500
6500
  {
@@ -6568,13 +6568,13 @@
6568
6568
  {
6569
6569
  "name": "labelledBy",
6570
6570
  "attribute": "labelled-by",
6571
- "description": "The id of element that provides the label for this element",
6571
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
6572
6572
  "type": "string"
6573
6573
  },
6574
6574
  {
6575
6575
  "name": "label",
6576
6576
  "attribute": "label",
6577
- "description": "REQUIRED: Explicitly defined label for the element",
6577
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
6578
6578
  "type": "string"
6579
6579
  },
6580
6580
  {
@@ -6884,12 +6884,12 @@
6884
6884
  },
6885
6885
  {
6886
6886
  "name": "labelled-by",
6887
- "description": "The id of element that provides the label for this element",
6887
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
6888
6888
  "type": "string"
6889
6889
  },
6890
6890
  {
6891
6891
  "name": "label",
6892
- "description": "REQUIRED: Explicitly defined label for the element",
6892
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
6893
6893
  "type": "string"
6894
6894
  },
6895
6895
  {
@@ -7070,13 +7070,13 @@
7070
7070
  {
7071
7071
  "name": "labelledBy",
7072
7072
  "attribute": "labelled-by",
7073
- "description": "The id of element that provides the label for this element",
7073
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
7074
7074
  "type": "string"
7075
7075
  },
7076
7076
  {
7077
7077
  "name": "label",
7078
7078
  "attribute": "label",
7079
- "description": "REQUIRED: Explicitly defined label for the element",
7079
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
7080
7080
  "type": "string"
7081
7081
  },
7082
7082
  {
@@ -7204,12 +7204,12 @@
7204
7204
  },
7205
7205
  {
7206
7206
  "name": "labelled-by",
7207
- "description": "The id of element that provides the label for this element",
7207
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
7208
7208
  "type": "string"
7209
7209
  },
7210
7210
  {
7211
7211
  "name": "label",
7212
- "description": "REQUIRED: Explicitly defined label for the element",
7212
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
7213
7213
  "type": "string"
7214
7214
  },
7215
7215
  {
@@ -7311,13 +7311,13 @@
7311
7311
  {
7312
7312
  "name": "labelledBy",
7313
7313
  "attribute": "labelled-by",
7314
- "description": "The id of element that provides the label for this element",
7314
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
7315
7315
  "type": "string"
7316
7316
  },
7317
7317
  {
7318
7318
  "name": "label",
7319
7319
  "attribute": "label",
7320
- "description": "REQUIRED: Explicitly defined label for the element",
7320
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
7321
7321
  "type": "string"
7322
7322
  },
7323
7323
  {
@@ -7362,18 +7362,18 @@
7362
7362
  "attributes": [
7363
7363
  {
7364
7364
  "name": "end-label",
7365
- "description": "Accessible label for the end time input. Defaults to localized \"End Time\".",
7365
+ "description": "ACCESSIBILITY: Label for the end time input. Defaults to localized \"End Time\".",
7366
7366
  "type": "string",
7367
7367
  "default": "\"\\\"End Time\\\"\""
7368
7368
  },
7369
7369
  {
7370
7370
  "name": "label",
7371
- "description": "REQUIRED: Accessible label for the input fieldset that wraps the time inputs",
7371
+ "description": "ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the time inputs",
7372
7372
  "type": "string"
7373
7373
  },
7374
7374
  {
7375
7375
  "name": "start-label",
7376
- "description": "Accessible label for the start time input. Defaults to localized \"Start Time\".",
7376
+ "description": "ACCESSIBILITY: Label for the start time input. Defaults to localized \"Start Time\".",
7377
7377
  "type": "string",
7378
7378
  "default": "\"\\\"Start Time\\\"\""
7379
7379
  },
@@ -7395,7 +7395,7 @@
7395
7395
  },
7396
7396
  {
7397
7397
  "name": "child-labels-hidden",
7398
- "description": "Hides the start and end labels visually",
7398
+ "description": "Hides the start and end labels visually. Hidden labels are still read by screen readers so make sure to set appropriate start and end labels.",
7399
7399
  "type": "boolean",
7400
7400
  "default": "false"
7401
7401
  },
@@ -7425,7 +7425,7 @@
7425
7425
  },
7426
7426
  {
7427
7427
  "name": "label-hidden",
7428
- "description": "Hides the fieldset label visually",
7428
+ "description": "Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
7429
7429
  "type": "boolean",
7430
7430
  "default": "false"
7431
7431
  },
@@ -7462,20 +7462,20 @@
7462
7462
  {
7463
7463
  "name": "endLabel",
7464
7464
  "attribute": "end-label",
7465
- "description": "Accessible label for the end time input. Defaults to localized \"End Time\".",
7465
+ "description": "ACCESSIBILITY: Label for the end time input. Defaults to localized \"End Time\".",
7466
7466
  "type": "string",
7467
7467
  "default": "\"\\\"End Time\\\"\""
7468
7468
  },
7469
7469
  {
7470
7470
  "name": "label",
7471
7471
  "attribute": "label",
7472
- "description": "REQUIRED: Accessible label for the input fieldset that wraps the time inputs",
7472
+ "description": "ACCESSIBILITY: REQUIRED: Label for the input fieldset that wraps the time inputs",
7473
7473
  "type": "string"
7474
7474
  },
7475
7475
  {
7476
7476
  "name": "startLabel",
7477
7477
  "attribute": "start-label",
7478
- "description": "Accessible label for the start time input. Defaults to localized \"Start Time\".",
7478
+ "description": "ACCESSIBILITY: Label for the start time input. Defaults to localized \"Start Time\".",
7479
7479
  "type": "string",
7480
7480
  "default": "\"\\\"Start Time\\\"\""
7481
7481
  },
@@ -7501,7 +7501,7 @@
7501
7501
  {
7502
7502
  "name": "childLabelsHidden",
7503
7503
  "attribute": "child-labels-hidden",
7504
- "description": "Hides the start and end labels visually",
7504
+ "description": "Hides the start and end labels visually. Hidden labels are still read by screen readers so make sure to set appropriate start and end labels.",
7505
7505
  "type": "boolean",
7506
7506
  "default": "false"
7507
7507
  },
@@ -7536,7 +7536,7 @@
7536
7536
  {
7537
7537
  "name": "labelHidden",
7538
7538
  "attribute": "label-hidden",
7539
- "description": "Hides the fieldset label visually",
7539
+ "description": "Hides the fieldset label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
7540
7540
  "type": "boolean",
7541
7541
  "default": "false"
7542
7542
  },
@@ -7621,7 +7621,7 @@
7621
7621
  },
7622
7622
  {
7623
7623
  "name": "label-hidden",
7624
- "description": "Hides the label visually (moves it to the input's \"aria-label\" attribute)",
7624
+ "description": "Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
7625
7625
  "type": "boolean",
7626
7626
  "default": "false"
7627
7627
  },
@@ -7645,12 +7645,12 @@
7645
7645
  },
7646
7646
  {
7647
7647
  "name": "labelled-by",
7648
- "description": "The id of element that provides the label for this element",
7648
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
7649
7649
  "type": "string"
7650
7650
  },
7651
7651
  {
7652
7652
  "name": "label",
7653
- "description": "REQUIRED: Explicitly defined label for the element",
7653
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
7654
7654
  "type": "string"
7655
7655
  },
7656
7656
  {
@@ -7700,7 +7700,7 @@
7700
7700
  {
7701
7701
  "name": "labelHidden",
7702
7702
  "attribute": "label-hidden",
7703
- "description": "Hides the label visually (moves it to the input's \"aria-label\" attribute)",
7703
+ "description": "Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
7704
7704
  "type": "boolean",
7705
7705
  "default": "false"
7706
7706
  },
@@ -7728,13 +7728,13 @@
7728
7728
  {
7729
7729
  "name": "labelledBy",
7730
7730
  "attribute": "labelled-by",
7731
- "description": "The id of element that provides the label for this element",
7731
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
7732
7732
  "type": "string"
7733
7733
  },
7734
7734
  {
7735
7735
  "name": "label",
7736
7736
  "attribute": "label",
7737
- "description": "REQUIRED: Explicitly defined label for the element",
7737
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
7738
7738
  "type": "string"
7739
7739
  },
7740
7740
  {
@@ -8199,12 +8199,12 @@
8199
8199
  },
8200
8200
  {
8201
8201
  "name": "labelled-by",
8202
- "description": "The id of element that provides the label for this element",
8202
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
8203
8203
  "type": "string"
8204
8204
  },
8205
8205
  {
8206
8206
  "name": "label",
8207
- "description": "REQUIRED: Explicitly defined label for the element",
8207
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
8208
8208
  "type": "string"
8209
8209
  }
8210
8210
  ],
@@ -8317,13 +8317,13 @@
8317
8317
  {
8318
8318
  "name": "labelledBy",
8319
8319
  "attribute": "labelled-by",
8320
- "description": "The id of element that provides the label for this element",
8320
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
8321
8321
  "type": "string"
8322
8322
  },
8323
8323
  {
8324
8324
  "name": "label",
8325
8325
  "attribute": "label",
8326
- "description": "REQUIRED: Explicitly defined label for the element",
8326
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
8327
8327
  "type": "string"
8328
8328
  },
8329
8329
  {
@@ -8538,12 +8538,12 @@
8538
8538
  },
8539
8539
  {
8540
8540
  "name": "labelled-by",
8541
- "description": "The id of element that provides the label for this element",
8541
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
8542
8542
  "type": "string"
8543
8543
  },
8544
8544
  {
8545
8545
  "name": "label",
8546
- "description": "REQUIRED: Explicitly defined label for the element",
8546
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
8547
8547
  "type": "string"
8548
8548
  }
8549
8549
  ],
@@ -8663,13 +8663,13 @@
8663
8663
  {
8664
8664
  "name": "labelledBy",
8665
8665
  "attribute": "labelled-by",
8666
- "description": "The id of element that provides the label for this element",
8666
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
8667
8667
  "type": "string"
8668
8668
  },
8669
8669
  {
8670
8670
  "name": "label",
8671
8671
  "attribute": "label",
8672
- "description": "REQUIRED: Explicitly defined label for the element",
8672
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
8673
8673
  "type": "string"
8674
8674
  },
8675
8675
  {
@@ -9001,12 +9001,12 @@
9001
9001
  },
9002
9002
  {
9003
9003
  "name": "labelled-by",
9004
- "description": "The id of element that provides the label for this element",
9004
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
9005
9005
  "type": "string"
9006
9006
  },
9007
9007
  {
9008
9008
  "name": "label",
9009
- "description": "REQUIRED: Explicitly defined label for the element",
9009
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
9010
9010
  "type": "string"
9011
9011
  }
9012
9012
  ],
@@ -9131,13 +9131,13 @@
9131
9131
  {
9132
9132
  "name": "labelledBy",
9133
9133
  "attribute": "labelled-by",
9134
- "description": "The id of element that provides the label for this element",
9134
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
9135
9135
  "type": "string"
9136
9136
  },
9137
9137
  {
9138
9138
  "name": "label",
9139
9139
  "attribute": "label",
9140
- "description": "REQUIRED: Explicitly defined label for the element",
9140
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
9141
9141
  "type": "string"
9142
9142
  },
9143
9143
  {
@@ -11183,12 +11183,12 @@
11183
11183
  },
11184
11184
  {
11185
11185
  "name": "labelled-by",
11186
- "description": "The id of element that provides the label for this element",
11186
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
11187
11187
  "type": "string"
11188
11188
  },
11189
11189
  {
11190
11190
  "name": "label",
11191
- "description": "REQUIRED: Explicitly defined label for the element",
11191
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
11192
11192
  "type": "string"
11193
11193
  }
11194
11194
  ],
@@ -11221,13 +11221,13 @@
11221
11221
  {
11222
11222
  "name": "labelledBy",
11223
11223
  "attribute": "labelled-by",
11224
- "description": "The id of element that provides the label for this element",
11224
+ "description": "ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.",
11225
11225
  "type": "string"
11226
11226
  },
11227
11227
  {
11228
11228
  "name": "label",
11229
11229
  "attribute": "label",
11230
- "description": "REQUIRED: Explicitly defined label for the element",
11230
+ "description": "ACCESSIBILITY: REQUIRED: Explicitly defined label for the element",
11231
11231
  "type": "string"
11232
11232
  },
11233
11233
  {
@@ -80,12 +80,12 @@ export const LabelledMixin = superclass => class extends PropertyRequiredMixin(s
80
80
  static get properties() {
81
81
  return {
82
82
  /**
83
- * The id of element that provides the label for this element
83
+ * ACCESSIBILITY: The id of element that provides the label for this element. Use when another visible element should act as the label.
84
84
  * @type {string}
85
85
  */
86
86
  labelledBy: { type: String, reflect: true, attribute: 'labelled-by' },
87
87
  /**
88
- * REQUIRED: Explicitly defined label for the element
88
+ * ACCESSIBILITY: REQUIRED: Explicitly defined label for the element
89
89
  * @type {string}
90
90
  */
91
91
  label: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.39.0",
3
+ "version": "3.40.0",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",
@@ -60,7 +60,7 @@
60
60
  "rollup": "^4",
61
61
  "rollup-plugin-copy": "^3",
62
62
  "rollup-plugin-delete": "^2",
63
- "sinon": "^18",
63
+ "sinon": "^19",
64
64
  "stylelint": "^16",
65
65
  "web-component-analyzer": "^2"
66
66
  },