@brightspace-ui/core 3.185.0 → 3.186.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.
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# Progress Bar
|
|
2
|
-
|
|
2
|
+
Use a progress bar to show the level of completion of a system process, such as downloading, uploading, or exporting.
|
|
3
|
+
|
|
4
|
+
## Best Practices
|
|
5
|
+
|
|
6
|
+
A progress bar shows that the user's request is being processed; it gives the user tangible feedback about the status of their request, and helps them understand how long they may have to wait.
|
|
7
|
+
|
|
8
|
+
<!-- docs: start best practices -->
|
|
9
|
+
<!-- docs: start dos -->
|
|
10
|
+
* Use a progress bar for requests that may take longer than a few seconds to complete
|
|
11
|
+
* For long or complex processes, change the `label` to indicate key stages like "Preparing" or "Finishing up"
|
|
12
|
+
* Unless providing other updates to screen readers, use `announce-label` so that changes to the `label` are heard by screen reader users
|
|
13
|
+
<!-- docs: end dos -->
|
|
14
|
+
|
|
15
|
+
<!-- docs: start donts -->
|
|
16
|
+
* Don't use this for requests that are usually very short, use a [loading spinner](../../components/loading-spinner/) instead
|
|
17
|
+
* Don't use it for scalar measurements like number of activities completed, use a [meter](../../components/meter/) instead
|
|
18
|
+
<!-- docs: end donts -->
|
|
19
|
+
<!-- docs: end best practices -->
|
|
3
20
|
|
|
4
21
|
## Progress Bar [d2l-progress]
|
|
5
22
|
|
|
@@ -52,3 +69,11 @@ Use the `announce-label` property to announce changes to the progress label. Thi
|
|
|
52
69
|
<button>Start Animation</button>
|
|
53
70
|
<d2l-progress label="Uploading..." announce-label></d2l-progress>
|
|
54
71
|
```
|
|
72
|
+
|
|
73
|
+
## Accessibility
|
|
74
|
+
|
|
75
|
+
The progress bar aligns with web standards by using the [progress](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress) element and by assigning `label` as the accessible label.
|
|
76
|
+
|
|
77
|
+
Note that using `label-hidden` or `value-hidden` will visibly hide the label or value, but they remain available to screen reader users, and developers should make sure to provide equivalent information to sighted users.
|
|
78
|
+
|
|
79
|
+
The `announce-label` property causes changes to the `label` to be announced for screen reader users using a polite live region. Unless meaningful updates are being provided in another way, `announce-label` should be leveraged by most progress bars since some screen readers are not great at updating users about progress changes unless the user places their virtual cursor on the progress bar itself.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.186.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",
|