@brightspace-ui/core 1.176.5 → 1.177.0
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.
|
@@ -24,6 +24,21 @@ The `d2l-count-badge` element is a web component to display a number count, eith
|
|
|
24
24
|
| `type`, default: `count` | String | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
|
|
25
25
|
| `max-digits`, default: `2` when `type="notification"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and no limit for `"count"` type.
|
|
26
26
|
| `hide-zero`, default: `false` | Boolean | Optionally choose not to show the count badge when the number is zero. |
|
|
27
|
+
| `text`, required | String | Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled. |
|
|
28
|
+
| `tab-stop`, default: `false` | Boolean | Optionally choose to make the badge a tab stop. |
|
|
29
|
+
| `announce-changes`, default: `false` | Boolean | Optionally choose to announce changes to the badge with an aria-live region. If the text property is changed, the text will be read by screen-readers. |
|
|
30
|
+
| `has-tooltip`, default: `false` | Boolean | Optionally choose to have a tooltip below the badge. |
|
|
31
|
+
|
|
32
|
+
### Accessibility Properties
|
|
33
|
+
|
|
34
|
+
To make your `d2l-count-badge` accessible, use the following properties when applicable:
|
|
35
|
+
|
|
36
|
+
| Attribute | Description |
|
|
37
|
+
|--|--|
|
|
38
|
+
| `text`, required | Only the text will be read by screen-readers (not the number), so include the number in the text. |
|
|
39
|
+
| `tab-stop` | A tab stop allows screen-reader users to easily tab to the badge. Otherwise, screen-reader users will need to arrow through to the badge. |
|
|
40
|
+
| `announce-changes` | Use "announce-changes" if screen-reader users should be notified that the badge has been updated, such as a new notification. The "text" property will be read as soon as the screen-reader is idle. |
|
|
41
|
+
| `has-tooltip` | The tooltip will be visible on hover/tab-stop, and read out by screen-readers. |
|
|
27
42
|
|
|
28
43
|
## Future Enhancements
|
|
29
44
|
|
|
@@ -1,18 +1,53 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
|
+
import '../tooltip/tooltip.js';
|
|
2
3
|
import { css, html, LitElement } from 'lit-element/lit-element.js';
|
|
4
|
+
import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
5
|
+
import { ifDefined } from 'lit-html/directives/if-defined.js';
|
|
6
|
+
import { offscreenStyles } from '../offscreen/offscreen.js';
|
|
3
7
|
import { RtlMixin } from '../../mixins/rtl-mixin.js';
|
|
4
8
|
|
|
5
9
|
class CountBadge extends RtlMixin(LitElement) {
|
|
6
10
|
|
|
7
11
|
static get properties() {
|
|
8
12
|
return {
|
|
13
|
+
/**
|
|
14
|
+
* Optionally choose to announce changes to the badge with an aria-live region. If the number property is changed, the text will be read by screenreaders. Defaults to false.
|
|
15
|
+
* @type {boolean}
|
|
16
|
+
*/
|
|
17
|
+
announceChanges: {
|
|
18
|
+
type: Boolean,
|
|
19
|
+
attribute: 'announce-changes'
|
|
20
|
+
},
|
|
21
|
+
/**
|
|
22
|
+
* Optionally add a tooltip on the badge. Defaults to false.
|
|
23
|
+
* @type {boolean}
|
|
24
|
+
*/
|
|
25
|
+
hasTooltip: {
|
|
26
|
+
type: Boolean,
|
|
27
|
+
attribute: 'has-tooltip'
|
|
28
|
+
},
|
|
29
|
+
/**
|
|
30
|
+
* Optionally choose to not render the count badge when the number is zero. Defaults to false.
|
|
31
|
+
* @type {boolean}
|
|
32
|
+
*/
|
|
33
|
+
hideZero: {
|
|
34
|
+
type: Boolean,
|
|
35
|
+
attribute: 'hide-zero'
|
|
36
|
+
},
|
|
37
|
+
/**
|
|
38
|
+
* Optionally specify a digit limit, after which numbers are truncated. Defaults to two for "notification" type and no limit for "count" type.
|
|
39
|
+
* @type {number}
|
|
40
|
+
*/
|
|
41
|
+
maxDigits: {
|
|
42
|
+
type: Number,
|
|
43
|
+
attribute: 'max-digits'
|
|
44
|
+
},
|
|
9
45
|
/**
|
|
10
46
|
* The number to be displayed on the badge. Must be a positive integer.
|
|
11
47
|
* @type {number}
|
|
12
48
|
*/
|
|
13
49
|
number: {
|
|
14
50
|
type: Number,
|
|
15
|
-
reflect: true,
|
|
16
51
|
attribute: 'number'
|
|
17
52
|
},
|
|
18
53
|
/**
|
|
@@ -25,37 +60,34 @@ class CountBadge extends RtlMixin(LitElement) {
|
|
|
25
60
|
attribute: 'size'
|
|
26
61
|
},
|
|
27
62
|
/**
|
|
28
|
-
*
|
|
29
|
-
* @type {
|
|
63
|
+
* Optionally choose to add a tab stop to the badge. Defaults to false.
|
|
64
|
+
* @type {boolean}
|
|
30
65
|
*/
|
|
31
|
-
|
|
32
|
-
type:
|
|
33
|
-
|
|
34
|
-
attribute: 'type'
|
|
66
|
+
tabStop: {
|
|
67
|
+
type: Boolean,
|
|
68
|
+
attribute: 'tab-stop'
|
|
35
69
|
},
|
|
36
70
|
/**
|
|
37
|
-
*
|
|
38
|
-
* @type {
|
|
71
|
+
* * Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.
|
|
72
|
+
* @type {string}
|
|
39
73
|
*/
|
|
40
|
-
|
|
41
|
-
type:
|
|
42
|
-
reflect: true,
|
|
43
|
-
attribute: 'max-digits'
|
|
74
|
+
text: {
|
|
75
|
+
type: String
|
|
44
76
|
},
|
|
45
77
|
/**
|
|
46
|
-
*
|
|
47
|
-
* @type {
|
|
78
|
+
* The type of the badge. Defaults to "count".
|
|
79
|
+
* @type {'count'|'notification'}
|
|
48
80
|
*/
|
|
49
|
-
|
|
50
|
-
type:
|
|
81
|
+
type: {
|
|
82
|
+
type: String,
|
|
51
83
|
reflect: true,
|
|
52
|
-
attribute: '
|
|
53
|
-
}
|
|
84
|
+
attribute: 'type'
|
|
85
|
+
}
|
|
54
86
|
};
|
|
55
87
|
}
|
|
56
88
|
|
|
57
89
|
static get styles() {
|
|
58
|
-
return [ css`
|
|
90
|
+
return [offscreenStyles, css`
|
|
59
91
|
:host([hidden]) {
|
|
60
92
|
display: none;
|
|
61
93
|
}
|
|
@@ -112,9 +144,16 @@ class CountBadge extends RtlMixin(LitElement) {
|
|
|
112
144
|
|
|
113
145
|
constructor() {
|
|
114
146
|
super();
|
|
115
|
-
this.
|
|
116
|
-
this.
|
|
147
|
+
this.announceChanges = false;
|
|
148
|
+
this.hasTooltip = false;
|
|
117
149
|
this.hideZero = false;
|
|
150
|
+
this.size = 'small';
|
|
151
|
+
this.tabStop = false;
|
|
152
|
+
this.text = '';
|
|
153
|
+
this.type = 'count';
|
|
154
|
+
|
|
155
|
+
this._badgeId = getUniqueId();
|
|
156
|
+
this._textId = getUniqueId();
|
|
118
157
|
}
|
|
119
158
|
|
|
120
159
|
connectedCallback() {
|
|
@@ -134,7 +173,17 @@ class CountBadge extends RtlMixin(LitElement) {
|
|
|
134
173
|
numberString = `${'9'.repeat(this.maxDigits)}+`;
|
|
135
174
|
}
|
|
136
175
|
return html`
|
|
137
|
-
<div
|
|
176
|
+
<div
|
|
177
|
+
class="d2l-count-badge-number"
|
|
178
|
+
id="${this._badgeId}"
|
|
179
|
+
tabindex="${ifDefined(this.tabStop || this.hasTooltip ? '0' : undefined)}"
|
|
180
|
+
aria-labelledby="${ifDefined(this.hasTooltip ? undefined : this._textId)}">
|
|
181
|
+
<div aria-hidden="true">${numberString}</div>
|
|
182
|
+
${this.hasTooltip ?
|
|
183
|
+
html`<d2l-tooltip id="${this._textId}" for="${this._badgeId}" aria-live="${this.announceChanges ? 'polite' : 'off'}">${this.text}</d2l-tooltip>`
|
|
184
|
+
: html`<span id="${this._textId}" class="d2l-offscreen" aria-live="${this.announceChanges ? 'polite' : 'off'}">"${this.text}"</span>`}
|
|
185
|
+
</div>
|
|
186
|
+
`;
|
|
138
187
|
}
|
|
139
188
|
}
|
|
140
189
|
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
<script type="module">
|
|
10
10
|
import '../../demo/demo-page.js';
|
|
11
11
|
import '../count-badge.js';
|
|
12
|
+
import '../../button/button.js';
|
|
12
13
|
</script>
|
|
13
14
|
</head>
|
|
14
15
|
<body unresolved>
|
|
@@ -17,22 +18,43 @@
|
|
|
17
18
|
<h2>Small Notification Badge</h2>
|
|
18
19
|
<d2l-demo-snippet>
|
|
19
20
|
<template>
|
|
20
|
-
<d2l-count-badge size="small" type="notification" number="1"></d2l-count-badge>
|
|
21
|
-
<d2l-count-badge size="small" type="notification" number="10"></d2l-count-badge>
|
|
22
|
-
<d2l-count-badge size="small" type="notification" number="100"></d2l-count-badge>
|
|
21
|
+
<d2l-count-badge size="small" tab-stop text=" 1 new notification." type="notification" number="1"></d2l-count-badge>
|
|
22
|
+
<d2l-count-badge size="small" text="10 new notifications." type="notification" number="10"></d2l-count-badge>
|
|
23
|
+
<d2l-count-badge size="small" text="100 new notifications." type="notification" number="100"></d2l-count-badge>
|
|
24
|
+
</template>
|
|
25
|
+
</d2l-demo-snippet>
|
|
26
|
+
|
|
27
|
+
<h2>Small Notification Badge with live region</h2>
|
|
28
|
+
<d2l-demo-snippet>
|
|
29
|
+
<template>
|
|
30
|
+
<d2l-count-badge id="badge-announce-changes"size="small" announce-changes tab-stop text=" 1 new notification." type="notification" number="1"></d2l-count-badge>
|
|
31
|
+
<d2l-button id="increment-count">Increment Count</d2l-button>
|
|
23
32
|
</template>
|
|
24
33
|
</d2l-demo-snippet>
|
|
25
34
|
|
|
26
35
|
<h2>Large Count Badge</h2>
|
|
27
36
|
<d2l-demo-snippet>
|
|
28
37
|
<template>
|
|
29
|
-
<d2l-count-badge size="large" type="count" number="1"></d2l-count-badge>
|
|
30
|
-
<d2l-count-badge size="large" type="count" number="10"></d2l-count-badge>
|
|
31
|
-
<d2l-count-badge size="large" type="count" number="100"></d2l-count-badge>
|
|
32
|
-
<d2l-count-badge size="large" type="count" number="777777"></d2l-count-badge>
|
|
33
|
-
<d2l-count-badge size="large" type="count" number="777777" max-digits="5"></d2l-count-badge>
|
|
38
|
+
<d2l-count-badge size="large" text="1 new notification." type="count" number="1"></d2l-count-badge>
|
|
39
|
+
<d2l-count-badge size="large" text="10 new notifications." type="count" number="10"></d2l-count-badge>
|
|
40
|
+
<d2l-count-badge size="large" text="100 new notifications." type="count" number="100"></d2l-count-badge>
|
|
41
|
+
<d2l-count-badge size="large" text="777777 new notifications." type="count" number="777777"></d2l-count-badge>
|
|
42
|
+
<d2l-count-badge size="large" text="777777 new notifications."type="count" number="777777" max-digits="5"></d2l-count-badge>
|
|
43
|
+
</template>
|
|
44
|
+
</d2l-demo-snippet>
|
|
45
|
+
|
|
46
|
+
<h2>Small Notification Badge with Tooltip</h2>
|
|
47
|
+
<d2l-demo-snippet>
|
|
48
|
+
<template>
|
|
49
|
+
<d2l-count-badge size="small" has-tooltip text=" 3 new notification." type="notification" number="1"></d2l-count-badge>
|
|
34
50
|
</template>
|
|
35
51
|
</d2l-demo-snippet>
|
|
36
52
|
</d2l-demo-page>
|
|
53
|
+
<script type="module">
|
|
54
|
+
document.getElementById('increment-count').addEventListener('click', () => {
|
|
55
|
+
document.getElementById('badge-announce-changes').number += 1;
|
|
56
|
+
document.getElementById('badge-announce-changes').text = `${document.getElementById('badge-announce-changes').number} new notifications.`;
|
|
57
|
+
});
|
|
58
|
+
</script>
|
|
37
59
|
</body>
|
|
38
60
|
</html>
|
|
@@ -213,11 +213,12 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
|
|
|
213
213
|
}
|
|
214
214
|
return this._dimensions.map((dimension) => {
|
|
215
215
|
const builtDimension = this._buildDimension(dimension);
|
|
216
|
-
const
|
|
217
|
-
|
|
216
|
+
const countBadgeId = `filters-applied-count-${dimension.key}`;
|
|
217
|
+
const filtersAppliedText = `${this.localize('components.filter.filterCountDescription', { number: dimension.appliedCount })}`;
|
|
218
|
+
return html`<d2l-menu-item text="${dimension.text}" description="${dimension.text}." aria-describedby="${countBadgeId}">
|
|
218
219
|
${builtDimension}
|
|
219
220
|
<div slot="supporting">
|
|
220
|
-
<d2l-count-badge number="${dimension.appliedCount}" max-digits="2" hide-zero></d2l-count-badge>
|
|
221
|
+
<d2l-count-badge id="${countBadgeId}" number="${dimension.appliedCount}" max-digits="2" text="${filtersAppliedText}" hide-zero></d2l-count-badge>
|
|
221
222
|
</div>
|
|
222
223
|
</d2l-menu-item>`;
|
|
223
224
|
});
|
package/custom-elements.json
CHANGED
|
@@ -1008,21 +1008,33 @@
|
|
|
1008
1008
|
"name": "d2l-count-badge",
|
|
1009
1009
|
"path": "./components/count-badge/count-badge.js",
|
|
1010
1010
|
"attributes": [
|
|
1011
|
+
{
|
|
1012
|
+
"name": "max-digits",
|
|
1013
|
+
"description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
|
|
1014
|
+
"type": "number"
|
|
1015
|
+
},
|
|
1011
1016
|
{
|
|
1012
1017
|
"name": "number",
|
|
1013
1018
|
"description": "The number to be displayed on the badge. Must be a positive integer.",
|
|
1014
1019
|
"type": "number"
|
|
1015
1020
|
},
|
|
1016
1021
|
{
|
|
1017
|
-
"name": "
|
|
1018
|
-
"description": "Optionally
|
|
1019
|
-
"type": "
|
|
1022
|
+
"name": "announce-changes",
|
|
1023
|
+
"description": "Optionally choose to announce changes to the badge with an aria-live region. If the number property is changed, the text will be read by screenreaders. Defaults to false.",
|
|
1024
|
+
"type": "boolean",
|
|
1025
|
+
"default": "false"
|
|
1020
1026
|
},
|
|
1021
1027
|
{
|
|
1022
|
-
"name": "
|
|
1023
|
-
"description": "
|
|
1024
|
-
"type": "
|
|
1025
|
-
"default": "
|
|
1028
|
+
"name": "has-tooltip",
|
|
1029
|
+
"description": "Optionally add a tooltip on the badge. Defaults to false.",
|
|
1030
|
+
"type": "boolean",
|
|
1031
|
+
"default": "false"
|
|
1032
|
+
},
|
|
1033
|
+
{
|
|
1034
|
+
"name": "hide-zero",
|
|
1035
|
+
"description": "Optionally choose to not render the count badge when the number is zero. Defaults to false.",
|
|
1036
|
+
"type": "boolean",
|
|
1037
|
+
"default": "false"
|
|
1026
1038
|
},
|
|
1027
1039
|
{
|
|
1028
1040
|
"name": "size",
|
|
@@ -1031,13 +1043,31 @@
|
|
|
1031
1043
|
"default": "\"small\""
|
|
1032
1044
|
},
|
|
1033
1045
|
{
|
|
1034
|
-
"name": "
|
|
1035
|
-
"description": "Optionally choose to
|
|
1046
|
+
"name": "tab-stop",
|
|
1047
|
+
"description": "Optionally choose to add a tab stop to the badge. Defaults to false.",
|
|
1036
1048
|
"type": "boolean",
|
|
1037
1049
|
"default": "false"
|
|
1050
|
+
},
|
|
1051
|
+
{
|
|
1052
|
+
"name": "text",
|
|
1053
|
+
"description": "* Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
|
|
1054
|
+
"type": "string",
|
|
1055
|
+
"default": "\"\""
|
|
1056
|
+
},
|
|
1057
|
+
{
|
|
1058
|
+
"name": "type",
|
|
1059
|
+
"description": "The type of the badge. Defaults to \"count\".",
|
|
1060
|
+
"type": "'count'|'notification'",
|
|
1061
|
+
"default": "\"count\""
|
|
1038
1062
|
}
|
|
1039
1063
|
],
|
|
1040
1064
|
"properties": [
|
|
1065
|
+
{
|
|
1066
|
+
"name": "maxDigits",
|
|
1067
|
+
"attribute": "max-digits",
|
|
1068
|
+
"description": "Optionally specify a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and no limit for \"count\" type.",
|
|
1069
|
+
"type": "number"
|
|
1070
|
+
},
|
|
1041
1071
|
{
|
|
1042
1072
|
"name": "number",
|
|
1043
1073
|
"attribute": "number",
|
|
@@ -1045,17 +1075,25 @@
|
|
|
1045
1075
|
"type": "number"
|
|
1046
1076
|
},
|
|
1047
1077
|
{
|
|
1048
|
-
"name": "
|
|
1049
|
-
"attribute": "
|
|
1050
|
-
"description": "Optionally
|
|
1051
|
-
"type": "
|
|
1078
|
+
"name": "announceChanges",
|
|
1079
|
+
"attribute": "announce-changes",
|
|
1080
|
+
"description": "Optionally choose to announce changes to the badge with an aria-live region. If the number property is changed, the text will be read by screenreaders. Defaults to false.",
|
|
1081
|
+
"type": "boolean",
|
|
1082
|
+
"default": "false"
|
|
1052
1083
|
},
|
|
1053
1084
|
{
|
|
1054
|
-
"name": "
|
|
1055
|
-
"attribute": "
|
|
1056
|
-
"description": "
|
|
1057
|
-
"type": "
|
|
1058
|
-
"default": "
|
|
1085
|
+
"name": "hasTooltip",
|
|
1086
|
+
"attribute": "has-tooltip",
|
|
1087
|
+
"description": "Optionally add a tooltip on the badge. Defaults to false.",
|
|
1088
|
+
"type": "boolean",
|
|
1089
|
+
"default": "false"
|
|
1090
|
+
},
|
|
1091
|
+
{
|
|
1092
|
+
"name": "hideZero",
|
|
1093
|
+
"attribute": "hide-zero",
|
|
1094
|
+
"description": "Optionally choose to not render the count badge when the number is zero. Defaults to false.",
|
|
1095
|
+
"type": "boolean",
|
|
1096
|
+
"default": "false"
|
|
1059
1097
|
},
|
|
1060
1098
|
{
|
|
1061
1099
|
"name": "size",
|
|
@@ -1065,11 +1103,25 @@
|
|
|
1065
1103
|
"default": "\"small\""
|
|
1066
1104
|
},
|
|
1067
1105
|
{
|
|
1068
|
-
"name": "
|
|
1069
|
-
"attribute": "
|
|
1070
|
-
"description": "Optionally choose to
|
|
1106
|
+
"name": "tabStop",
|
|
1107
|
+
"attribute": "tab-stop",
|
|
1108
|
+
"description": "Optionally choose to add a tab stop to the badge. Defaults to false.",
|
|
1071
1109
|
"type": "boolean",
|
|
1072
1110
|
"default": "false"
|
|
1111
|
+
},
|
|
1112
|
+
{
|
|
1113
|
+
"name": "text",
|
|
1114
|
+
"attribute": "text",
|
|
1115
|
+
"description": "* Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
|
|
1116
|
+
"type": "string",
|
|
1117
|
+
"default": "\"\""
|
|
1118
|
+
},
|
|
1119
|
+
{
|
|
1120
|
+
"name": "type",
|
|
1121
|
+
"attribute": "type",
|
|
1122
|
+
"description": "The type of the badge. Defaults to \"count\".",
|
|
1123
|
+
"type": "'count'|'notification'",
|
|
1124
|
+
"default": "\"count\""
|
|
1073
1125
|
}
|
|
1074
1126
|
]
|
|
1075
1127
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.177.0",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"repository": "https://github.com/BrightspaceUI/core.git",
|
|
6
6
|
"publishConfig": {
|