@brightspace-ui/core 3.27.6 → 3.27.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,6 +4,7 @@ import { cssEscape, getComposedChildren, getComposedParent, isVisible } from '..
|
|
|
4
4
|
|
|
5
5
|
const BACKDROP_HIDDEN = 'data-d2l-backdrop-hidden';
|
|
6
6
|
const BACKDROP_ARIA_HIDDEN = 'data-d2l-backdrop-aria-hidden';
|
|
7
|
+
const TRANSITION_DURATION = 200;
|
|
7
8
|
|
|
8
9
|
const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
9
10
|
|
|
@@ -47,7 +48,7 @@ class Backdrop extends LitElement {
|
|
|
47
48
|
opacity: 0;
|
|
48
49
|
position: fixed;
|
|
49
50
|
top: 0;
|
|
50
|
-
transition: opacity
|
|
51
|
+
transition: opacity ${TRANSITION_DURATION}ms ease-in;
|
|
51
52
|
width: 0;
|
|
52
53
|
z-index: 999;
|
|
53
54
|
}
|
|
@@ -123,6 +124,7 @@ class Backdrop extends LitElement {
|
|
|
123
124
|
if (!reduceMotion && !this.noAnimateHide && isVisible(this)) {
|
|
124
125
|
this.addEventListener('transitionend', hide, { once: true });
|
|
125
126
|
this._state = 'hiding';
|
|
127
|
+
setTimeout(() => this._state === 'hiding' && hide(), TRANSITION_DURATION + 100);
|
|
126
128
|
} else {
|
|
127
129
|
hide();
|
|
128
130
|
}
|
|
@@ -23,7 +23,7 @@ A menu displays a list of choices or actions. They generally appear when the use
|
|
|
23
23
|
|
|
24
24
|
## Menu [d2l-menu]
|
|
25
25
|
|
|
26
|
-
A basic menu can be defined using `d2l-menu` and a combination of menu items (e.g., `d2l-menu-item`, `d2l-menu-item-separator`).
|
|
26
|
+
A basic menu can be defined using `d2l-menu` and a combination of menu items (e.g., `d2l-menu-item`, `d2l-menu-item-separator`).
|
|
27
27
|
|
|
28
28
|
**Note:** `d2l-menu` renders without an outer border since it's typically used in a context where a containing element defines a border (ex. `d2l-dropdown-menu` or side nav).
|
|
29
29
|
|
|
@@ -45,21 +45,13 @@ A basic menu can be defined using `d2l-menu` and a combination of menu items (e.
|
|
|
45
45
|
|
|
46
46
|
| Property | Type | Description |
|
|
47
47
|
|--|--|--|
|
|
48
|
-
| `label` | String, required for root menu |
|
|
48
|
+
| `label` | String, required for root menu | Acts as the primary label for the menu |
|
|
49
49
|
|
|
50
50
|
### Events
|
|
51
51
|
|
|
52
52
|
* `d2l-menu-resize`: dispatched when size of menu changes (e.g., when nested menu of a different size is opened)
|
|
53
53
|
<!-- docs: end hidden content -->
|
|
54
54
|
|
|
55
|
-
### Accessibility Properties
|
|
56
|
-
|
|
57
|
-
To make your usage of `d2l-menu` accessible, use the following property:
|
|
58
|
-
|
|
59
|
-
| Attribute | Description |
|
|
60
|
-
|--|--|
|
|
61
|
-
| `label` | **REQUIRED** Acts as a primary label for the menu |
|
|
62
|
-
|
|
63
55
|
## Menu Item [d2l-menu-item]
|
|
64
56
|
|
|
65
57
|
The `d2l-menu-item` component is used with JS handlers and can be wired-up to the `d2l-menu-item-select` event.
|
|
@@ -93,6 +85,7 @@ The `d2l-menu-item` component is used with JS handlers and can be wired-up to th
|
|
|
93
85
|
| Property | Type | Description |
|
|
94
86
|
|--|--|--|
|
|
95
87
|
| `text` | String, required | Text displayed by the menu item |
|
|
88
|
+
| `description` | String | A description of the menu item that will be used by screen readers for additional context |
|
|
96
89
|
| `disabled` | Boolean | Disables the menu item |
|
|
97
90
|
|
|
98
91
|
### Events
|
|
@@ -104,14 +97,6 @@ The `d2l-menu-item` component is used with JS handlers and can be wired-up to th
|
|
|
104
97
|
* `supporting`: Allows supporting information to be displayed on the right-most side of the menu item
|
|
105
98
|
<!-- docs: end hidden content -->
|
|
106
99
|
|
|
107
|
-
### Accessibility Properties
|
|
108
|
-
|
|
109
|
-
To make your usage of `d2l-menu-item` accessible, use the following property:
|
|
110
|
-
|
|
111
|
-
| Attribute | Description |
|
|
112
|
-
|--|--|
|
|
113
|
-
| `description` | Overrides aria-label to provide extra information to screen reader users |
|
|
114
|
-
|
|
115
100
|
## Link Menu Item [d2l-menu-item-link]
|
|
116
101
|
|
|
117
102
|
This `d2l-menu-item-link` is used for navigating. It gives users the ability to right-click and open in a new tab.
|
|
@@ -134,24 +119,18 @@ This `d2l-menu-item-link` is used for navigating. It gives users the ability to
|
|
|
134
119
|
|
|
135
120
|
| Property | Type | Description |
|
|
136
121
|
|--|--|--|
|
|
137
|
-
| `download` | String | If the attribute is provided, it will prompt the user to download the resource instead of navigating to it. Additionally, if the attribute is provided with a value, that value will be used for the filename. |
|
|
138
122
|
| `href` | String, required | The URL the menu item link navigates to |
|
|
139
123
|
| `text` | String, required | Text displayed by the menu item |
|
|
124
|
+
| `description` | String | A description of the menu item that will be used by screen readers for additional context |
|
|
140
125
|
| `disabled` | Boolean | Disables the menu item |
|
|
126
|
+
| `download` | String | If the attribute is provided, it will prompt the user to download the resource instead of navigating to it. Additionally, if the attribute is provided with a value, that value will be used for the filename. |
|
|
127
|
+
| `target` | String | Where to display the linked URL |
|
|
141
128
|
|
|
142
129
|
### Slots
|
|
143
130
|
|
|
144
131
|
* `supporting`: Allows supporting information to be displayed on the right-most side of the menu item
|
|
145
132
|
<!-- docs: end hidden content -->
|
|
146
133
|
|
|
147
|
-
### Accessibility Properties
|
|
148
|
-
|
|
149
|
-
To make your usage of `d2l-menu-item-link` accessible, use the following property:
|
|
150
|
-
|
|
151
|
-
| Attribute | Description |
|
|
152
|
-
|--|--|
|
|
153
|
-
| `description` | Overrides aria-label to provide extra information to screen reader users |
|
|
154
|
-
|
|
155
134
|
## Checkbox Menu Item [d2l-menu-item-checkbox]
|
|
156
135
|
|
|
157
136
|
The `d2l-menu-item-checkbox` component is used for selection. It can be wired-up to the `d2l-menu-item-change` event. Multiple checkboxes can be selected at once.
|
|
@@ -181,7 +160,8 @@ The `d2l-menu-item-checkbox` component is used for selection. It can be wired-up
|
|
|
181
160
|
| Property | Type | Description |
|
|
182
161
|
|--|--|--|
|
|
183
162
|
| `text` | String, required | Text displayed by the menu item |
|
|
184
|
-
| `value` | String, required | |
|
|
163
|
+
| `value` | String, required | The selectable item's value |
|
|
164
|
+
| `description` | String | A description of the menu item that will be used by screen readers for additional context |
|
|
185
165
|
| `disabled` | Boolean | Disables the menu item |
|
|
186
166
|
| `selected` | Boolean | Thie will set the item to be selected by default |
|
|
187
167
|
|
|
@@ -194,14 +174,6 @@ The `d2l-menu-item-checkbox` component is used for selection. It can be wired-up
|
|
|
194
174
|
* `d2l-menu-item-change`: dispatched when the selected menu item changes
|
|
195
175
|
<!-- docs: end hidden content -->
|
|
196
176
|
|
|
197
|
-
### Accessibility Properties
|
|
198
|
-
|
|
199
|
-
To make your usage of `d2l-menu-item-checkbox` accessible, use the following property:
|
|
200
|
-
|
|
201
|
-
| Attribute | Description |
|
|
202
|
-
|--|--|
|
|
203
|
-
| `description` | Overrides aria-label to provide extra information to screen reader users |
|
|
204
|
-
|
|
205
177
|
## Radio Menu Item [d2l-menu-item-radio]
|
|
206
178
|
|
|
207
179
|
The `d2l-menu-item-radio` component is used for selection. It can be wired-up to the `d2l-menu-item-change` event. Only one radio item in a given `<d2l-menu>` may be selected at once (i.e., selecting one option will deselect the other selected `d2l-menu-item-radio` item).
|
|
@@ -231,7 +203,8 @@ The `d2l-menu-item-radio` component is used for selection. It can be wired-up to
|
|
|
231
203
|
| Property | Type | Description |
|
|
232
204
|
|--|--|--|
|
|
233
205
|
| `text` | String, required | Text displayed by the menu item |
|
|
234
|
-
| `value` | String, required | |
|
|
206
|
+
| `value` | String, required | The selectable item's value |
|
|
207
|
+
| `description` | String | A description of the menu item that will be used by screen readers for additional context |
|
|
235
208
|
| `disabled` | Boolean | Disables the menu item |
|
|
236
209
|
| `selected` | Boolean | This will set the item to be seelcted by default |
|
|
237
210
|
|
|
@@ -244,14 +217,6 @@ The `d2l-menu-item-radio` component is used for selection. It can be wired-up to
|
|
|
244
217
|
* `d2l-menu-item-change`: dispatched when the selected menu item changes
|
|
245
218
|
<!-- docs: end hidden content -->
|
|
246
219
|
|
|
247
|
-
### Accessibility Properties
|
|
248
|
-
|
|
249
|
-
To make your usage of `d2l-menu-item-radio` accessible, use the following property:
|
|
250
|
-
|
|
251
|
-
| Attribute | Description |
|
|
252
|
-
|--|--|
|
|
253
|
-
| `description` | Overrides aria-label to provide extra information to screen reader users |
|
|
254
|
-
|
|
255
220
|
## Separator Menu Item [d2l-menu-item-separator]
|
|
256
221
|
|
|
257
222
|
The `d2l-menu-item-separator` component can be used to semantically separate menu items.
|
|
@@ -305,3 +270,10 @@ Nested menus can be defined by placing a `d2l-menu` inside a `d2l-menu-item`. F
|
|
|
305
270
|
<d2l-menu-item text="The Night Sky"></d2l-menu-item>
|
|
306
271
|
</d2l-menu>
|
|
307
272
|
```
|
|
273
|
+
|
|
274
|
+
## ACCESSIBILITY
|
|
275
|
+
|
|
276
|
+
- The `label` property for `d2l-menu` is only required for the root menu
|
|
277
|
+
- For nested menus, the label is automatically applied based on its parent menu-item
|
|
278
|
+
- The `d2l-menu` component and its items all follow W3C's [menu](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) pattern best practices
|
|
279
|
+
- This includes the expected keyboard behaviour, which allows for seamless navigation within the menu and any submenus within it
|
|
@@ -40,7 +40,7 @@ export const MenuItemMixin = superclass => class extends superclass {
|
|
|
40
40
|
*/
|
|
41
41
|
text: { type: String },
|
|
42
42
|
/**
|
|
43
|
-
*
|
|
43
|
+
* ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context
|
|
44
44
|
* @type {string}
|
|
45
45
|
*/
|
|
46
46
|
description: { type: String },
|
package/components/menu/menu.js
CHANGED
|
@@ -29,7 +29,7 @@ class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
|
|
|
29
29
|
*/
|
|
30
30
|
active: { type: Boolean, reflect: true },
|
|
31
31
|
/**
|
|
32
|
-
*
|
|
32
|
+
* ACCESSIBILITY: Acts as the primary label for the menu (REQUIRED for root menu)
|
|
33
33
|
* @type {string}
|
|
34
34
|
*/
|
|
35
35
|
label: { type: String },
|
package/custom-elements.json
CHANGED
|
@@ -9576,7 +9576,7 @@
|
|
|
9576
9576
|
},
|
|
9577
9577
|
{
|
|
9578
9578
|
"name": "description",
|
|
9579
|
-
"description": "
|
|
9579
|
+
"description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
|
|
9580
9580
|
"type": "string"
|
|
9581
9581
|
},
|
|
9582
9582
|
{
|
|
@@ -9596,7 +9596,7 @@
|
|
|
9596
9596
|
{
|
|
9597
9597
|
"name": "description",
|
|
9598
9598
|
"attribute": "description",
|
|
9599
|
-
"description": "
|
|
9599
|
+
"description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
|
|
9600
9600
|
"type": "string"
|
|
9601
9601
|
},
|
|
9602
9602
|
{
|
|
@@ -9645,7 +9645,7 @@
|
|
|
9645
9645
|
},
|
|
9646
9646
|
{
|
|
9647
9647
|
"name": "description",
|
|
9648
|
-
"description": "
|
|
9648
|
+
"description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
|
|
9649
9649
|
"type": "string"
|
|
9650
9650
|
},
|
|
9651
9651
|
{
|
|
@@ -9678,7 +9678,7 @@
|
|
|
9678
9678
|
{
|
|
9679
9679
|
"name": "description",
|
|
9680
9680
|
"attribute": "description",
|
|
9681
|
-
"description": "
|
|
9681
|
+
"description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
|
|
9682
9682
|
"type": "string"
|
|
9683
9683
|
},
|
|
9684
9684
|
{
|
|
@@ -9737,7 +9737,7 @@
|
|
|
9737
9737
|
},
|
|
9738
9738
|
{
|
|
9739
9739
|
"name": "description",
|
|
9740
|
-
"description": "
|
|
9740
|
+
"description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
|
|
9741
9741
|
"type": "string"
|
|
9742
9742
|
},
|
|
9743
9743
|
{
|
|
@@ -9775,7 +9775,7 @@
|
|
|
9775
9775
|
{
|
|
9776
9776
|
"name": "description",
|
|
9777
9777
|
"attribute": "description",
|
|
9778
|
-
"description": "
|
|
9778
|
+
"description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
|
|
9779
9779
|
"type": "string"
|
|
9780
9780
|
},
|
|
9781
9781
|
{
|
|
@@ -9830,7 +9830,7 @@
|
|
|
9830
9830
|
},
|
|
9831
9831
|
{
|
|
9832
9832
|
"name": "description",
|
|
9833
|
-
"description": "
|
|
9833
|
+
"description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
|
|
9834
9834
|
"type": "string"
|
|
9835
9835
|
},
|
|
9836
9836
|
{
|
|
@@ -9863,7 +9863,7 @@
|
|
|
9863
9863
|
{
|
|
9864
9864
|
"name": "description",
|
|
9865
9865
|
"attribute": "description",
|
|
9866
|
-
"description": "
|
|
9866
|
+
"description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
|
|
9867
9867
|
"type": "string"
|
|
9868
9868
|
},
|
|
9869
9869
|
{
|
|
@@ -9906,7 +9906,7 @@
|
|
|
9906
9906
|
},
|
|
9907
9907
|
{
|
|
9908
9908
|
"name": "description",
|
|
9909
|
-
"description": "
|
|
9909
|
+
"description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
|
|
9910
9910
|
"type": "string"
|
|
9911
9911
|
},
|
|
9912
9912
|
{
|
|
@@ -9930,7 +9930,7 @@
|
|
|
9930
9930
|
{
|
|
9931
9931
|
"name": "description",
|
|
9932
9932
|
"attribute": "description",
|
|
9933
|
-
"description": "
|
|
9933
|
+
"description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
|
|
9934
9934
|
"type": "string"
|
|
9935
9935
|
},
|
|
9936
9936
|
{
|
|
@@ -9969,7 +9969,7 @@
|
|
|
9969
9969
|
},
|
|
9970
9970
|
{
|
|
9971
9971
|
"name": "description",
|
|
9972
|
-
"description": "
|
|
9972
|
+
"description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
|
|
9973
9973
|
"type": "string"
|
|
9974
9974
|
},
|
|
9975
9975
|
{
|
|
@@ -9989,7 +9989,7 @@
|
|
|
9989
9989
|
{
|
|
9990
9990
|
"name": "description",
|
|
9991
9991
|
"attribute": "description",
|
|
9992
|
-
"description": "
|
|
9992
|
+
"description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
|
|
9993
9993
|
"type": "string"
|
|
9994
9994
|
},
|
|
9995
9995
|
{
|
|
@@ -10028,7 +10028,7 @@
|
|
|
10028
10028
|
"attributes": [
|
|
10029
10029
|
{
|
|
10030
10030
|
"name": "label",
|
|
10031
|
-
"description": "
|
|
10031
|
+
"description": "ACCESSIBILITY: Acts as the primary label for the menu (REQUIRED for root menu)",
|
|
10032
10032
|
"type": "string"
|
|
10033
10033
|
}
|
|
10034
10034
|
],
|
|
@@ -10036,7 +10036,7 @@
|
|
|
10036
10036
|
{
|
|
10037
10037
|
"name": "label",
|
|
10038
10038
|
"attribute": "label",
|
|
10039
|
-
"description": "
|
|
10039
|
+
"description": "ACCESSIBILITY: Acts as the primary label for the menu (REQUIRED for root menu)",
|
|
10040
10040
|
"type": "string"
|
|
10041
10041
|
}
|
|
10042
10042
|
],
|
|
@@ -11093,7 +11093,7 @@
|
|
|
11093
11093
|
},
|
|
11094
11094
|
{
|
|
11095
11095
|
"name": "description",
|
|
11096
|
-
"description": "
|
|
11096
|
+
"description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
|
|
11097
11097
|
"type": "string"
|
|
11098
11098
|
},
|
|
11099
11099
|
{
|
|
@@ -11130,7 +11130,7 @@
|
|
|
11130
11130
|
{
|
|
11131
11131
|
"name": "description",
|
|
11132
11132
|
"attribute": "description",
|
|
11133
|
-
"description": "
|
|
11133
|
+
"description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
|
|
11134
11134
|
"type": "string"
|
|
11135
11135
|
},
|
|
11136
11136
|
{
|
|
@@ -12334,7 +12334,7 @@
|
|
|
12334
12334
|
},
|
|
12335
12335
|
{
|
|
12336
12336
|
"name": "description",
|
|
12337
|
-
"description": "
|
|
12337
|
+
"description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
|
|
12338
12338
|
"type": "string"
|
|
12339
12339
|
},
|
|
12340
12340
|
{
|
|
@@ -12367,7 +12367,7 @@
|
|
|
12367
12367
|
{
|
|
12368
12368
|
"name": "description",
|
|
12369
12369
|
"attribute": "description",
|
|
12370
|
-
"description": "
|
|
12370
|
+
"description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
|
|
12371
12371
|
"type": "string"
|
|
12372
12372
|
},
|
|
12373
12373
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.27.
|
|
3
|
+
"version": "3.27.8",
|
|
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",
|