Skip to content

Commit aebd50a

Browse files
authored
Update site/content/docs/5.3/components/progress.md
1 parent ec0f3b7 commit aebd50a

1 file changed

Lines changed: 1 addition & 1 deletion

File tree

site/content/docs/5.3/components/progress.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ Add labels to your progress bars by placing text within the `.progress-bar`.
8080
Note that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]({{< docsref "/utilities/overflow" >}}).
8181

8282
{{< callout warning >}}
83-
**Accessibility warning:** Long labels may not be fully accessible with this method. As it relies on the text color having the right contrast ratio with both the `.progress` and `.progress-bar` background colors, your color palette could be incompatible with this approach.
83+
Labels longer than the progress bar within may not be fully accessible using this method because it relies on the text color having the correct contrast ratio with both the `.progress` and `.progress-bar` background colors. Use caution when implementing this example.
8484

8585
If the text can overlap the progress bar, we often recommend displaying the label outside of the progress bar for better accessibility.
8686
{{< /callout >}}

0 commit comments

Comments
 (0)