From 5c670b620cc08cdf50e1452ee3578249becc0fc4 Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <post@kennjacobsen.dk>
Date: Sun, 20 Oct 2019 11:08:29 +0200
Subject: [PATCH 1/2] Allow tabbing through the section tray and adjust styles
 accordingly

---
 src/Umbraco.Web.UI.Client/src/less/sections.less          | 8 ++++++++
 .../src/views/components/application/umb-sections.html    | 6 ++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/sections.less b/src/Umbraco.Web.UI.Client/src/less/sections.less
index 5551ba6376..40921c5b76 100644
--- a/src/Umbraco.Web.UI.Client/src/less/sections.less
+++ b/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;
+                }
+            }
         }
     }
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
index 4defc3fdb0..d55542ec8e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
+++ b/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)"

From e8d159db4606d867603dce5a74b964293c8200a9 Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <post@kennjacobsen.dk>
Date: Sun, 20 Oct 2019 11:16:14 +0200
Subject: [PATCH 2/2] Remove unused event argument

---
 .../src/views/components/application/umb-sections.html          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
index d55542ec8e..5688ba0e3b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
@@ -16,7 +16,7 @@
                     <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($event)">
+                <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}">
                         <a href="#/{{section.alias}}"
                             ng-dblclick="sectionDblClick(section)"