@bmartinezcalvo It appears that you want to use the new tokens outlined in T397327: Create new border-color tokens for warning status as backgrounds behind text where links may be present, all possible text/link colors won't be accessible/have enough color contrast from the interactive state backgrounds without darkening the text/link colors as well, which I imagine wouldn't be possible. I wonder if there are other design solutions to improve the interaction design for Edit Check. I have some ideas and would be happy to jam with you on them, but the solution as you've laid out here would introduce inaccessible patterns.

As decided yesterday in a team's meeting, we will go for now with the background-color-warning-subtle (yellow-50) to avoid accessibility issues with links. We will explore other solutions to increase the highlighted text contrast on the page's background in T399294.

I've updated the design proposal in this task to reflect these decisions.

Disabled feels like overkill -- it's too low-contrast to be easily readable to my eyes, and it's specified to be used in places when someone might still want to refer to the contents of the card. E.g. in add-reference, the card still contains the explanation for why you should add a citation.

El T394713#11021615, @DLynch escribió:

Disabled feels like overkill -- it's too low-contrast to be easily readable to my eyes, and it's specified to be used in places when someone might still want to refer to the contents of the card. E.g. in add-reference, the card still contains the explanation for why you should add a citation.

Disabled elements are not required to meet AA contrast standards, and the current contrast follows the same approach used across other disabled elements. If we introduce a collapsed disabled state in the future, it would follow this same color approach. For consistency, I recommend using the existing color tokens applied to other disabled components.

I suppose I could rephrase my position to "that shouldn't be disabled", if we have to use those colors.

I shall move this over to the appropriate ticket rather than commenting on the parent here. :)

The new border-color-warning tokens have been released in Codex T397327 so we can start using them for the different states of Edit Check card.

I mentioned this over in T404604#11233971, but I don't think we can implement the notice-level highlight as specified here. It's visually almost identical to how selections look in text, and that's going to be confusing. We need something that isn't blue.

El T394713#11246117, @DLynch escribió:

I mentioned this over in T404604#11233971, but I don't think we can implement the notice-level highlight as specified here. It's visually almost identical to how selections look in text, and that's going to be confusing. We need something that isn't blue.

In T406468: Update Blue50 color token in Codex, the blue has been updated to improve contrast on white backgrounds and also to create better distinction between background-color-interactive-subtle (unselected highlight) and background-color-progressive-subtle (selected highlight for suggestions).

I'm sorry, but in that animation I cannot see any difference between that highlight and normal text-selection. If anything, T406468 has made it more identical to text-selection than it used to be.

El T394713#11246375, @DLynch escribió:

I'm sorry, but in that animation I cannot see any difference between that highlight and normal text-selection. If anything, T406468 has made it more identical to text-selection than it used to be.

I understand your concern, but I still think the blue works for Suggestions. While the color similarity with text-selection is noticeable, the two states remain visually distinguishable because the Suggestions highlight includes the left rail and line-by-line highlighting — both clear differentiators that the selection highlight doesn’t have.

Differences between highlighted suggestion and text selection	Text being selected on a suggestion

Also, although the contrast between the Suggestions highlight and the text-selection blue is low (1.29:1), the contrast between the yellow Checks highlight and the text-selection blue is almost the same (1.35:1). So, by that logic, no highlight color would meet the contrast requirement to remain visually distinct from text selection.

While the color similarity with text-selection is noticeable, the two states remain visually distinguishable because the Suggestions highlight includes the left rail and line-by-line highlighting — both clear differentiators that the selection highlight doesn’t have.

I do agree that they're distinguishable when viewed side-by-side or by someone who knows the product well, but I don't think we can expect a random user to be able to look at the screen like this and tell whether they have text selected or not. It'll create confusing behavior when someone activates a suggestion, because it's going to look like we just selected all the related text and they'll expect regular text-is-selected behavior (replacing it all when you start typing, etc).

The interaction states described in this task have been already implemented in T404604.

We will need to fix only the mobile version, where the trigger icon is currently black when unselected, while it should use the status color (e.g. warning, progressive) of each type of check/suggestion.

Current behavior	Expected behavior

@bmartinezcalvo Should there be any visible distinction between the focused action-group and unfocused ones, or are they visually identical?

Change #1238393 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/VisualEditor@master] EditCheckGutterSectionWidget: icons should get flags regardless of focus

https://gerrit.wikimedia.org/r/1238393

El T394713#11602974, @DLynch escribió:

@bmartinezcalvo Should there be any visible distinction between the focused action-group and unfocused ones, or are they visually identical?

As commented in our chat internally, the difference between the unselected and selected elements (either individual or groups) would be the highlighted text:

• unselected: gray
• selected: yellow/blue

We will need to improve in some moment the contrast of highlighted text in T399294.

Change #1238393 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] EditCheckGutterSectionWidget: icons should get flags regardless of focus

https://gerrit.wikimedia.org/r/1238393