WIP/Issue - Improving accessibility of the three dot tree options but…

…ton (#6561)

* 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

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

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>

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>

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>