Commit 40967295 authored by catch's avatar catch
Browse files

fix: #3621109 Skip link in dark mode has low color contrast 

By: kentr
By: smustgrave
By: mgifford
By: mherchel
(cherry picked from commit 254a60c7)
parent 67a1bbf5

core/themes/default_admin/css/base/elements.css

+1 −9
Changes for core/themes/default_admin/css/base/elements.css: 1 added line, 9 removed lines.
Original line number Diff line number Diff line
@@ -284,13 +284,5 @@ img { 
   reporting contrast errors for text that is not visually rendered. */



.visually-hidden {

  color: #000;



  .dark-mode & {

    color: #fff;

  }



  &.skip-link {

    color: var(--admin-color-text-on-primary);

  }

  color: var(--admin-color-text-loud);

}

core/themes/default_admin/css/base/elements.pcss.css

+1 −9
Changes for core/themes/default_admin/css/base/elements.pcss.css: 1 added line, 9 removed lines.
Original line number Diff line number Diff line
@@ -267,13 +267,5 @@ img { 
/* Enforcing colors on visually hidden text prevents accessibility scanners from

   reporting contrast errors for text that is not visually rendered. */

.visually-hidden {

  color: #000;



  .dark-mode & {

    color: #fff;

  }



  &.skip-link {

    color: var(--admin-color-text-on-primary);

  }

  color: var(--admin-color-text-loud);

}

core/themes/default_admin/css/components/skip-link.css

+8 −30
Changes for core/themes/default_admin/css/components/skip-link.css: 8 added lines, 30 removed lines.
Original line number Diff line number Diff line
@@ -12,43 +12,21 @@ 
 * Allows keyboard users to quickly skip to the main content of the page.

 */



:root {

  /* Dark chrome pill with light text — kept on the gray ramp directly: no

     semantic surface token matches these mid/near-black bg values, and the skip

     link is a self-contained always-dark component (not mode-aware). */

  --skip-link-bg-color: var(--admin-color-gray-800);

  --skip-link-color: var(--admin-color-white); /* Fixed: light text on the always-dark pill. */

  --skip-link-active-bg-color: var(--admin-color-gray-950);

}

/* Intentionally flip the background and foreground colors to provide visual

   differentiation while maintaining contrast. */



.skip-link {

  z-index: 503;

  top: 0;

  left: 0; /* LTR */

  inset-inline-start: 0;

  padding: 1px 0.625rem 2px;

  color: var(--skip-link-color);

  border-radius: 0 0 0.625rem 0; /* LTR */

  background: var(--skip-link-bg-color);

  box-shadow:

    0 0 0 2px var(--admin-color-bg-surface),

    0 0 0 5px var(--admin-color-focus);

  color: var(--admin-color-bg-raised);

  border-end-end-radius: 10px;

  background: var(--admin-color-text-loud);

  box-shadow: var(--admin-shadow-color-1);

  font-size: 0.94em;

  &:hover,

  &:active {

    color: var(--skip-link-color);

    background-color: var(--skip-link-active-bg-color);

  }

  &:focus {

    -webkit-text-decoration: none;

    text-decoration: none;

  }



  &.visually-hidden.focusable:focus {

    position: absolute !important;

  }

}
 


[dir="rtl"] .skip-link {

  right: 0;

  left: auto;

  border-radius: 0 0 0 0.625rem;

}

core/themes/default_admin/css/components/skip-link.pcss.css

+8 −29
Changes for core/themes/default_admin/css/components/skip-link.pcss.css: 8 added lines, 29 removed lines.
Original line number Diff line number Diff line
@@ -5,41 +5,20 @@ 
 * Allows keyboard users to quickly skip to the main content of the page.

 */



:root {

  /* Dark chrome pill with light text — kept on the gray ramp directly: no

     semantic surface token matches these mid/near-black bg values, and the skip

     link is a self-contained always-dark component (not mode-aware). */

  --skip-link-bg-color: var(--admin-color-gray-800);

  --skip-link-color: var(--admin-color-white); /* Fixed: light text on the always-dark pill. */

  --skip-link-active-bg-color: var(--admin-color-gray-950);

}



/* Intentionally flip the background and foreground colors to provide visual

   differentiation while maintaining contrast. */

.skip-link {

  z-index: 503;

  top: 0;

  left: 0; /* LTR */

  inset-inline-start: 0;

  padding: 1px 10px 2px;

  color: var(--skip-link-color);

  border-radius: 0 0 10px 0; /* LTR */

  background: var(--skip-link-bg-color);

  box-shadow:

    0 0 0 2px var(--admin-color-bg-surface),

    0 0 0 5px var(--admin-color-focus);

  color: var(--admin-color-bg-raised);

  border-end-end-radius: 10px;

  background: var(--admin-color-text-loud);

  box-shadow: var(--admin-shadow-color-1);

  font-size: 0.94em;

  &:hover,

  &:active {

    color: var(--skip-link-color);

    background-color: var(--skip-link-active-bg-color);

  }

  &:focus {

    text-decoration: none;

  }



  &.visually-hidden.focusable:focus {

    position: absolute !important;

  }

}
 
[dir="rtl"] .skip-link {

  right: 0;

  left: auto;

  border-radius: 0 0 0 10px;

}