search

w3c / aria-practices

WAI-ARIA Authoring Practices Guide (APG)
https://www.w3.org/wai/aria/apg/
Other
1.21k stars 335 forks source link

Ratings Slider: Use buttontext instead of linktext system color in high contrast mode #3025

Closed jongund closed 2 months ago

jongund commented 4 months ago

I think the use of buttontext system color is a better choice than linktext for styling the slider when in Windows 10/11 high contrast modes. This change makes no difference on high contrast on macOS.

Preview of updated rating slider

WAI Preview Link (Last built on Tue, 04 Jun 2024 18:26:17 GMT).

mcking65 commented 3 months ago

@jongund

seems like there is accidental addition of an empty file named aria-practices

css-meeting-bot commented 3 months ago

The ARIA Authoring Practices (APG) Task Force just discussed Change high contrast system color in ratings slider.

The full IRC log of that discussion <jugglinmike> Topic: Change high contrast system color in ratings slider
<jugglinmike> github: https://github.com/w3c/aria-practices/pull/3025
<jugglinmike> jongund: I changed the system color link text to "button text". It just makes our widgets look more like form controls than links
<jugglinmike> s/button text/buttontext/
<jugglinmike> Matt_King: why are two files changed?
<jugglinmike> jongund: cspell checks CSS files for spelling
<jugglinmike> Matt_King: That seems undesirable
<jugglinmike> s/cspell/I also had to change the cspell configuration. cspell/
<jugglinmike> howard-e: I can look into that
<jugglinmike> Matt_King: Does this color change impact all contexts? Or only high-contrast mode?
<jugglinmike> jongund: Only high-contrast mode
<jugglinmike> jongund: Depending on how you test it, you don't necessarily need Windows
<jugglinmike> jongund: In Chrome, for instance, you can use the developer tools to simulate high-contrast mode
<jugglinmike> jongund: This probably won't affect macOS users
<jugglinmike> jongund: The only place I know this pull request will make a difference is in Windows
<jugglinmike> Matt_King: So the pull request should have screenshots of the difference (before and after), and also instructions for how a reviewer can observe the difference themself
<jugglinmike> Jem: I can review once jongund adds that information
<jugglinmike> Matt_King: Okay, I'll assign you, then
<jugglinmike> Matt_King: is this a change you were just trying out for the one slider? Do you think it should be applied to the other examples if people like it?
<jugglinmike> jongund: Yes, I think we should use it elsewhere. Though we only use the "forced colors" media query in one other pattern--feed. I'd also like to add it to other patterns
a11ydoer commented 3 months ago

@jongund I will be waiting for the compared views of forced colors for the review as we discussed at the APG meeting.

jongund commented 3 months ago

@a11ydoer

Here is s screenshot of the current rating slider with "dark sky" theme enabled. Slider colors use the same colors as links. current-slider-apg-dark-sky

Here is s screenshot of the udated rating slider with "dark sky" theme enabled. Slider colors use the same colors as buttons. updated-slider-apg-dark-sky

Screenshot of Windows 11 control panel for setting "dark sky" theme: windows-11-color-themes Note: Windows 10 has similar accessibility settings for a "dark" theme

Use the preview link in the pull request to view the updated slider after you configure windows for "dark" theme: ![https://deploy-preview-325--aria-practices.netlify.app/aria/apg/patterns/slider/examples/slider-rating/]