@brightspace-ui/core 3.63.0 → 3.64.0
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -24,30 +24,21 @@ The `d2l-count-badge` element is a web component to display a number count, depe
|
|
|
24
24
|
</script>
|
|
25
25
|
<d2l-count-badge size="small" type="notification" text="100 new notifications" number="100" has-tooltip tab-stop></d2l-count-badge>
|
|
26
26
|
```
|
|
27
|
-
|
|
28
|
-
### Accessibility Properties
|
|
29
|
-
| Attribute | Description |
|
|
30
|
-
|---|---|
|
|
31
|
-
| `text` | REQUIRED: Only the text will be read by screen-readers (not the number), so include the number in the text. |
|
|
32
|
-
| `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. |
|
|
33
|
-
| `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. |
|
|
34
|
-
| `has-tooltip` | The tooltip will be visible on hover/tab-stop, and read out by screen-readers. |
|
|
35
|
-
|
|
36
27
|
<!-- docs: start hidden content -->
|
|
37
28
|
### Properties
|
|
38
29
|
|
|
39
30
|
| Property | Type | Description |
|
|
40
31
|
|---|---|---|
|
|
41
|
-
| `number` | Number, required | The number to display on the badge
|
|
42
|
-
| `size
|
|
43
|
-
| `type
|
|
44
|
-
| `max-digits
|
|
45
|
-
| `hide-zero
|
|
46
|
-
| `text
|
|
47
|
-
| `tab-stop
|
|
48
|
-
| `announce-changes
|
|
49
|
-
| `has-tooltip
|
|
50
|
-
| `focus-ring
|
|
32
|
+
| `number` | Number, required | The number to display on the badge; must be a positive integer |
|
|
33
|
+
| `size` | String, default: `small` | The size of the badge. Valid options are `"small"` and `"large"`. |
|
|
34
|
+
| `type` | String, default: `count` | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
|
|
35
|
+
| `max-digits` | Number, default: `2` when `type="notification"`, `5` when `type="count"` | Specifies a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and five for `"count"` type. Must be between 1-5.
|
|
36
|
+
| `hide-zero` | Boolean, default: `false` | Hides the count badge when `number` is zero |
|
|
37
|
+
| `text` | String, required | Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled |
|
|
38
|
+
| `tab-stop` | Boolean, default: `false` | Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge |
|
|
39
|
+
| `announce-changes` | Boolean, default: `false` | When `true`, changes to the badge will be announced to screen reader users |
|
|
40
|
+
| `has-tooltip` | Boolean, default: `false` | Adds a tooltip on the badge, which will be visible on hover/tab-stop, and read out by screen-readers |
|
|
41
|
+
| `focus-ring` | Boolean, default: `false` | Forces the focus ring around the badge. This property can be used to highlight the badge when the parent element is focused. |
|
|
51
42
|
<!-- docs: end hidden content -->
|
|
52
43
|
|
|
53
44
|
## Count Badge: Icon [d2l-count-badge-icon]
|
|
@@ -62,28 +53,30 @@ The `d2l-count-badge-icon` element is a web component to display a number count,
|
|
|
62
53
|
<d2l-count-badge-icon size="small" icon="tier1:gear" type="notification" text="100 new settings applied." number="100" tab-stop has-tooltip></d2l-count-badge-icon>
|
|
63
54
|
```
|
|
64
55
|
|
|
65
|
-
### Accessibility Properties
|
|
66
|
-
| Attribute | Description |
|
|
67
|
-
|---|---|
|
|
68
|
-
| `text` | REQUIRED: Only the text will be read by screen-readers (not the number), so include the number in the text. |
|
|
69
|
-
| `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. |
|
|
70
|
-
| `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. |
|
|
71
|
-
| `has-tooltip` | The tooltip will be visible on hover/tab-stop, and read out by screen-readers. |
|
|
72
|
-
|
|
73
56
|
<!-- docs: start hidden content -->
|
|
74
57
|
### Properties
|
|
75
58
|
|
|
76
59
|
| Property | Type | Description |
|
|
77
60
|
|--|--|--|
|
|
78
|
-
| `number` | Number |
|
|
79
|
-
| `icon` | String |
|
|
80
|
-
| `size
|
|
81
|
-
| `type
|
|
82
|
-
| `max-digits
|
|
83
|
-
| `hide-zero
|
|
84
|
-
| `text`
|
|
85
|
-
| `tab-stop
|
|
86
|
-
| `announce-changes
|
|
87
|
-
| `has-tooltip
|
|
88
|
-
| `focus-ring
|
|
61
|
+
| `number` | Number, required | The number to display on the badge; must be a positive integer |
|
|
62
|
+
| `icon` | String, required | [Preset icon key](../icons#preset-icons) (e.g. `tier1:gear`) |
|
|
63
|
+
| `size` | String, default: `small` | The size of the badge. Valid options are `"small"` and `"large"`. |
|
|
64
|
+
| `type` | String, default: `count` | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
|
|
65
|
+
| `max-digits` | Number, default: `2` when `type="notification"`, `5` when `type="count"` | Specifies a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and five for `"count"` type. Must be between 1-5.
|
|
66
|
+
| `hide-zero` | Boolean, default: `false` | Hides the count badge when `number` is zero |
|
|
67
|
+
| `text` | String, required | Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled |
|
|
68
|
+
| `tab-stop` | Boolean, default: `false` | Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge |
|
|
69
|
+
| `announce-changes` | Boolean, default: `false` | When `true`, changes to the badge will be announced to screen reader users |
|
|
70
|
+
| `has-tooltip` | Boolean, default: `false` | Adds a tooltip on the badge, which will be visible on hover/tab-stop, and read out by screen-readers |
|
|
71
|
+
| `focus-ring` | Boolean, default: `false` | Forces a focus ring around the badge. This property can be used to highlight the badge when the parent element is focused. |
|
|
89
72
|
<!-- docs: end hidden content -->
|
|
73
|
+
|
|
74
|
+
## Accessibility
|
|
75
|
+
|
|
76
|
+
Notable accessibility features:
|
|
77
|
+
- `tab-stop`:
|
|
78
|
+
- While non-interactive components traditionally shouldn't be focusable, this property greatly helps screen reader users find the the count badge, and removes the need to use the arrow keys to navigate to it
|
|
79
|
+
- This isn't needed if the optional tooltip is used, as the count-badge becomes focusable in order to display the tooltip
|
|
80
|
+
- `has-tooltip`:
|
|
81
|
+
- The optional tooltip makes use of the [`d2l-tooltip`](../../components/tooltip), which follows the [W3C best practices for Tooltips](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)
|
|
82
|
+
- This tooltip can help provide additional context, such as by providing the exact count badge number if it were to go above the limit set in `max-digits`
|
|
@@ -16,7 +16,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
|
|
|
16
16
|
static get properties() {
|
|
17
17
|
return {
|
|
18
18
|
/**
|
|
19
|
-
*
|
|
19
|
+
* ACCESSIBILITY: When `true`, changes to the badge will be announced to screen reader users
|
|
20
20
|
* @type {boolean}
|
|
21
21
|
*/
|
|
22
22
|
announceChanges: {
|
|
@@ -24,7 +24,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
|
|
|
24
24
|
attribute: 'announce-changes'
|
|
25
25
|
},
|
|
26
26
|
/**
|
|
27
|
-
*
|
|
27
|
+
* Forces the focus ring around the badge
|
|
28
28
|
* @type {boolean}
|
|
29
29
|
*/
|
|
30
30
|
forceFocusRing: {
|
|
@@ -33,7 +33,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
|
|
|
33
33
|
reflect: true
|
|
34
34
|
},
|
|
35
35
|
/**
|
|
36
|
-
*
|
|
36
|
+
* ACCESSIBILITY: Adds a tooltip on the badge, which will be visible on hover and keyboard interaction
|
|
37
37
|
* @type {boolean}
|
|
38
38
|
*/
|
|
39
39
|
hasTooltip: {
|
|
@@ -41,7 +41,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
|
|
|
41
41
|
attribute: 'has-tooltip'
|
|
42
42
|
},
|
|
43
43
|
/**
|
|
44
|
-
*
|
|
44
|
+
* Hides the count badge when `number` is zero
|
|
45
45
|
* @type {boolean}
|
|
46
46
|
*/
|
|
47
47
|
hideZero: {
|
|
@@ -49,8 +49,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
|
|
|
49
49
|
attribute: 'hide-zero'
|
|
50
50
|
},
|
|
51
51
|
/**
|
|
52
|
-
*
|
|
53
|
-
* Defaults to two for "notification" type and five for "count" type.
|
|
52
|
+
* Specifies a digit limit, after which numbers are truncated. Defaults to two for "notification" type and five for "count" type.
|
|
54
53
|
* @type {number}
|
|
55
54
|
*/
|
|
56
55
|
maxDigits: {
|
|
@@ -58,7 +57,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
|
|
|
58
57
|
attribute: 'max-digits'
|
|
59
58
|
},
|
|
60
59
|
/**
|
|
61
|
-
* REQUIRED: The number to be displayed on the badge
|
|
60
|
+
* REQUIRED: The number to be displayed on the badge; must be a positive integer
|
|
62
61
|
* @type {number}
|
|
63
62
|
*/
|
|
64
63
|
number: {
|
|
@@ -66,7 +65,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
|
|
|
66
65
|
attribute: 'number'
|
|
67
66
|
},
|
|
68
67
|
/**
|
|
69
|
-
* The size of the badge
|
|
68
|
+
* The size of the badge
|
|
70
69
|
* @type {'small'|'large'}
|
|
71
70
|
*/
|
|
72
71
|
size: {
|
|
@@ -75,7 +74,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
|
|
|
75
74
|
attribute: 'size'
|
|
76
75
|
},
|
|
77
76
|
/**
|
|
78
|
-
*
|
|
77
|
+
* ACCESSIBILITY: Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge
|
|
79
78
|
* @type {boolean}
|
|
80
79
|
*/
|
|
81
80
|
tabStop: {
|
|
@@ -83,14 +82,14 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
|
|
|
83
82
|
attribute: 'tab-stop'
|
|
84
83
|
},
|
|
85
84
|
/**
|
|
86
|
-
* REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled
|
|
85
|
+
* ACCESSIBILITY: REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled
|
|
87
86
|
* @type {string}
|
|
88
87
|
*/
|
|
89
88
|
text: {
|
|
90
89
|
type: String
|
|
91
90
|
},
|
|
92
91
|
/**
|
|
93
|
-
* The type of the badge
|
|
92
|
+
* The type of the badge
|
|
94
93
|
* @type {'count'|'notification'}
|
|
95
94
|
*/
|
|
96
95
|
type: {
|
package/custom-elements.json
CHANGED
|
@@ -1516,59 +1516,59 @@
|
|
|
1516
1516
|
},
|
|
1517
1517
|
{
|
|
1518
1518
|
"name": "max-digits",
|
|
1519
|
-
"description": "
|
|
1519
|
+
"description": "Specifies a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and five for \"count\" type.",
|
|
1520
1520
|
"type": "number"
|
|
1521
1521
|
},
|
|
1522
1522
|
{
|
|
1523
1523
|
"name": "number",
|
|
1524
|
-
"description": "REQUIRED: The number to be displayed on the badge
|
|
1524
|
+
"description": "REQUIRED: The number to be displayed on the badge; must be a positive integer",
|
|
1525
1525
|
"type": "number"
|
|
1526
1526
|
},
|
|
1527
1527
|
{
|
|
1528
1528
|
"name": "announce-changes",
|
|
1529
|
-
"description": "
|
|
1529
|
+
"description": "ACCESSIBILITY: When `true`, changes to the badge will be announced to screen reader users",
|
|
1530
1530
|
"type": "boolean",
|
|
1531
1531
|
"default": "false"
|
|
1532
1532
|
},
|
|
1533
1533
|
{
|
|
1534
1534
|
"name": "focus-ring",
|
|
1535
|
-
"description": "
|
|
1535
|
+
"description": "Forces the focus ring around the badge",
|
|
1536
1536
|
"type": "boolean",
|
|
1537
1537
|
"default": "false"
|
|
1538
1538
|
},
|
|
1539
1539
|
{
|
|
1540
1540
|
"name": "has-tooltip",
|
|
1541
|
-
"description": "
|
|
1541
|
+
"description": "ACCESSIBILITY: Adds a tooltip on the badge, which will be visible on hover and keyboard interaction",
|
|
1542
1542
|
"type": "boolean",
|
|
1543
1543
|
"default": "false"
|
|
1544
1544
|
},
|
|
1545
1545
|
{
|
|
1546
1546
|
"name": "hide-zero",
|
|
1547
|
-
"description": "
|
|
1547
|
+
"description": "Hides the count badge when `number` is zero",
|
|
1548
1548
|
"type": "boolean",
|
|
1549
1549
|
"default": "false"
|
|
1550
1550
|
},
|
|
1551
1551
|
{
|
|
1552
1552
|
"name": "size",
|
|
1553
|
-
"description": "The size of the badge
|
|
1553
|
+
"description": "The size of the badge",
|
|
1554
1554
|
"type": "'small'|'large'",
|
|
1555
1555
|
"default": "\"small\""
|
|
1556
1556
|
},
|
|
1557
1557
|
{
|
|
1558
1558
|
"name": "tab-stop",
|
|
1559
|
-
"description": "
|
|
1559
|
+
"description": "ACCESSIBILITY: Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge",
|
|
1560
1560
|
"type": "boolean",
|
|
1561
1561
|
"default": "false"
|
|
1562
1562
|
},
|
|
1563
1563
|
{
|
|
1564
1564
|
"name": "text",
|
|
1565
|
-
"description": "REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled
|
|
1565
|
+
"description": "ACCESSIBILITY: REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled",
|
|
1566
1566
|
"type": "string",
|
|
1567
1567
|
"default": "\"\""
|
|
1568
1568
|
},
|
|
1569
1569
|
{
|
|
1570
1570
|
"name": "type",
|
|
1571
|
-
"description": "The type of the badge
|
|
1571
|
+
"description": "The type of the badge",
|
|
1572
1572
|
"type": "'count'|'notification'",
|
|
1573
1573
|
"default": "\"count\""
|
|
1574
1574
|
},
|
|
@@ -1588,68 +1588,68 @@
|
|
|
1588
1588
|
{
|
|
1589
1589
|
"name": "maxDigits",
|
|
1590
1590
|
"attribute": "max-digits",
|
|
1591
|
-
"description": "
|
|
1591
|
+
"description": "Specifies a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and five for \"count\" type.",
|
|
1592
1592
|
"type": "number"
|
|
1593
1593
|
},
|
|
1594
1594
|
{
|
|
1595
1595
|
"name": "number",
|
|
1596
1596
|
"attribute": "number",
|
|
1597
|
-
"description": "REQUIRED: The number to be displayed on the badge
|
|
1597
|
+
"description": "REQUIRED: The number to be displayed on the badge; must be a positive integer",
|
|
1598
1598
|
"type": "number"
|
|
1599
1599
|
},
|
|
1600
1600
|
{
|
|
1601
1601
|
"name": "announceChanges",
|
|
1602
1602
|
"attribute": "announce-changes",
|
|
1603
|
-
"description": "
|
|
1603
|
+
"description": "ACCESSIBILITY: When `true`, changes to the badge will be announced to screen reader users",
|
|
1604
1604
|
"type": "boolean",
|
|
1605
1605
|
"default": "false"
|
|
1606
1606
|
},
|
|
1607
1607
|
{
|
|
1608
1608
|
"name": "forceFocusRing",
|
|
1609
1609
|
"attribute": "focus-ring",
|
|
1610
|
-
"description": "
|
|
1610
|
+
"description": "Forces the focus ring around the badge",
|
|
1611
1611
|
"type": "boolean",
|
|
1612
1612
|
"default": "false"
|
|
1613
1613
|
},
|
|
1614
1614
|
{
|
|
1615
1615
|
"name": "hasTooltip",
|
|
1616
1616
|
"attribute": "has-tooltip",
|
|
1617
|
-
"description": "
|
|
1617
|
+
"description": "ACCESSIBILITY: Adds a tooltip on the badge, which will be visible on hover and keyboard interaction",
|
|
1618
1618
|
"type": "boolean",
|
|
1619
1619
|
"default": "false"
|
|
1620
1620
|
},
|
|
1621
1621
|
{
|
|
1622
1622
|
"name": "hideZero",
|
|
1623
1623
|
"attribute": "hide-zero",
|
|
1624
|
-
"description": "
|
|
1624
|
+
"description": "Hides the count badge when `number` is zero",
|
|
1625
1625
|
"type": "boolean",
|
|
1626
1626
|
"default": "false"
|
|
1627
1627
|
},
|
|
1628
1628
|
{
|
|
1629
1629
|
"name": "size",
|
|
1630
1630
|
"attribute": "size",
|
|
1631
|
-
"description": "The size of the badge
|
|
1631
|
+
"description": "The size of the badge",
|
|
1632
1632
|
"type": "'small'|'large'",
|
|
1633
1633
|
"default": "\"small\""
|
|
1634
1634
|
},
|
|
1635
1635
|
{
|
|
1636
1636
|
"name": "tabStop",
|
|
1637
1637
|
"attribute": "tab-stop",
|
|
1638
|
-
"description": "
|
|
1638
|
+
"description": "ACCESSIBILITY: Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge",
|
|
1639
1639
|
"type": "boolean",
|
|
1640
1640
|
"default": "false"
|
|
1641
1641
|
},
|
|
1642
1642
|
{
|
|
1643
1643
|
"name": "text",
|
|
1644
1644
|
"attribute": "text",
|
|
1645
|
-
"description": "REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled
|
|
1645
|
+
"description": "ACCESSIBILITY: REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled",
|
|
1646
1646
|
"type": "string",
|
|
1647
1647
|
"default": "\"\""
|
|
1648
1648
|
},
|
|
1649
1649
|
{
|
|
1650
1650
|
"name": "type",
|
|
1651
1651
|
"attribute": "type",
|
|
1652
|
-
"description": "The type of the badge
|
|
1652
|
+
"description": "The type of the badge",
|
|
1653
1653
|
"type": "'count'|'notification'",
|
|
1654
1654
|
"default": "\"count\""
|
|
1655
1655
|
},
|
|
@@ -1667,59 +1667,59 @@
|
|
|
1667
1667
|
"attributes": [
|
|
1668
1668
|
{
|
|
1669
1669
|
"name": "max-digits",
|
|
1670
|
-
"description": "
|
|
1670
|
+
"description": "Specifies a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and five for \"count\" type.",
|
|
1671
1671
|
"type": "number"
|
|
1672
1672
|
},
|
|
1673
1673
|
{
|
|
1674
1674
|
"name": "number",
|
|
1675
|
-
"description": "REQUIRED: The number to be displayed on the badge
|
|
1675
|
+
"description": "REQUIRED: The number to be displayed on the badge; must be a positive integer",
|
|
1676
1676
|
"type": "number"
|
|
1677
1677
|
},
|
|
1678
1678
|
{
|
|
1679
1679
|
"name": "announce-changes",
|
|
1680
|
-
"description": "
|
|
1680
|
+
"description": "ACCESSIBILITY: When `true`, changes to the badge will be announced to screen reader users",
|
|
1681
1681
|
"type": "boolean",
|
|
1682
1682
|
"default": "false"
|
|
1683
1683
|
},
|
|
1684
1684
|
{
|
|
1685
1685
|
"name": "focus-ring",
|
|
1686
|
-
"description": "
|
|
1686
|
+
"description": "Forces the focus ring around the badge",
|
|
1687
1687
|
"type": "boolean",
|
|
1688
1688
|
"default": "false"
|
|
1689
1689
|
},
|
|
1690
1690
|
{
|
|
1691
1691
|
"name": "has-tooltip",
|
|
1692
|
-
"description": "
|
|
1692
|
+
"description": "ACCESSIBILITY: Adds a tooltip on the badge, which will be visible on hover and keyboard interaction",
|
|
1693
1693
|
"type": "boolean",
|
|
1694
1694
|
"default": "false"
|
|
1695
1695
|
},
|
|
1696
1696
|
{
|
|
1697
1697
|
"name": "hide-zero",
|
|
1698
|
-
"description": "
|
|
1698
|
+
"description": "Hides the count badge when `number` is zero",
|
|
1699
1699
|
"type": "boolean",
|
|
1700
1700
|
"default": "false"
|
|
1701
1701
|
},
|
|
1702
1702
|
{
|
|
1703
1703
|
"name": "size",
|
|
1704
|
-
"description": "The size of the badge
|
|
1704
|
+
"description": "The size of the badge",
|
|
1705
1705
|
"type": "'small'|'large'",
|
|
1706
1706
|
"default": "\"small\""
|
|
1707
1707
|
},
|
|
1708
1708
|
{
|
|
1709
1709
|
"name": "tab-stop",
|
|
1710
|
-
"description": "
|
|
1710
|
+
"description": "ACCESSIBILITY: Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge",
|
|
1711
1711
|
"type": "boolean",
|
|
1712
1712
|
"default": "false"
|
|
1713
1713
|
},
|
|
1714
1714
|
{
|
|
1715
1715
|
"name": "text",
|
|
1716
|
-
"description": "REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled
|
|
1716
|
+
"description": "ACCESSIBILITY: REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled",
|
|
1717
1717
|
"type": "string",
|
|
1718
1718
|
"default": "\"\""
|
|
1719
1719
|
},
|
|
1720
1720
|
{
|
|
1721
1721
|
"name": "type",
|
|
1722
|
-
"description": "The type of the badge
|
|
1722
|
+
"description": "The type of the badge",
|
|
1723
1723
|
"type": "'count'|'notification'",
|
|
1724
1724
|
"default": "\"count\""
|
|
1725
1725
|
},
|
|
@@ -1733,68 +1733,68 @@
|
|
|
1733
1733
|
{
|
|
1734
1734
|
"name": "maxDigits",
|
|
1735
1735
|
"attribute": "max-digits",
|
|
1736
|
-
"description": "
|
|
1736
|
+
"description": "Specifies a digit limit, after which numbers are truncated. Defaults to two for \"notification\" type and five for \"count\" type.",
|
|
1737
1737
|
"type": "number"
|
|
1738
1738
|
},
|
|
1739
1739
|
{
|
|
1740
1740
|
"name": "number",
|
|
1741
1741
|
"attribute": "number",
|
|
1742
|
-
"description": "REQUIRED: The number to be displayed on the badge
|
|
1742
|
+
"description": "REQUIRED: The number to be displayed on the badge; must be a positive integer",
|
|
1743
1743
|
"type": "number"
|
|
1744
1744
|
},
|
|
1745
1745
|
{
|
|
1746
1746
|
"name": "announceChanges",
|
|
1747
1747
|
"attribute": "announce-changes",
|
|
1748
|
-
"description": "
|
|
1748
|
+
"description": "ACCESSIBILITY: When `true`, changes to the badge will be announced to screen reader users",
|
|
1749
1749
|
"type": "boolean",
|
|
1750
1750
|
"default": "false"
|
|
1751
1751
|
},
|
|
1752
1752
|
{
|
|
1753
1753
|
"name": "forceFocusRing",
|
|
1754
1754
|
"attribute": "focus-ring",
|
|
1755
|
-
"description": "
|
|
1755
|
+
"description": "Forces the focus ring around the badge",
|
|
1756
1756
|
"type": "boolean",
|
|
1757
1757
|
"default": "false"
|
|
1758
1758
|
},
|
|
1759
1759
|
{
|
|
1760
1760
|
"name": "hasTooltip",
|
|
1761
1761
|
"attribute": "has-tooltip",
|
|
1762
|
-
"description": "
|
|
1762
|
+
"description": "ACCESSIBILITY: Adds a tooltip on the badge, which will be visible on hover and keyboard interaction",
|
|
1763
1763
|
"type": "boolean",
|
|
1764
1764
|
"default": "false"
|
|
1765
1765
|
},
|
|
1766
1766
|
{
|
|
1767
1767
|
"name": "hideZero",
|
|
1768
1768
|
"attribute": "hide-zero",
|
|
1769
|
-
"description": "
|
|
1769
|
+
"description": "Hides the count badge when `number` is zero",
|
|
1770
1770
|
"type": "boolean",
|
|
1771
1771
|
"default": "false"
|
|
1772
1772
|
},
|
|
1773
1773
|
{
|
|
1774
1774
|
"name": "size",
|
|
1775
1775
|
"attribute": "size",
|
|
1776
|
-
"description": "The size of the badge
|
|
1776
|
+
"description": "The size of the badge",
|
|
1777
1777
|
"type": "'small'|'large'",
|
|
1778
1778
|
"default": "\"small\""
|
|
1779
1779
|
},
|
|
1780
1780
|
{
|
|
1781
1781
|
"name": "tabStop",
|
|
1782
1782
|
"attribute": "tab-stop",
|
|
1783
|
-
"description": "
|
|
1783
|
+
"description": "ACCESSIBILITY: Adds a tab stop to the badge, which allows screen reader and keyboard users to easily tab to the badge",
|
|
1784
1784
|
"type": "boolean",
|
|
1785
1785
|
"default": "false"
|
|
1786
1786
|
},
|
|
1787
1787
|
{
|
|
1788
1788
|
"name": "text",
|
|
1789
1789
|
"attribute": "text",
|
|
1790
|
-
"description": "REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled
|
|
1790
|
+
"description": "ACCESSIBILITY: REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled",
|
|
1791
1791
|
"type": "string",
|
|
1792
1792
|
"default": "\"\""
|
|
1793
1793
|
},
|
|
1794
1794
|
{
|
|
1795
1795
|
"name": "type",
|
|
1796
1796
|
"attribute": "type",
|
|
1797
|
-
"description": "The type of the badge
|
|
1797
|
+
"description": "The type of the badge",
|
|
1798
1798
|
"type": "'count'|'notification'",
|
|
1799
1799
|
"default": "\"count\""
|
|
1800
1800
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.64.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",
|