@brightspace-ui/core 3.72.3 → 3.73.0
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -28,124 +28,120 @@ Breadcrumbs are a way-finding tool that helps users understand where they are w
|
|
|
28
28
|
<!-- docs: end donts -->
|
|
29
29
|
<!-- docs: end best practices -->
|
|
30
30
|
|
|
31
|
-
##
|
|
32
|
-
|
|
33
|
-
Breadcrumbs that overflow their container will appear to fade at the edge.
|
|
31
|
+
## Breadcrumbs [d2l-breadcrumbs]
|
|
34
32
|
|
|
35
|
-
<!-- docs: demo display:block -->
|
|
33
|
+
<!-- docs: demo code properties name:d2l-breadcrumbs sandboxTitle:'Breadcrumbs' display:block -->
|
|
36
34
|
```html
|
|
37
35
|
<script type="module">
|
|
38
36
|
import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
|
|
39
37
|
</script>
|
|
40
38
|
<d2l-breadcrumbs>
|
|
41
|
-
<d2l-breadcrumb text="
|
|
42
|
-
<d2l-breadcrumb text="
|
|
43
|
-
<d2l-breadcrumb text="
|
|
44
|
-
<d2l-breadcrumb text="The Comedies, Tragedies, and Histories" href="#"></d2l-breadcrumb>
|
|
39
|
+
<d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
|
|
40
|
+
<d2l-breadcrumb text="Item 2" href="#"></d2l-breadcrumb>
|
|
41
|
+
<d2l-breadcrumb text="Item 3" href="#"></d2l-breadcrumb>
|
|
45
42
|
</d2l-breadcrumbs>
|
|
46
43
|
```
|
|
47
44
|
|
|
48
|
-
|
|
45
|
+
<!-- docs: start hidden content -->
|
|
46
|
+
### Properties
|
|
49
47
|
|
|
50
|
-
|
|
48
|
+
| Property | Type | Description |
|
|
49
|
+
|--|--|--|
|
|
50
|
+
| `compact` | Boolean | Renders in compact mode, displaying only the last item |
|
|
51
|
+
<!-- docs: end hidden content -->
|
|
51
52
|
|
|
52
|
-
|
|
53
|
+
## Breadcrumb (child) [d2l-breadcrumb]
|
|
53
54
|
|
|
54
|
-
<!-- docs: demo code display:block -->
|
|
55
|
+
<!-- docs: demo code properties name:d2l-breadcrumb sandboxTitle:'Breadcrumb' display:block -->
|
|
55
56
|
```html
|
|
56
57
|
<script type="module">
|
|
57
58
|
import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
|
|
58
59
|
</script>
|
|
59
|
-
<d2l-breadcrumbs
|
|
60
|
-
<d2l-breadcrumb text="
|
|
61
|
-
<d2l-breadcrumb text="Truncate Basic Item 2" href="#"></d2l-breadcrumb>
|
|
60
|
+
<d2l-breadcrumbs>
|
|
61
|
+
<d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
|
|
62
62
|
</d2l-breadcrumbs>
|
|
63
63
|
```
|
|
64
64
|
|
|
65
|
-
|
|
65
|
+
<!-- docs: start hidden content -->
|
|
66
|
+
### Properties
|
|
66
67
|
|
|
67
|
-
|
|
68
|
+
| Property | Type | Description |
|
|
69
|
+
|--|--|--|
|
|
70
|
+
| `text` | String, required | The text of the breadcrumb link |
|
|
71
|
+
| `aria-label` | String | ARIA label for the breadcrumb, used if `text` does not provide enough context for screen reader users |
|
|
72
|
+
| `href` | String | The Url that breadcrumb is pointing to |
|
|
73
|
+
| `target` | String | Target of the breadcrumb item |
|
|
74
|
+
<!-- docs: end hidden content -->
|
|
68
75
|
|
|
69
|
-
|
|
76
|
+
## Current Page [d2l-breadcrumb-current-page]
|
|
77
|
+
|
|
78
|
+
Only include the current page in the breadcrumb if your page or view does not have a visible heading. You will notice that some older pages or tools in Brightspace still display the current page as the last breadcrumb despite having a visible page heading, but this is now a legacy pattern.
|
|
79
|
+
|
|
80
|
+
<!-- docs: demo code properties name:d2l-breadcrumb-current-page sandboxTitle:'Current Page Breadcrumb' display:block -->
|
|
70
81
|
```html
|
|
71
82
|
<script type="module">
|
|
72
83
|
import '@brightspace-ui/core/components/breadcrumbs/breadcrumb-current-page.js';
|
|
73
84
|
import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
|
|
74
85
|
</script>
|
|
75
|
-
<d2l-breadcrumbs
|
|
86
|
+
<d2l-breadcrumbs>
|
|
76
87
|
<d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
|
|
77
88
|
<d2l-breadcrumb text="Item 2" href="#"></d2l-breadcrumb>
|
|
78
89
|
<d2l-breadcrumb-current-page text="Current Page"></d2l-breadcrumb-current-page>
|
|
79
90
|
</d2l-breadcrumbs>
|
|
80
91
|
```
|
|
81
92
|
|
|
82
|
-
##
|
|
93
|
+
## Responsive Behavior
|
|
83
94
|
|
|
84
|
-
|
|
95
|
+
Breadcrumbs that overflow their container will appear to fade at the edge, as in this example:
|
|
96
|
+
|
|
97
|
+
<!-- docs: demo display:block -->
|
|
85
98
|
```html
|
|
86
99
|
<script type="module">
|
|
87
100
|
import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
|
|
88
101
|
</script>
|
|
89
102
|
<d2l-breadcrumbs>
|
|
90
|
-
<d2l-breadcrumb text="
|
|
91
|
-
<d2l-breadcrumb text="
|
|
92
|
-
<d2l-breadcrumb text="
|
|
103
|
+
<d2l-breadcrumb text="Table of Contents" href="#"></d2l-breadcrumb>
|
|
104
|
+
<d2l-breadcrumb text="Unit 1: Shakespeare" href="#"></d2l-breadcrumb>
|
|
105
|
+
<d2l-breadcrumb text="Lesson 1: Introduction" href="#"></d2l-breadcrumb>
|
|
106
|
+
<d2l-breadcrumb text="Sub-lesson 3: The Breadth of Shakespearean Literature" href="#"></d2l-breadcrumb>
|
|
107
|
+
<d2l-breadcrumb text="The Comedies, Tragedies, Histories, and Other Long Words" href="#"></d2l-breadcrumb>
|
|
93
108
|
</d2l-breadcrumbs>
|
|
94
109
|
```
|
|
95
110
|
|
|
96
|
-
|
|
97
|
-
### Properties
|
|
98
|
-
|
|
99
|
-
| Property | Type | Description |
|
|
100
|
-
|--|--|--|
|
|
101
|
-
| `compact` | Boolean | Indicates whether the component should render in compact mode |
|
|
102
|
-
<!-- docs: end hidden content -->
|
|
111
|
+
### Limited Width
|
|
103
112
|
|
|
104
|
-
|
|
113
|
+
Set a `max-width` to constrain breadcrumbs to a particular width:
|
|
105
114
|
|
|
106
|
-
<!-- docs: demo code
|
|
115
|
+
<!-- docs: demo code display:block -->
|
|
107
116
|
```html
|
|
108
117
|
<script type="module">
|
|
109
118
|
import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
|
|
110
119
|
</script>
|
|
111
|
-
<d2l-breadcrumbs>
|
|
112
|
-
<d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
|
|
120
|
+
<d2l-breadcrumbs style="max-width: 250px">
|
|
121
|
+
<d2l-breadcrumb text="Trucate Basic Item 1" href="#"></d2l-breadcrumb>
|
|
122
|
+
<d2l-breadcrumb text="Truncate Basic Item 2" href="#"></d2l-breadcrumb>
|
|
113
123
|
</d2l-breadcrumbs>
|
|
114
124
|
```
|
|
115
125
|
|
|
116
|
-
|
|
117
|
-
### Properties
|
|
118
|
-
|
|
119
|
-
| Property | Type | Description |
|
|
120
|
-
|--|--|--|
|
|
121
|
-
| `text` | String, required | Text of the breadcrumb item |
|
|
122
|
-
| `aria-label` | String | AriaLabel of breadcrumb item |
|
|
123
|
-
| `href` | String | Href of the breadcrumb item |
|
|
124
|
-
| `target` | String | Target of the breadcrumb item |
|
|
125
|
-
<!-- docs: end hidden content -->
|
|
126
|
-
|
|
127
|
-
### Accessibility Properties
|
|
128
|
-
|
|
129
|
-
To make your usage of `d2l-breadcrumb` (child) accessible, use the following attribute when applicable:
|
|
130
|
-
|
|
131
|
-
| Attribute | Description |
|
|
132
|
-
|---|---|
|
|
133
|
-
| `aria-label` | Acts as a primary label. Use if `text` does not provide enough context. |
|
|
134
|
-
|
|
135
|
-
## Current Page [d2l-breadcrumb-current-page]
|
|
126
|
+
### Compact Mode
|
|
136
127
|
|
|
137
|
-
|
|
128
|
+
Alternately, add the `compact` attribute to only display the last breadcrumb. The `d2l-breadcrumb-current-page` will be hidden:
|
|
138
129
|
|
|
139
|
-
<!-- docs: demo code
|
|
130
|
+
<!-- docs: demo code display:block -->
|
|
140
131
|
```html
|
|
141
132
|
<script type="module">
|
|
142
133
|
import '@brightspace-ui/core/components/breadcrumbs/breadcrumb-current-page.js';
|
|
143
134
|
import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
|
|
144
135
|
</script>
|
|
145
|
-
<d2l-breadcrumbs>
|
|
136
|
+
<d2l-breadcrumbs compact>
|
|
146
137
|
<d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
|
|
147
138
|
<d2l-breadcrumb text="Item 2" href="#"></d2l-breadcrumb>
|
|
148
139
|
<d2l-breadcrumb-current-page text="Current Page"></d2l-breadcrumb-current-page>
|
|
149
140
|
</d2l-breadcrumbs>
|
|
150
141
|
```
|
|
151
142
|
|
|
143
|
+
## Accessibility
|
|
144
|
+
|
|
145
|
+
Breadcrumbs adhere to [W3C's Breadcrumbs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/), so they are contained in a navigation landmark region with proper aria labelling and add `aria-current` to the final breadcrumb if it represents the [Current Page](#d2l-breadcrumb-current-page).
|
|
146
|
+
|
|
147
|
+
Note that we do not apply a `visited` style to breadcrumbs, since they reflect tool hiearchy and are part of the UI rather than part of the page content.
|
|
@@ -32,12 +32,12 @@ class Breadcrumb extends RtlMixin(FocusMixin(LitElement)) {
|
|
|
32
32
|
*/
|
|
33
33
|
target: { type: String, reflect: true },
|
|
34
34
|
/**
|
|
35
|
-
* REQUIRED: text of the breadcrumb link
|
|
35
|
+
* REQUIRED: The text of the breadcrumb link
|
|
36
36
|
* @type {string}
|
|
37
37
|
*/
|
|
38
38
|
text: { type: String, reflect: true },
|
|
39
39
|
/**
|
|
40
|
-
* ARIA label
|
|
40
|
+
* ACCESSIBILITY: ARIA label for the breadcrumb, used if `text` does not provide enough context for screen reader users
|
|
41
41
|
* @type {string}
|
|
42
42
|
*/
|
|
43
43
|
ariaLabel: { attribute: 'aria-label', type: String, reflect: true }
|
package/custom-elements.json
CHANGED
|
@@ -269,12 +269,12 @@
|
|
|
269
269
|
},
|
|
270
270
|
{
|
|
271
271
|
"name": "aria-label",
|
|
272
|
-
"description": "ARIA label
|
|
272
|
+
"description": "ACCESSIBILITY: ARIA label for the breadcrumb, used if `text` does not provide enough context for screen reader users",
|
|
273
273
|
"type": "string"
|
|
274
274
|
},
|
|
275
275
|
{
|
|
276
276
|
"name": "text",
|
|
277
|
-
"description": "REQUIRED: text of the breadcrumb link",
|
|
277
|
+
"description": "REQUIRED: The text of the breadcrumb link",
|
|
278
278
|
"type": "string",
|
|
279
279
|
"default": "\"\""
|
|
280
280
|
}
|
|
@@ -295,13 +295,13 @@
|
|
|
295
295
|
{
|
|
296
296
|
"name": "ariaLabel",
|
|
297
297
|
"attribute": "aria-label",
|
|
298
|
-
"description": "ARIA label
|
|
298
|
+
"description": "ACCESSIBILITY: ARIA label for the breadcrumb, used if `text` does not provide enough context for screen reader users",
|
|
299
299
|
"type": "string"
|
|
300
300
|
},
|
|
301
301
|
{
|
|
302
302
|
"name": "text",
|
|
303
303
|
"attribute": "text",
|
|
304
|
-
"description": "REQUIRED: text of the breadcrumb link",
|
|
304
|
+
"description": "REQUIRED: The text of the breadcrumb link",
|
|
305
305
|
"type": "string",
|
|
306
306
|
"default": "\"\""
|
|
307
307
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.73.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",
|