Skip to content

Commit

Permalink
Update content/patterns/slider/examples/slider-rating.html
Browse files Browse the repository at this point in the history
  • Loading branch information
andreancardona authored Dec 5, 2023
1 parent 474dc01 commit 3d642b2
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion content/patterns/slider/examples/slider-rating.html
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ <h2>Accessibility Features</h2>
<li>To highlight the interactive nature of the satisfaction rating, a focus ring appears around the group of rating options when the slider has focus and no rating value has been selected.</li>
<li>
To ensure the borders of the rating values and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content using a CSS media query selector (e.g. <code>@media (forced-colors: active)</code>) .
For example, the color of the rating value borders is set to match link foreground color of high contrast mode text by specifying the CSS <code>canvas</code> and <code>linkText</code> values for the <code>stroke</code> and <code>fill</code> properties of each inline SVG <code>rect</code> and <code>text</code> elements.
For example, the color of the rating value borders is set to match the link foreground color of high contrast mode text by specifying the CSS <code>canvas</code> and <code>linkText</code> values for the <code>stroke</code> and <code>fill</code> properties of each inline SVG <code>rect</code> and <code>text</code> elements.
If specific colors were used to specify the <code>stroke</code> and <code>fill</code> properties, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background.<br>
Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to the value <code>auto</code> for the <code>currentcolor</code> value to be updated in high contrast modes.
Some browsers do not use <code>auto</code> for the default value.</li>
Expand Down

0 comments on commit 3d642b2

Please sign in to comment.