If you are getting to admin/appearance/settings/default_admin the active accent color is not apparent. In Safari you also don't see any outline at all for the active accent color when you are changing it (safari.mp4), while in Edge and Firefox you see an outline after you have selected and clicked your new desired accent color (edge.mp4, firefox.mp4). But that outline is hidden again in those two browsers as soon as you are changing any other setting on the page by click.
Go to admin/appearance/settings/default_admin and try to figure out which of the accent color circles is the active one.
Show an outline for the active accent color persistently.
| Comment | File | Size | Author |
|---|---|---|---|
| #6 | outline.mp4 | 39.06 KB | rkoller |
| #6 | keyboard.mp4 | 68.24 KB | rkoller |
| firefox.mp4 | 158.55 KB | rkoller | |
| edge.mp4 | 163.19 KB | rkoller | |
| safari.mp4 | 107.4 KB | rkoller |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #3
leandro713 commentedi would like to work on this
Comment #5
leandro713 commentedI’ve opened a merge request that adds a persistent visual indicator for the selected accent color while preserving the keyboard focus indicator. It updates the PostCSS source and compiled CSS. I manually tested the selection in light and dark modes.
Comment #6
rkollerthank you for working on the issue @leandro713! I've quickly tested the MR manually, and there a few details ive noticed:
The MR is introducing a light greyish outline in dark mode and a darkish outline in light mode. Two things I wonder about in this context. First the width of the persistent outline is thinner compared to the outline you get on focus/on click (outline.mp4). And this MR would be introducing another color to communicate state. So far selections like for example for the layout density on the very same page is communicated by the accent color. I am well aware that the color for the outline for the selection would have the very same color as the circle that is selected, but there is still a padding/gap between the outline for the active option and the selected option itself. personally i would vote to have the same, thicker, width for the persistent selection outline. in regard of the color choice i am not sure. i just wanted to raise that potential inconsistency for discussion.
When you interact with the component by keyboard as soon as you move the select to the left or right you are unable to see what the current setting is/was, so the user has to remember that previous choice (keyboard.mp4).
Comment #7
kentr commented@leandro713 Did you use AI (LLM) for your MR?
Comment #8
leandro713 commented@rkroller:
Thanks for the review. I understand the keyboard concern now: the persistent indicator was tied to :checked, so it moved as the radio selection changed with the arrow keys. I’ve updated it to keep marking the initially checked accent while leaving the focus indicator on the focused option. I’ve also made the persistent ring the same thickness as the focus ring and used the accent color to better match the other selected controls.
In relation to the TAB movement with the keyboard, now the persistent indicator is tied to the radio button’s initial checked attribute rather than its dynamic :checked state. This keeps the accent saved when the form loads visibly marked while keyboard navigation moves focus between options. The existing focus indicator continues to show which option currently has focus, so users can distinguish the saved accent from the option they are navigating to. After the form is saved and reloaded, the newly saved accent becomes the initially checked option and receives the persistent indicator.
@kentr:
Yes, I used an LLM to help reason through the CSS approach and the review feedback. I reviewed the change and tested it manually, and I take responsibility for the MR.
Comment #9
needs-review-queue-bot commentedThe Needs Review Queue Bot tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".
This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.
Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.
Comment #10
leandro713 commentedComment #11
leandro713 commentedUpdated the selected accent color’s :checked styling so the selection ring follows the currently selected option. I verified the keyboard interaction on Fedora and adjusted the rings so they have the same thickness. I could not test Safari because I don’t have access to a macOS or iOS device; could someone with Safari verify the behavior?