Verified Commit 0b36d01a authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #2990766 by camilledavis, Gauravvvv, mgifford: Location of "Skip to... 

Issue #2990766 by camilledavis, Gauravvvv, mgifford: Location of "Skip to Main" link below admin toolbar in Claro is problematic for screen magnifier users

(cherry picked from commit 5e0d1efa)
parent cc355625

core/profiles/demo_umami/themes/umami/css/components/navigation/skip-link/skip-link.css

+2 −4
Original line number Diff line number Diff line
@@ -4,11 +4,9 @@ 
 */



.skip-link {

  z-index: 50;

  left: 50%;

  z-index: 503;

  inset-inline-start: 0;

  padding: 1px 10px 2px;

  -webkit-transform: translateX(-50%);

  transform: translateX(-50%);

  border: 1px solid #444;

  border-top-width: 0;

  border-radius: 0 0 10px 10px;

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

+13 −4
Original line number Diff line number Diff line
@@ -19,13 +19,16 @@ 
}



.skip-link {

  z-index: 50;

  left: 50%;

  z-index: 503;

  top: 0;

  left: 0; /* LTR */

  padding: 1px 0.625rem 2px;

  transform: translateX(-50%);

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

  border-radius: 0 0 0.625rem 0.625rem;

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

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

  box-shadow:

    0 0 0 2px var(--color-white),

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

  font-size: 0.94em;

}
@@ -43,3 +46,9 @@ 
.skip-link.visually-hidden.focusable:focus {

  position: absolute !important;

}



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

  right: 0;

  left: auto;

  border-radius: 0 0 0 0.625rem;

}

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

+12 −4
Original line number Diff line number Diff line
@@ -12,13 +12,16 @@ 
}



.skip-link {

  z-index: 50;

  left: 50%;

  z-index: 503;

  top: 0;

  left: 0; /* LTR */

  padding: 1px 10px 2px;

  transform: translateX(-50%);

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

  border-radius: 0 0 10px 10px;

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

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

  box-shadow:

    0 0 0 2px var(--color-white),

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

  font-size: 0.94em;

  &:hover,

  &:active {
@@ -32,3 +35,8 @@ 
    position: absolute !important;

  }

}

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

  right: 0;

  left: auto;

  border-radius: 0 0 0 10px;

}