Fix styling for single skip buttons globally

Signed-off-by: Julius Härtl <jus@bitgrid.net>

apps/dashboard/css/dashboard.css

@@ -1,11 +1,3 @@
-.skip-navigation:not(.skip-content) {
-  display: none;
-}
-
-.skip-navigation.skip-content {
-  left: 3px;
-}
-
 #header {
   background: transparent !important;
   --color-header: rgba(24, 24, 24, 1);

apps/dashboard/css/dashboard.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["dashboard.scss"],"names":[],"mappings":"AACA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;AAEA;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAKF;EACC;;AAEA;EACC;;;AAMH;EACC;;;AAID;AAAA;AAAA;AAAA;EAIC","file":"dashboard.css"}
+{"version":3,"sourceRoot":"","sources":["dashboard.scss"],"names":[],"mappings":"AAAA;EACC;EACA;;AAEA;EACC;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAKF;EACC;;AAEA;EACC;;;AAMH;EACC;;;AAID;AAAA;AAAA;AAAA;EAIC","file":"dashboard.css"}

apps/dashboard/css/dashboard.scss

@@ -1,12 +1,3 @@
-// Suppress "Skip to navigation of app" link since the app does not have a navigation
-.skip-navigation:not(.skip-content) {
-	display: none;
-}
-// Fix position of "Skip to main content" link since the other link is gone
-.skip-navigation.skip-content {
-	left: 3px;
-}
-
 #header {
 	background: transparent !important;
 	--color-header: rgba(24, 24, 24, 1);

core/css/header.css

@@ -54,23 +54,6 @@
   outline: none;
 }
 
-/* removed until content-focusing issue is fixed */
-#skip-to-content a {
-  position: absolute;
-  left: -10000px;
-  top: auto;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
-#skip-to-content a:focus {
-  left: 76px;
-  top: -9px;
-  color: var(--color-primary-text);
-  width: auto;
-  height: auto;
-}
-
 /* HEADERS ------------------------------------------------------------------ */
 #body-user #header,
 #body-settings #header,
@@ -632,21 +615,16 @@ nav[role=navigation] {
 }
 
 /* Skip navigation links – show only on keyboard focus */
-.skip-navigation {
-  padding: 11px;
+#skip-actions {
   position: absolute;
   overflow: hidden;
   z-index: 9999;
   top: -999px;
   left: 3px;
-  /* Force primary color, otherwise too light focused color */
-  background: var(--color-primary) !important;
-}
-.skip-navigation.skip-content {
-  left: 300px;
-  margin-left: 3px;
+  height: 50px;
+  padding: 11px;
 }
-.skip-navigation:focus, .skip-navigation:active {
+#skip-actions:focus-within {
   top: 50px;
 }
 

