Contrast Checker only works after changing colors the second time

[afercia]

Description

Discovered while exploring #58936 (comment)

It appears the Contrast Checker is buggy and only works when changing one more time a color setting. This happens both when setting an insufficient color pair *the notice should appear) and when setting a sufficient one (the notice should disappear).

See attached animated GIF.

The Contrast Checker is an important feature that should work 'out of the box' for all color settings that apply to text and background. Since WordPress 6.6 is supposed to be a 'bug fixes' release, I'd like to propose to fix the Contrast Checker and make it work reliably for 6.6. Some e2e tests would be nice.

Step-by-step reproduction instructions

• Create a new post.
• Add a Paragraph block with some text.
• In the Settings panel, set both the text and background colors to the same color.
• Observe the Contrast Checker doesn't render any notice.
• Change one of the colors to another one that still produces an insufficient color pair.
• Observe this time the Contrast Checker does render the notice.
• Set the color text to one that produces a sufficient color pair contrast.
• Observee the Contrast Checker notice does not disappear and still warns about insufficient contrast.
• Change the background color to one that still produces a sufficient color pair contrast.
• Observe this time the Contrast Checker notice does disappear, as expected.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

After some initial debugging, it appears the ContrastChcker does not (always) receive the changed colors. See attached GIF, while dumping to the console the colors at the top of the file in the ContrastChcker.

[afercia]

Note to myself and to everyone willing to help on this issue.

The ContrastChecker component is used in a few different places (blocks, global styles edit palette, etc.).

Some blocks, e.g. Social links, use ContrastChecker in a 'custom' way. For most of the blocks, the colors panel comes from the color hook, which in turn uses the BlockColorContrastChecker hook, which is responsible to detect the colors.

As far as I can tell, it appears it's a matter of timing, as the color detection sometimes happens before the actual color change. That is: BlockColorContrastChecker may return the previous color.

See attached screenshot, where I'm dumping the detected text color, and dumping it again within a 0 setTimeout, for debugging purposes. See attached sample debugging code.

• rgb(17, 17, 17) is the initial text color wrongly returned by the hook.
• rgb(216, 97, 60) is the expected orangish new text color, which gets correctly detected only after the setTimeout.

debug-contrast-checker.diff.txt

To debug:

• Apply the diff.
• Select a paragraph block and change the text color.
• Observe BlockColorContrastChecker detects the initial color. Expected: to detext the new color.
• Observe detecting the color within the setTimout returns the new color.

[afercia]

I can't figure out how to make sure the color detection is guaranteed to happen after a color change. I spent a considerable amount of time debugging this issue but I'm afraid it goes beyond my coding abilities.

I would appreciate someone else more familiar with hooks to step in and help this issue move on.
Cc @WordPress/gutenberg-core

[Mamaduka]

Closing in favor of #67035. I can no longer reproduce the bug due to different regressions. Details: #67035 (comment).