@brightspace-ui/core 3.27.6 → 3.27.8
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -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",
|