core/css/header.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["variables.scss","header.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;AACA;AAAA;AAAA;EAGC;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;;AAIF;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;;AAIF;AACA;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA,QDmDe;EClDf;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AASF;AACC;AAiHA;AA4BA;;AA1IA;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EAhBD;EACA;EAiBC;EACA,KDKc;ECJd;AAMA;AAqBA;;AAzBA;AAAA;EACC;;AAID;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;AAAA;AAAA;EAGC;EACA;EA3CF;EACA;;AAkDG;AAAA;AAAA;EACC;EACA;EACA,QAhDuB;EAiDvB;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;EAEC;;AAED;AAAA;AAAA;AAAA;AAAA;EAEC;;AAED;AAAA;AAAA;EACC;EACA;;AAED;AAAA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;AAAA;AAAA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;EACA;EACA;;AAML;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAKA;AAAA;EAEC;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA,ODpIY;ECqIZ;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC;;;AAOL;AAEA;EACC;;;AAIA;EACC;;AAGA;EACC;;AAID;EACC;;AAID;EACC;;;AAKH;AACA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;;;AAGD;AACA;EACC;EACA,ODnNe;ECoNf,QDpNe;ECqNf;EACA;;;AAGD;EACC;EACA;AAAY;EACZ;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;;AACA;AAAA;AAAA;AACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAoB;;;AAItB;EACC;;AACA;EACC;;;AAIF;AACA;EACC;EACA;EACA;EACA;AAEA;;AACA;EACC;AAAY;EACZ;AAqBA;AA2BA;;AA9CA;EAGC;;AAEA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;;AAED;EACC;;AAED;EACC;;AAKF;EACC;EACA;EACA;AAMA;;AAJA;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;AAEA;;AACA;EACC;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;;;AAIF;AACA;EACC;EACA,WD/Ue;ECgVf;AAyFA;AAiCA;AAwBA;AAgBA;;AAhKA;EACC;EACA;EACA;EACA;EACA;AAiBA;AA4BA;AAQA;AAcA;AACA;AAQA;;AA1EA;EACC;EACA;EACA;EACA;EACA,OD9Va;EC+Vb;EACA;EACA;EAEA;EACA;EACA;;AAID;AAAA;AAAA;EAGC;EACA;;AAID;AAAA;EAEC;;AAGD;AAAA;AAAA;AAAA;EAMC;EACA;EACA;EACA;EACA;EACA;;AAID;AAAA;EAEC;EACA;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKD;AAAA;EAEC;EAEA;;AAID;EACC;;AAMD;AACC;AASA;AAOA;AAOA;;AAtBA;AAAA;AAAA;AAAA;AAAA;EAKC;;AAID;EACC;EACA;EACA;AAAa;;AAId;AAAA;EAGC;;AAID;EACC;;AAMH;AACC;AASA;AAOA;;AAfA;AAAA;AAAA;AAAA;AAAA;EAKC;;AAID;AAAA;EAEC;EACA;;AAID;EACC;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAID;AAAA;AAAA;AAAA;EAIC;;AAED;EACC;;AAED;AAAA;AAAA;EAGC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAED;AAAA;EAEC;;;AAKA;AAAA;EACC;;AAED;AAAA;EACC;;;AAKF;AACA;EACC;EACA;EACA;EACA;EACA;EACA;AACA;EACA;;AAEA;EACC,MDziBiB;EC0iBjB;;AAGD;EAEC,KDhjBc;;;ACqjBhB;AAGC;AAAA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;EAEC;EACA;EACA","file":"header.css"}
+{"version":3,"sourceRoot":"","sources":["variables.scss","header.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;AACA;AAAA;AAAA;EAGC;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;;AAIF;AACA;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA,QDoEe;ECnEf;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AASF;AACC;AAiHA;AA4BA;;AA1IA;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EAhBD;EACA;EAiBC;EACA,KDsBc;ECrBd;AAMA;AAqBA;;AAzBA;AAAA;EACC;;AAID;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;AAAA;AAAA;EAGC;EACA;EA3CF;EACA;;AAkDG;AAAA;AAAA;EACC;EACA;EACA,QAhDuB;EAiDvB;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;EAEC;;AAED;AAAA;AAAA;AAAA;AAAA;EAEC;;AAED;AAAA;AAAA;EACC;EACA;;AAED;AAAA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;AAAA;AAAA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;EACA;EACA;;AAML;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAKA;AAAA;EAEC;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA,ODnHY;ECoHZ;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC;;;AAOL;AAEA;EACC;;;AAIA;EACC;;AAGA;EACC;;AAID;EACC;;AAID;EACC;;;AAKH;AACA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;;;AAGD;AACA;EACC;EACA,ODlMe;ECmMf,QDnMe;ECoMf;EACA;;;AAGD;EACC;EACA;AAAY;EACZ;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;;AACA;AAAA;AAAA;AACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAoB;;;AAItB;EACC;;AACA;EACC;;;AAIF;AACA;EACC;EACA;EACA;EACA;AAEA;;AACA;EACC;AAAY;EACZ;AAqBA;AA2BA;;AA9CA;EAGC;;AAEA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;;AAED;EACC;;AAED;EACC;;AAKF;EACC;EACA;EACA;AAMA;;AAJA;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;AAEA;;AACA;EACC;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;;;AAIF;AACA;EACC;EACA,WD9Te;EC+Tf;AAyFA;AAiCA;AAwBA;AAgBA;;AAhKA;EACC;EACA;EACA;EACA;EACA;AAiBA;AA4BA;AAQA;AAcA;AACA;AAQA;;AA1EA;EACC;EACA;EACA;EACA;EACA,OD7Ua;EC8Ub;EACA;EACA;EAEA;EACA;EACA;;AAID;AAAA;AAAA;EAGC;EACA;;AAID;AAAA;EAEC;;AAGD;AAAA;AAAA;AAAA;EAMC;EACA;EACA;EACA;EACA;EACA;;AAID;AAAA;EAEC;EACA;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKD;AAAA;EAEC;EAEA;;AAID;EACC;;AAMD;AACC;AASA;AAOA;AAOA;;AAtBA;AAAA;AAAA;AAAA;AAAA;EAKC;;AAID;EACC;EACA;EACA;AAAa;;AAId;AAAA;EAGC;;AAID;EACC;;AAMH;AACC;AASA;AAOA;;AAfA;AAAA;AAAA;AAAA;AAAA;EAKC;;AAID;AAAA;EAEC;EACA;;AAID;EACC;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAID;AAAA;AAAA;AAAA;EAIC;;AAED;EACC;;AAED;AAAA;AAAA;EAGC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAED;AAAA;EAEC;;;AAKA;AAAA;EACC;;AAED;AAAA;EACC;;;AAKF;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,KDxhBc;;;AC6hBhB;AAGC;AAAA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;EAEC;EACA;EACA","file":"header.css"}

core/css/header.scss

@@ -28,23 +28,6 @@
 	}
 }
 
