From 4153cfe78ff510759180a6920f556a306d6f19c1 Mon Sep 17 00:00:00 2001
From: Matthew-Wise <6782865+Matthew-Wise@users.noreply.github.com>
Date: Sun, 27 Oct 2019 14:07:06 +0000
Subject: [PATCH] WIP/Issue - Improving accessibility of the three dot tree
 options button (#6561)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Improves accessability of the three dot tree options button

* Updated list view headers styling to have the link/hand cursor visible only if the header is sortable (and hence clicking has an effect)

* Allows members to be ordered by additional system fields (#6575)

* Fix ContentType.Alias matching in PublishedContentExtensions an… (#6577)

* Fixes an error in #6538 by moving the colon character to the sr-only span

* V8: Move misplaced colon in language selector (#6692)

* V8: It should be possible to disallow all types at content root (#6580)

* Pick macro parameters in an infinite editor like content type properties (#6586)

* Reload node children after publishing with descendants

* Correct URL decoding of macro partial view names (#6592)

* Fix semantics for list views (#6595)

* fixes test

* fixing tests

* Improved menu context
---
 .../directives/components/tree/umbtreeitem.directive.js      | 5 +++--
 .../src/views/components/tree/umb-tree-item.html             | 2 +-
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml                | 1 +
 src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml             | 1 +
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js
index 51eb8ca285ed..975b10d67835 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js
@@ -34,8 +34,9 @@ angular.module("umbraco.directives")
         },
         
         link: function (scope, element, attrs, umbTreeCtrl) {
-            localizationService.localize("general_search").then(function (value) {
-                scope.searchAltText = value;
+            localizationService.localizeMany(["general_search", "visuallyHiddenTexts_openContextMenu"]).then(function (value) {
+                scope.searchAltText = value[0];
+                scope.optionsText = value[1];
             });
             
             // updates the node's DOM/styles
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
index 0630951df7a3..fb8ae6b22f8f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
@@ -14,7 +14,7 @@
         <a class="umb-tree-item__label umb-outline" ng-href="#/{{::node.routePath}}" ng-click="select(node, $event)" title="{{::node.title}}">{{node.name}}</a>
 
         <!-- NOTE: These are the 'option' elipses -->
-        <button data-element="tree-item-options" class="umb-options btn-reset sr-only sr-only--focusable sr-only--hoverable" ng-click="options(node, $event)" ng-if="::node.menuUrl"><i></i><i></i><i></i></button>
+        <button data-element="tree-item-options" class="umb-options btn-reset sr-only sr-only--focusable sr-only--hoverable" ng-click="options(node, $event)" ng-if="::node.menuUrl" aria-label="{{optionsText}} {{node.name}}"><i></i><i></i><i></i></button>
 
         <umb-loader ng-show="node.loading" position="bottom" class="umb-tree-item__loader"></umb-loader>
     </div>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index b04a4d451322..15be061e72cf 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2158,6 +2158,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="openBackofficeSearch">Open backoffice search</key>
     <key alias="openCloseBackofficeHelp">Open/Close backoffice help</key>
     <key alias="openCloseBackofficeProfileOptions">Open/Close your profile options</key>
+    <key alias="openContextMenu">Open context menu for</key>
     <key alias="currentLanguage">Current language</key>
     <key alias="switchLanguage">Switch language to</key>
     <key alias="createNewFolder">Create new folder</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 77d27ebbf529..ea7b7bdf0c8c 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2174,6 +2174,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="openBackofficeSearch">Open backoffice search</key>
     <key alias="openCloseBackofficeHelp">Open/Close backoffice help</key>
     <key alias="openCloseBackofficeProfileOptions">Open/Close your profile options</key>
+    <key alias="openContextMenu">Open context menu for</key>
     <key alias="currentLanguage">Current language</key>
     <key alias="switchLanguage">Switch language to</key>
     <key alias="createNewFolder">Create new folder</key>