Improve the perceptibility of contextual link buttons

Problem/Motivation

• The border of the contextual link button is rather light, in particular in light mode, where the background of the page is also white. The pencil icon appears on hover, but it still requires some cognitive effort to process that there is a button and that this button is clickable (See the table in https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC8... or contextual_links.xlsx.zip → for more details).




• The label for the contextual link is redundant and missing a context most of the time. For example on the frontpage in Olivero for Drupal CMS you have in the rotor in VoiceOver eight entries with Open configuration options, toggle button, two entries with Open latest configuration options, toggle button, and three entries that provide a specific context: Open Primary tabs configuration options, toggle button, A celebration of Drupal and open-source contributions configuration options, toggle button, and
  

  Open footer configuration options, toggle button".</li>
  <li>In Forced Colors mode the contextual link buttons have no pen icon on hover, neither in Gin nor in Olivero. [#Icons are invisible]</li>
  <img src="/files/issues/2025-02-13/contextual_link_fcm.jpg" alt="the filter media field set in forced color mode with the contextual link button shown in the upper right corner with just the border the pencil icon missing" />
  </ul>
  
  
  Discussed and iterated on the issue with @mgifford, @the_g_bomb, @katannshaw, and @drupa11y
  
  <h4 id="summary-steps-reproduce">Steps to reproduce</h4>
  <ul>
  <li>Check the contextual link buttons on either <code>admin/content/media-grid

  or on the frontpage in Olivero. For testing the issue in Forced Colors mode make sure that you’ve switched to dark mode before.

Proposed resolution

• Increase the color contrast for the border in light mode so it meets 3:1, so the button gets a higher affordance and gets easier noticed. Same for the dark mode, due to the thin border, the border looks kind of jagged (not sure if that is the right term in english) - it is simply not a clearly recognizable button.
• Add context to the button label for screenreader users.
• Consider showing the contextual button in the context of layout builder all the time: https://www.drupal.org/project/drupal/issues/3037742 🐛 The toggle that makes Contextual Links visible at all times might not be sufficiently discoverable Active
• Ensure that the pen icon is shown in Forced Colors mode on hover (related to [#Several icons and images are invisible in Forced Colors mode])

Remaining tasks

User interface changes

API changes

Data model changes