-/* removed until content-focusing issue is fixed */
-#skip-to-content a {
-	position: absolute;
-	left: -10000px;
-	top: auto;
-	width: 1px;
-	height: 1px;
-	overflow: hidden;
-	&:focus {
-		left: 76px;
-		top: -9px;
-		color: var(--color-primary-text);
-		width: auto;
-		height: auto;
-	}
-}
-
 /* HEADERS ------------------------------------------------------------------ */
 #body-user #header,
 #body-settings #header,
@@ -648,23 +631,16 @@ nav[role='navigation'] {
 
 
 /* Skip navigation links – show only on keyboard focus */
-.skip-navigation {
-	padding: 11px;
+#skip-actions {
 	position: absolute;
 	overflow: hidden;
 	z-index: 9999;
 	top: -999px;
 	left: 3px;
-	/* Force primary color, otherwise too light focused color */
-	background: var(--color-primary) !important;
-
-	&.skip-content {
-		left: variables.$navigation-width;
-		margin-left: 3px;
-	}
+	height: 50px;
+	padding: 11px;
 
-	&:focus,
-	&:active {
+	&:focus-within {
 		top: variables.$header-height;
 	}
 }

core/css/server.css

@@ -2320,23 +2320,6 @@ label.infield {
   outline: none;
 }
 
-/* removed until content-focusing issue is fixed */
-#skip-to-content a {
-  position: absolute;
-  left: -10000px;
-  top: auto;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
-#skip-to-content a:focus {
-  left: 76px;
-  top: -9px;
-  color: var(--color-primary-text);
-  width: auto;
-  height: auto;
-}
-
 /* HEADERS ------------------------------------------------------------------ */
 #body-user #header,
 #body-settings #header,
@@ -2898,21 +2881,16 @@ nav[role=navigation] {
 }
 
 /* Skip navigation links – show only on keyboard focus */
-.skip-navigation {
-  padding: 11px;
+#skip-actions {
   position: absolute;
   overflow: hidden;
   z-index: 9999;
   top: -999px;
   left: 3px;
-  /* Force primary color, otherwise too light focused color */
-  background: var(--color-primary) !important;
-}
-.skip-navigation.skip-content {
-  left: 300px;
-  margin-left: 3px;
+  height: 50px;
+  padding: 11px;
 }
-.skip-navigation:focus, .skip-navigation:active {
+#skip-actions:focus-within {
   top: 50px;
 }
 

core/templates/layout.user.php

@@ -49,8 +49,10 @@ $getUserAvatar = static function (int $size) use ($_): string {
 			<input type="hidden" id="initial-state-<?php p($app); ?>" value="<?php p(base64_encode($initialState)); ?>">
 		<?php }?>
 
-		<?php if ($_['id-app-content'] !== null) { ?><a href="<?php p($_['id-app-content']); ?>" class="button primary skip-navigation skip-content"><?php p($l->t('Skip to main content')); ?></a><?php } ?>
-		<?php if ($_['id-app-navigation'] !== null) { ?><a href="<?php p($_['id-app-navigation']); ?>" class="button primary skip-navigation"><?php p($l->t('Skip to navigation of app')); ?></a><?php } ?>
+		<div id="skip-actions">
+			<?php if ($_['id-app-content'] !== null) { ?><a href="<?php p($_['id-app-content']); ?>" class="button primary skip-navigation skip-content"><?php p($l->t('Skip to main content')); ?></a><?php } ?>
+			<?php if ($_['id-app-navigation'] !== null) { ?><a href="<?php p($_['id-app-navigation']); ?>" class="button primary skip-navigation"><?php p($l->t('Skip to navigation of app')); ?></a><?php } ?>
+		</div>
 
 		<div id="notification-container">
 			<div id="notification"></div>