Skip to content

Commit

Permalink
Combobox examples with list popups: Fix missing closing LI in accessi…
Browse files Browse the repository at this point in the history
…bility features section (pull #2079)
  • Loading branch information
nschonni committed Oct 31, 2021
1 parent e250d12 commit 7e997a0
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 21 deletions.
15 changes: 8 additions & 7 deletions examples/combobox/combobox-autocomplete-both.html
Expand Up @@ -147,13 +147,14 @@ <h2>Accessibility Features</h2>
When an element loses focus, its border changes from two pixels to two and padding is increased by two pixels.
</li>
</ul>
<li>
To ensure the inline SVG graphic used for the arrow in the open button has sufficient contrast with the background when high contrast settings change the color of text content,
CSS <code>forced-color-adjust</code> is set to <code>auto</code> on the <code>svg</code> element and and the <code>fill</code> attribute of the <code>polygon</code> element is set to <code>currentColor</code>.
This causes the colors of the <code>fill</code> of the polygon elements to be overridden by the high contrast color setting.
If <code>forced-color-adjust</code> were not used to override the colors specified for the <code>fill</code> property, the color would remain the same in high contrast mode, which could lead to insufficient contrast between the arrow and the background or even make it invisible if the color matched the high contrast mode background.<br>
Note: The explicit setting of <code>forced-color-adjust</code> is necessary because some browsers do not use <code>auto</code> as the default value for SVG graphics.
</li>
</li>
<li>
To ensure the inline SVG graphic used for the arrow in the open button has sufficient contrast with the background when high contrast settings change the color of text content,
CSS <code>forced-color-adjust</code> is set to <code>auto</code> on the <code>svg</code> element and and the <code>fill</code> attribute of the <code>polygon</code> element is set to <code>currentColor</code>.
This causes the colors of the <code>fill</code> of the polygon elements to be overridden by the high contrast color setting.
If <code>forced-color-adjust</code> were not used to override the colors specified for the <code>fill</code> property, the color would remain the same in high contrast mode, which could lead to insufficient contrast between the arrow and the background or even make it invisible if the color matched the high contrast mode background.<br>
Note: The explicit setting of <code>forced-color-adjust</code> is necessary because some browsers do not use <code>auto</code> as the default value for SVG graphics.
</li>
</ul>
</section>

Expand Down
15 changes: 8 additions & 7 deletions examples/combobox/combobox-autocomplete-list.html
Expand Up @@ -148,13 +148,14 @@ <h2>Accessibility Features</h2>
When an element loses focus, its border changes from two pixels to two and padding is increased by two pixels.
</li>
</ul>
<li>
To ensure the inline SVG graphic used for the arrow in the open button has sufficient contrast with the background when high contrast settings change the color of text content,
CSS <code>forced-color-adjust</code> is set to <code>auto</code> on the <code>svg</code> element and and the <code>fill</code> attribute of the <code>polygon</code> element is set to <code>currentColor</code>.
This causes the colors of the <code>fill</code> of the polygon elements to be overridden by the high contrast color setting.
If <code>forced-color-adjust</code> were not used to override the colors specified for the <code>fill</code> property, the color would remain the same in high contrast mode, which could lead to insufficient contrast between the arrow and the background or even make it invisible if the color matched the high contrast mode background.<br>
Note: The explicit setting of <code>forced-color-adjust</code> is necessary because some browsers do not use <code>auto</code> as the default value for SVG graphics.
</li>
</li>
<li>
To ensure the inline SVG graphic used for the arrow in the open button has sufficient contrast with the background when high contrast settings change the color of text content,
CSS <code>forced-color-adjust</code> is set to <code>auto</code> on the <code>svg</code> element and and the <code>fill</code> attribute of the <code>polygon</code> element is set to <code>currentColor</code>.
This causes the colors of the <code>fill</code> of the polygon elements to be overridden by the high contrast color setting.
If <code>forced-color-adjust</code> were not used to override the colors specified for the <code>fill</code> property, the color would remain the same in high contrast mode, which could lead to insufficient contrast between the arrow and the background or even make it invisible if the color matched the high contrast mode background.<br>
Note: The explicit setting of <code>forced-color-adjust</code> is necessary because some browsers do not use <code>auto</code> as the default value for SVG graphics.
</li>
</ul>
</section>

Expand Down
15 changes: 8 additions & 7 deletions examples/combobox/combobox-autocomplete-none.html
Expand Up @@ -103,13 +103,14 @@ <h2>Accessibility Features</h2>
When an element loses focus, its border changes from two pixels to two and padding is increased by two pixels.
</li>
</ul>
<li>
To ensure the inline SVG graphic used for the arrow in the open button has sufficient contrast with the background when high contrast settings change the color of text content,
CSS <code>forced-color-adjust</code> is set to <code>auto</code> on the <code>svg</code> element and and the <code>fill</code> attribute of the <code>polygon</code> element is set to <code>currentColor</code>.
This causes the colors of the <code>fill</code> of the polygon elements to be overridden by the high contrast color setting.
If <code>forced-color-adjust</code> were not used to override the colors specified for the <code>fill</code> property, the color would remain the same in high contrast mode, which could lead to insufficient contrast between the arrow and the background or even make it invisible if the color matched the high contrast mode background.<br>
Note: The explicit setting of <code>forced-color-adjust</code> is necessary because some browsers do not use <code>auto</code> as the default value for SVG graphics.
</li>
</li>
<li>
To ensure the inline SVG graphic used for the arrow in the open button has sufficient contrast with the background when high contrast settings change the color of text content,
CSS <code>forced-color-adjust</code> is set to <code>auto</code> on the <code>svg</code> element and and the <code>fill</code> attribute of the <code>polygon</code> element is set to <code>currentColor</code>.
This causes the colors of the <code>fill</code> of the polygon elements to be overridden by the high contrast color setting.
If <code>forced-color-adjust</code> were not used to override the colors specified for the <code>fill</code> property, the color would remain the same in high contrast mode, which could lead to insufficient contrast between the arrow and the background or even make it invisible if the color matched the high contrast mode background.<br>
Note: The explicit setting of <code>forced-color-adjust</code> is necessary because some browsers do not use <code>auto</code> as the default value for SVG graphics.
</li>
</ul>
</section>

Expand Down

0 comments on commit 7e997a0

Please sign in to comment.