Improve the perceptibility of contextual link buttons

Ok, lets minimize the SVG and have it use the ButtonFace so it is more easily customizable

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="ButtonFace" d="M14.6 3 13 1.4a1 1 0 0 0-1.4 0l-1.3 1.4 3 3 1.2-1.3a1 1 0 0 0 0-1.4M5.2 13.6l-3-3 7-7 3 3zm-4.3 1c0 .3 0 .5.3.4l2-.7-1.6-1.6z"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path stroke="ButtonFace" stroke-width="3" d="m2.3 2.3 11.4 11.4m-11.4 0L13.7 2.3"/></svg>

I think there will be better ways to do this, but just looking at the issue of the forced colors mode

@media (forced-colors: active) {
  /* Contextual trigger (pen icon) */
  .contextual .trigger {
    forced-color-adjust: none !important;
    background-color: ButtonFace !important;
    color: ButtonText !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='ButtonFace' d='M14.6 3 13 1.4a1 1 0 0 0-1.4 0l-1.3 1.4 3 3 1.2-1.3a1 1 0 0 0 0-1.4M5.2 13.6l-3-3 7-7 3 3zm-4.3 1c0 .3 0 .5.3.4l2-.7-1.6-1.6z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    border: 1px solid ButtonText !important;
    width: 26px;
    height: 26px;
    opacity: 1 !important;
  }

  .contextual .trigger:hover,
  .contextual .trigger:focus-visible {
    background-color: Highlight !important;
    color: HighlightText !important;
    outline: 2px solid Highlight !important;
  }

  /* Remove button (X icon) */
  .media-library-item__remove {
    forced-color-adjust: none !important;
    background-color: ButtonFace !important;
    color: ButtonText !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='ButtonFace' stroke-width='3' d='m2.3 2.3 11.4 11.4m-11.4 0L13.7 2.3'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.75rem;
    border: 1px solid ButtonText !important;
    opacity: 1 !important;
  }

  .media-library-item__remove:hover,
  .media-library-item__remove:focus-visible {
    background-color: Highlight !important;
    color: HighlightText !important;
    outline: 2px solid Highlight !important;
  }

  /* Edit button (pen icon) */
  .media-library-item__edit {
    forced-color-adjust: none !important;
    background-color: ButtonFace !important;
    color: ButtonText !important;
    border: 1px solid ButtonText !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='ButtonFace' d='M14.6 3 13 1.4a1 1 0 0 0-1.4 0l-1.3 1.4 3 3 1.2-1.3a1 1 0 0 0 0-1.4M5.2 13.6l-3-3 7-7 3 3zm-4.3 1c0 .3 0 .5.3.4l2-.7-1.6-1.6z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.75rem;
    opacity: 1 !important;
  }

  .media-library-item__edit:hover,
  .media-library-item__edit:focus-visible {
    background-color: Highlight !important;
    color: HighlightText !important;
    outline: 2px solid Highlight !important;
  }
}

There is some JS which is is hiding edit pen when the mouse isn't hovering over the form:

<form class="views-exposed-form" aria-label="Filter the contents of the Media view" data-drupal-selector="views-exposed-form-media-library-page" action="/admin/content/media-grid" method="get" id="views-exposed-form-media-library-page" accept-charset="UTF-8" data-once="exposed-form">

It converts this:

<button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open  configuration options</button>

to this:
<button class="trigger focusable" type="button" aria-pressed="false">Open configuration options</button>

But it doesn't trigger for keyboard users (focus).

It should always be visible, especially in a high contrast mode.

This CSS is an issue in both Gin & Claro, so this isn't a Gin specific issue. The CSS works reasonably well in both.

This occurs in the media system, but not sure it is restricted to it.

In Drupal core changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to the Core change policies. Thanks

If I understand correctly, I'm inclined to say that this is a Gin / Default Admin issue.

The icon originates from the contextual module, but AFAICT it's (currently) overridden by Default Admin in contextual_links.css.

I think it's likely that the theme's dark mode will need an override by itself even if the light mode version is unified somehow.

Postponing based on #3582351: [Meta] Clean up CSS within Admin theme until the CSS restructure / refactor is done.

I thought about moving this back to the Gin theme and then copying it so that it is also part of Core (and linking them), but just making it more visible for the Admin theme queue.

Leaving it in #3506302: [Meta] Improve the accessibility of the Gin theme

I also wonder if deleting CSS might be acceptable in the CSS cleanup.

This is ready to be worked on

Patch added (produced with AI).

Some updated screenshots with the patch applied.

I tested the MR on chromium (in light, dark, and forced colors) using the Default Admin theme at /admin/content/media-grid, and it works as described.

I did note a few small things you might want to look at before a commit:

• The pencil icon changed from the stroked file icon to a filled inline data URI. Was that intentional?
• The forced-colors focus outline is a hardcoded 2px vs. the theme's --outline-size is 4px.
• None of these had a measurable effect: border-color: ButtonText, background: ButtonFace, and box-shadow:

FWIW I also didn't test in any other browser besides Chrome.

Generated with the help of an LLM, but written (mostly) by me.

Pushed a fix to use a svg file to address the first bullet.

As as the 2nd bullet not sure which is correct 2px or 4px

For the 3rd bullet wonder if it was because they were capitalized? Pushed a change up for that.

Add context to the button label for screenreader users

Seems like this step is still missing.

The button context issue is real, but this functionality doesn't belong in the theme. It belongs in the contextual module, so it can apply to all themes.

I opened up a followup #3623711: Labels for contextual links are redundant and missing a context to get that fixed.

believe tested right, used a high contrast chrome plugin with black on yellow setting. Everything appears and focus is is easy to see.

I've attached 3 screenshots from Tugboat. The contrast seems a lot better https://contrast.report/

Nice to see this improve.

This looks great to me! There's a couple unrelated bugs that I found while testing this:

• Sometimes contextual links take two clicks to open.
• When the button is focused, the text shows to the left.

Committed and pushed 09fef26db8c to main. Thanks!

Opened followup #3624123: UX issues with contextual links in Admin theme

I want to make sure tests pass before backporting.