Merge pull request #6780 from kjac/v8/fix/sections-tray-keyboard-navigation

V8: Fix keyboard through the sections tray on small screens

src/Umbraco.Web.UI.Client/src/less/sections.less

@@ -118,6 +118,7 @@ ul.sections-tray {
             text-decoration: none;
             display: block;
             position: relative;
+            outline: none;
 
             &::after {
                 content: "";
@@ -131,6 +132,13 @@ ul.sections-tray {
                 top: 0;
                 left: 0;
             }
+
+            &:focus .section__name {
+                .tabbing-active & {
+                    border: 1px solid;
+                    border-color: @gray-9;
+                }
+            }
         }
     }
 }

src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html

@@ -12,7 +12,9 @@
             </li>
 
             <li data-element="section-expand" class="expand" ng-class="{ 'open': showTray === true }" ng-show="needTray">
-                <a href ng-click="trayClick()"><i></i><i></i><i></i></a>
+                <a href="#" ng-click="trayClick()" prevent-default>
+                    <span class="section__name"><i></i><i></i><i></i></span>
+                </a>
 
                 <ul id="applications-tray" class="sections-tray shadow-depth-2" ng-if="showTray" on-outside-click="trayClick()">
                     <li ng-repeat="section in sections | limitTo: overflowingSections" ng-class="{current: section.alias == currentSection}">