yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add skip links to header (#13938)

Browse Source 
* Add skip links to header

* Tweak skip link z-index
This commit is contained in:
Matt Begent
2023-03-15 19:49:53 +00:00
committed by GitHub
parent 6594c1350f
commit f6ebcdcfb6
5 changed files with 46 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js
View File

@@ -127,6 +127,20 @@
}
};
scope.skipToMenu = function() {
document.querySelector('#applications a').focus();
};
scope.skipToContent = function() {
var focusableElements = document.querySelectorAll('.umb-app-content a, .umb-app-content button');
for(var i=0; i < focusableElements.length; i++){
if(focusableElements[i].offsetParent !== null) {
focusableElements[i].focus();
break;
}
}
};
}
var directive = {

24
src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less
View File

@@ -110,3 +110,27 @@
.umb-app-header__button:focus .umb-app-header__action-icon {
opacity: 1;
}
.umb-app-header__skip-button {
position: absolute;
top: 7.5px;
left: 5px;
background-color: #FFF;
border: 1px solid #000;
display: block;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
border-radius: 3px;
z-index: 1;
}
.umb-app-header__skip-button:focus {
height: auto;
width: auto;
clip: auto;
padding: 10px;
line-height: normal;
text-decoration: none;
}

4
src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
View File

@@ -1,5 +1,9 @@
<div>
<div class="umb-app-header">
<button type="button" class="umb-app-header__skip-button" ng-click="skipToMenu()"><localize key="general_skipToMenu">Go to menu</localize></button>
<button type="button" class="umb-app-header__skip-button" ng-click="skipToContent()"><localize key="general_skipToContent">Go to content</localize></button>
<div class="umb-app-header__logo" ng-if="hideBackofficeLogo !== true">
<button type="button"
id="umbraco-logo-mark"