mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #10004 from nextcloud/accessibility-skip 

Add skip navigation / skip to content links for accessibility
This commit is contained in:
Morris Jobke 2018-06-26 16:11:19 +02:00 committed by GitHub
parent cfb50fdeaf de5d5ee0e7
commit d9d557a5ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
core/css/header.scss
View File

@ -564,3 +564,24 @@ nav[role='navigation'] {
display: none; 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;
}
}

4
core/templates/layout.user.php
View File

@ -27,6 +27,10 @@
</head> </head>
<body id="<?php p($_['bodyid']);?>"> <body id="<?php p($_['bodyid']);?>">
<?php include 'layout.noscript.warning.php'; ?> <?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-container">
<div id="notification"></div> <div id="notification"></div>
</div> </div>