diff --git a/assets/scss/skip-links.scss b/assets/scss/skip-links.scss index 02efeac..66a7ab5 100644 --- a/assets/scss/skip-links.scss +++ b/assets/scss/skip-links.scss @@ -1,9 +1,15 @@ // Skip links for accessibility .skip-links { - position: absolute; + position: fixed; top: 0; left: 0; - z-index: 1050; // Higher than other elements + width: 100%; + z-index: 9999; + pointer-events: none; + + a { + pointer-events: auto; + } } .sidebar-skip-links { @@ -14,8 +20,7 @@ .skip-link { position: absolute; - left: -10000px; - top: auto; + left: -9999px; width: 1px; height: 1px; overflow: hidden; @@ -26,22 +31,26 @@ text-decoration: none; border: 2px solid #000; border-radius: 4px; - z-index: 1050; - - &:focus { - position: static; + white-space: nowrap; + + &:focus, + &:active { + position: fixed; + top: 10px; + left: 10px; width: auto; height: auto; overflow: visible; - margin: 10px; - outline: 3px solid #2563eb; // Focus indicator + clip: auto; + outline: 3px solid #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5); + z-index: 9999; } - + // Variants &--sidebar { margin-bottom: 5px; - + &:focus { position: static; width: 100%; @@ -51,7 +60,7 @@ text-align: center; } } - + &--footer { &:focus { position: static; @@ -63,4 +72,4 @@ text-align: center; } } -} \ No newline at end of file +} \ No newline at end of file diff --git a/layouts/partials/header-menu.html b/layouts/partials/header-menu.html index d3f24db..9e5b0bb 100644 --- a/layouts/partials/header-menu.html +++ b/layouts/partials/header-menu.html @@ -11,7 +11,7 @@