From b5ae399cf8497e6a9db5e6e735be93636cbc18b9 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <1932158+BatJan@users.noreply.github.com>
Date: Wed, 2 Dec 2020 22:42:07 +0100
Subject: [PATCH] Contextmenu: Add focus lock (#9027)

* Move the wrapping div of the context-menu directive inside the directive instead

* Add focus lock, attributes and temporary hardcoded text description of the overlay

* Remove umb-auto-focus directive

* Add dictionary key for the visuallyhidden description

* Add tranlsation key for en-us

Co-authored-by: Nathan Woulfe <nathan@nathanw.com.au>
---
 .../application/umb-contextmenu.html          | 34 ++++++++++++-------
 .../application/umb-navigation.html           | 16 ++++-----
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml |  9 ++---
 .../Umbraco/config/lang/en_us.xml             |  9 ++---
 4 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html
index 820ef4a886..0aa2e258a3 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html
@@ -1,16 +1,24 @@
-<div on-outside-click="outSideClick()">
-    <div class='umb-modalcolumn-header'>
-        <h1>{{menuDialogTitle}}</h1>
-    </div>
+<div id="contextMenu" class="umb-modalcolumn fill shadow" ng-animate="'slide'" umb-focus-lock role="dialog"
+    aria-labelledby="contextmenu-title" aria-describedby="contextmenu-description" on-outside-click="outSideClick()">
+    <div>
+        <div class="umb-modalcolumn-header">
+            <h1 id="contextmenu-title">{{ menuDialogTitle }}</h1>
+            <p id="contextmenu-description" class="sr-only">
+                <localize key="visuallyHiddenTexts_contextMenuDescription">Select one of the options to edit the node.</localize>
+            </p>
+        </div>
 
-    <div class='umb-modalcolumn-body'>
-        <ul class="umb-actions">
-            <li data-element="action-{{action.alias}}" class="umb-action" ng-class="{sep:action.separator, '-opens-dialog': action.opensDialog}" ng-repeat="action in menuActions">
-                <button type="button" umb-auto-focus="{{$index === 0}}" ng-click="executeMenuItem(action)" class="umb-action-link btn-reset umb-outline" prevent-default>
-                    <i class="icon icon-{{action.cssclass}}" aria-hidden="true"></i>
-                    <span class="menu-label">{{action.name}}</span>
-                </button>
-            </li>
-        </ul>
+        <div class="umb-modalcolumn-body">
+            <ul class="umb-actions">
+                <li data-element="action-{{action.alias}}" class="umb-action"
+                    ng-class="{sep:action.separator, '-opens-dialog': action.opensDialog}" ng-repeat="action in menuActions">
+                    <button type="button" ng-click="executeMenuItem(action)"
+                        class="umb-action-link btn-reset umb-outline">
+                        <i class="icon icon-{{action.cssclass}}" aria-hidden="true"></i>
+                        <span class="menu-label">{{ action.name }}</span>
+                    </button>
+                </li>
+            </ul>
+        </div>
     </div>
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
index d75a9a5379..86e905183c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
@@ -45,15 +45,13 @@
 
         <div class="offset6" id="navOffset" style="z-index: 10">
 
-            <!-- The context menu -->
-            <div id='contextMenu' class="umb-modalcolumn fill shadow" ng-if="showContextMenu" ng-animate="'slide'">
-                <umb-context-menu
-                    menu-dialog-title="{{menuDialogTitle}}"
-                    current-section="{{currentSection}}"
-                    current-node="menuNode"
-                    menu-actions="menuActions">
-                </umb-context-menu>
-            </div>
+            <umb-context-menu
+                ng-if="showContextMenu"
+                menu-dialog-title="{{menuDialogTitle}}"
+                current-section="{{currentSection}}"
+                current-node="menuNode"
+                menu-actions="menuActions">
+            </umb-context-menu>
 
             <umb-context-dialog
                 ng-if="showContextMenuDialog"
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index a30db8d3e8..4e86fda61f 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2274,10 +2274,11 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="name">Name</key>
     <key alias="addNewRow">Add new row</key>
     <key alias="tabExpand">View more options</key>
-      <key alias="hasTranslation">Has translation</key>
-      <key alias="noTranslation">Missing translation</key>
-      <key alias="dictionaryListCaption">Dictionary items</key>
-      <key alias="contextDialogDescription">Perform action %0% on the %1% node</key>
+    <key alias="hasTranslation">Has translation</key>
+    <key alias="noTranslation">Missing translation</key>
+    <key alias="dictionaryListCaption">Dictionary items</key>
+    <key alias="contextMenuDescription">Select one of the options to edit the node.</key>
+    <key alias="contextDialogDescription">Perform action %0% on the %1% node</key>
   </area>
   <area alias="references">
     <key alias="tabName">References</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index aa3bdcff45..6c6bdecb8d 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2295,10 +2295,11 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="name">Name</key>
     <key alias="addNewRow">Add new row</key>
     <key alias="tabExpand">View more options</key>
-      <key alias="hasTranslation">Has translation</key>
-      <key alias="noTranslation">Missing translation</key>
-      <key alias="dictionaryListCaption">Dictionary items</key>
-      <key alias="contextDialogDescription">Perform action %0% on the %1% node</key>
+    <key alias="hasTranslation">Has translation</key>
+    <key alias="noTranslation">Missing translation</key>
+    <key alias="dictionaryListCaption">Dictionary items</key>
+    <key alias="contextMenuDescription">Select one of the options to edit the node.</key>
+    <key alias="contextDialogDescription">Perform action %0% on the %1% node</key>
   </area>
   <area alias="references">
     <key alias="tabName">References</key>