Allow tabbing through the section tray and adjust styles accordingly

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,9 +12,11 @@
             </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()">
+                <ul id="applications-tray" class="sections-tray shadow-depth-2" ng-if="showTray" on-outside-click="trayClick($event)">
                     <li ng-repeat="section in sections | limitTo: overflowingSections" ng-class="{current: section.alias == currentSection}">
                         <a href="#/{{section.alias}}"
                             ng-dblclick="sectionDblClick(section)"