diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml index 19147759e6..efc125d6d5 100644 --- a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml +++ b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml @@ -878,6 +878,8 @@ Header system field Last Updated + Skip to menu + Skip to content Blue diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml index 67da5429bd..78fcd0f13d 100644 --- a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml +++ b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml @@ -908,6 +908,8 @@ Header system field Last Updated + Skip to menu + Skip to content Blue diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js index a184967ca2..71171c2a73 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js @@ -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 = { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less index a9b9cf6936..bc02705187 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less @@ -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; +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html index 9d673ce8bb..fae3543429 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html @@ -1,5 +1,9 @@
+ + + +