Browse Source
Add skip navigation / skip to content links
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
pull/10004/head
Jan-Christoph Borchardt
7 years ago
No known key found for this signature in database
GPG Key ID: CBD846FC845CBE17
2 changed files with
25 additions and
0 deletions
-
core/css/header.scss
-
core/templates/layout.user.php
|
|
|
@ -564,3 +564,24 @@ nav[role='navigation'] { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* Skip navigation links – show only on keyboard focus */ |
|
|
|
.skip-navigation { |
|
|
|
padding: 11px; |
|
|
|
position: absolute; |
|
|
|
overflow: hidden; |
|
|
|
z-index: 1000; |
|
|
|
top: -999px; |
|
|
|
left: 3px; |
|
|
|
/* Force primary color, otherwise too light focused color */ |
|
|
|
background: var(--color-primary) !important; |
|
|
|
|
|
|
|
&.skip-content { |
|
|
|
left: 253px; |
|
|
|
} |
|
|
|
|
|
|
|
&:focus, |
|
|
|
&:active { |
|
|
|
top: 50px; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -27,6 +27,10 @@ |
|
|
|
</head> |
|
|
|
<body id="<?php p($_['bodyid']);?>"> |
|
|
|
<?php include 'layout.noscript.warning.php'; ?>
|
|
|
|
|
|
|
|
<a href="#app-content" class="button primary skip-navigation skip-content">Skip to main content</a> |
|
|
|
<a href="#app-navigation" class="button primary skip-navigation">Skip to navigation of app</a> |
|
|
|
|
|
|
|
<div id="notification-container"> |
|
|
|
<div id="notification"></div> |
|
|
|
</div> |
|
|
|
|
