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

src/Umbraco.Core/Persistence/Repositories/Implement/MemberRepository.cs

@@ -133,7 +133,7 @@ protected virtual Sql<ISqlContext> GetBaseQuery(QueryType queryType, bool curren
 
                 // joining the type so we can do a query against the member type - not sure if this adds much overhead or not?
                 // the execution plan says it doesn't so we'll go with that and in that case, it might be worth joining the content
-                // types by default on the document and media repo's so we can query by content type there too.
+                // types by default on the document and media repos so we can query by content type there too.
                 .InnerJoin<ContentTypeDto>().On<ContentDto, ContentTypeDto>(left => left.ContentTypeId, right => right.NodeId);
 
             sql.Where<NodeDto>(x => x.NodeObjectType == NodeObjectTypeId);
@@ -546,6 +546,15 @@ protected override string ApplySystemOrdering(ref Sql<ISqlContext> sql, Ordering
             if (ordering.OrderBy.InvariantEquals("userName"))
                 return SqlSyntax.GetFieldName<MemberDto>(x => x.LoginName);
 
+            if (ordering.OrderBy.InvariantEquals("updateDate"))
+                return SqlSyntax.GetFieldName<ContentVersionDto>(x => x.VersionDate);
+
+            if (ordering.OrderBy.InvariantEquals("createDate"))
+                return SqlSyntax.GetFieldName<NodeDto>(x => x.CreateDate);
+
+            if (ordering.OrderBy.InvariantEquals("contentTypeAlias"))
+                return SqlSyntax.GetFieldName<ContentTypeDto>(x => x.Alias);
+
             return base.ApplySystemOrdering(ref sql, ordering);
         }
 

src/Umbraco.Tests/Composing/CompositionTests.cs

@@ -4,6 +4,7 @@
 using Umbraco.Core;
 using Umbraco.Core.Cache;
 using Umbraco.Core.Composing;
+using Umbraco.Core.IO;
 using Umbraco.Core.Logging;
 
 namespace Umbraco.Tests.Composing
@@ -35,7 +36,7 @@ public void FactoryIsResolvable()
                 .Returns(() => factoryFactory?.Invoke(mockedFactory));
 
             var logger = new ProfilingLogger(Mock.Of<ILogger>(), Mock.Of<IProfiler>());
-            var typeLoader = new TypeLoader(Mock.Of<IAppPolicyCache>(), "", logger);
+            var typeLoader = new TypeLoader(Mock.Of<IAppPolicyCache>(), IOHelper.MapPath("~/App_Data/TEMP"), logger);
             var composition = new Composition(mockedRegister, typeLoader, logger, Mock.Of<IRuntimeState>());
 
             // create the factory, ensure it is the mocked factory

src/Umbraco.Tests/Services/MemberServiceTests.cs

@@ -96,8 +96,7 @@ public void Can_Create_Member_With_Properties()
 
             var properties = pmember.Properties.ToList();
 
-            for (var i = 0; i < aliases.Length; i++)
-                Assert.AreEqual(properties[i].Alias, aliases[i]);
+            Assert.IsTrue(properties.Select(x => x.Alias).ContainsAll(aliases));
 
             var email = properties[aliases.IndexOf("Email")];
             Assert.AreEqual("xemail", email.GetSourceValue());

src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js

@@ -4,7 +4,7 @@
     function ContentEditController($rootScope, $scope, $routeParams, $q, $window,
         appState, contentResource, entityResource, navigationService, notificationsService,
         serverValidationManager, contentEditingHelper, localizationService, formHelper, umbRequestHelper,
-        editorState, $http, eventsService, overlayService, $location, localStorageService) {
+        editorState, $http, eventsService, overlayService, $location, localStorageService, treeService) {
 
         var evts = [];
         var infiniteMode = $scope.infiniteModel && $scope.infiniteModel.infiniteMode;
@@ -305,7 +305,7 @@
         }
 
         /** Syncs the content item to it's tree node - this occurs on first load and after saving */
-        function syncTreeNode(content, path, initialLoad) {
+        function syncTreeNode(content, path, initialLoad, reloadChildren) {
 
             if (infiniteMode || !path) {
                 return;
@@ -315,6 +315,9 @@
                 navigationService.syncTree({ tree: $scope.treeAlias, path: path.split(","), forceReload: initialLoad !== true })
                     .then(function (syncArgs) {
                         $scope.page.menu.currentNode = syncArgs.node;
+                        if (reloadChildren && syncArgs.node.expanded) {
+                            treeService.loadNodeChildren({node: syncArgs.node});
+                        }
                     }, function () {
                         //handle the rejection
                         console.log("A problem occurred syncing the tree! A path is probably incorrect.")
@@ -446,7 +449,7 @@
                 //needs to be manually set for infinite editing mode
                 $scope.page.isNew = false;
 
-                syncTreeNode($scope.content, data.path);
+                syncTreeNode($scope.content, data.path, false, args.reloadChildren);
 
                 eventsService.emit("content.saved", { content: $scope.content, action: args.action });
 
@@ -851,7 +854,8 @@
                                 return contentResource.publishWithDescendants(content, create, model.includeUnpublished, files, showNotifications);
                             },
                             action: "publishDescendants",
-                            showNotifications: false
+                            showNotifications: false,
+                            reloadChildren: model.includeUnpublished
                         }).then(function (data) {
                             //show all notifications manually here since we disabled showing them automatically in the save method
                             formHelper.showNotifications(data);

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/common/resources/macro.resource.js

@@ -105,6 +105,20 @@ function macroResource($q, $http, umbRequestHelper) {
             );
         },
 
+        getGroupedParameterEditors: function () {
+            return umbRequestHelper.resourcePromise(
+                $http.get(umbRequestHelper.getApiUrl("macroApiBaseUrl", "GetGroupedParameterEditors"),
+                    "Failed to get parameter editors")
+            );
+        },
+
+        getParameterEditorByAlias: function(alias) {
+            return umbRequestHelper.resourcePromise(
+                $http.get(umbRequestHelper.getApiUrl("macroApiBaseUrl", "GetParameterEditorByAlias", { "alias": alias }),
+                    "Failed to get parameter editor")
+            );
+        },
+
         getById: function(id) {
             return umbRequestHelper.resourcePromise(
                 $http.get(umbRequestHelper.getApiUrl("macroApiBaseUrl", "GetById", { "id": id }), "Failed to get macro")

src/Umbraco.Web.UI.Client/src/less/components/umb-table.less

@@ -27,14 +27,13 @@
 
 }
 
+.umb-table__action,
 .umb-table a {
+    background: transparent;
+    border: 0 none;
     text-decoration: none;
-    cursor: pointer;
-
-    &:focus {
-        outline: none;
-        text-decoration: none;
-    }
+    padding: 0;
+    margin-left: 1px;
 }
 
 input.umb-table__input {
@@ -51,20 +50,26 @@ input.umb-table__input {
 }
 
 .umb-table-head__link {
+    background: transparent;
+    border: 0 none;
     position: relative;
-    cursor: default;
     text-decoration: none;
     color: @gray-3;
+    font-size: inherit;
+    font-weight: inherit;
+    padding: 0 1px;
+
     &:hover {
         text-decoration: none;
+        cursor: default;
         color: @gray-3;
     }
 }
 
-.umb-table-head__link .sortable {
+.umb-table-head__link.sortable {
+    cursor: pointer;
     &:hover {
         text-decoration: none;
-        cursor: pointer;
         color: @black;
     }
 }
@@ -136,15 +141,15 @@ input.umb-table__input {
 }
 
 .umb-table-body__link {
-
     color: @ui-option-type;
     font-size: 14px;
     font-weight: bold;
     text-decoration: none;
-    
+
     &:hover, &:focus {
         color: @ui-option-type-hover;
         text-decoration: underline;
+        outline: none;
     }
 }
 

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js

@@ -10,7 +10,7 @@
 (function() {
     "use strict";
 
-    function DataTypePicker($scope, $filter, dataTypeResource, dataTypeHelper, contentTypeResource, localizationService, editorService) {
+    function DataTypePicker($scope, $filter, dataTypeResource, contentTypeResource, localizationService, editorService) {
 
         var vm = this;
 
@@ -122,10 +122,18 @@
                 vm.showTabs = false;
 
                 var regex = new RegExp(vm.searchTerm, "i");
+
+                var userConfigured = filterCollection(vm.userConfigured, regex),
+                    typesAndEditors = filterCollection(vm.typesAndEditors, regex);
+
+                var totalResults = _.reduce(_.pluck(_.union(userConfigured, typesAndEditors), 'count'), (m, n) => m + n, 0);
+
                 vm.filterResult = {
-                    userConfigured: filterCollection(vm.userConfigured, regex),
-                    typesAndEditors: filterCollection(vm.typesAndEditors, regex)
+                    userConfigured: userConfigured,
+                    typesAndEditors: typesAndEditors,
+                    totalResults: totalResults
                 };
+
             } else {
                 vm.filterResult = null;
                 vm.showTabs = true;
@@ -134,11 +142,15 @@
 
         function filterCollection(collection, regex) {
             return _.map(_.keys(collection), function (key) {
+
+                var filteredDataTypes = $filter('filter')(collection[key], function (dataType) {
+                    return regex.test(dataType.name) || regex.test(dataType.alias);
+                });
+
                 return {
                     group: key,
-                    dataTypes: $filter('filter')(collection[key], function (dataType) {
-                        return regex.test(dataType.name) || regex.test(dataType.alias);
-                    })
+                    count: filteredDataTypes.length,
+                    dataTypes: filteredDataTypes
                 }
             });
         }
@@ -150,7 +162,6 @@
             propertyDetails.title = property.name;
 
             $scope.model.itemDetails = propertyDetails;
-
         }
 
         function hideDetailsOverlay() {
@@ -177,7 +188,6 @@
             };
 
             editorService.open(dataTypeSettings);
-
         }
 
         function pickDataType(selectedDataType) {
@@ -205,7 +215,7 @@
         }
 
         function close() {
-            if($scope.model.close) {
+            if ($scope.model.close) {
                 $scope.model.close();
             }
         }

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html

@@ -20,17 +20,19 @@
                         <div class="form-search">
                             <i class="icon-search"></i>
                             <input type="text"
-                                    style="width: 100%"
-                                    ng-change="vm.filterItems()"
-                                    ng-model="vm.searchTerm"
-                                    class="umb-search-field search-query search-input input-block-level"
-                                    localize="placeholder"
-                                    placeholder="@placeholders_filter"
-                                    umb-auto-focus
-                                    no-dirty-check />
+                                   style="width: 100%"
+                                   ng-change="vm.filterItems()"
+                                   ng-model="vm.searchTerm"
+                                   class="umb-search-field search-query search-input input-block-level"
+                                   localize="placeholder"
+                                   placeholder="@placeholders_filter"
+                                   umb-auto-focus
+                                   no-dirty-check />
                         </div>
                     </div>
+
                     <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
+
                     <!-- TABS -->
                     <div ng-if="vm.showTabs">
                         <umb-tabs-nav
@@ -80,47 +82,56 @@ <h5>{{key}}</h5>
                             </div>
                         </umb-tab-content>
                     </div>
+
                     <!-- FILTER RESULTS -->
                     <div ng-if="vm.filterResult">
-                        <h5 class="-border-bottom -black"><localize key="contentTypeEditor_reuse"></localize></h5>
-                        <div ng-repeat="result in vm.filterResult.userConfigured">
-                            <div ng-if="result.dataTypes.length > 0">
-                                <h5>{{result.group}}</h5>
-                                <ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
-                                    <li ng-repeat="dataType in result.dataTypes | orderBy:'name'"
-                                        ng-mouseover="vm.showDetailsOverlay(dataType)"
-                                        ng-click="vm.pickDataType(dataType)">
-                                        <div ng-if="dataType.loading" class="umb-card-grid-item__loading">
-                                            <div class="umb-button__progress"></div>
-                                        </div>
-                                        <a class="umb-card-grid-item" href="" title="{{ dataType.name }}">
-                                            <span>
-                                                <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
-                                                {{ dataType.name }}
-                                            </span>
-                                        </a>
-                                    </li>
-                                </ul>
+                        <div ng-if="vm.filterResult.totalResults > 0">
+                            <h5 class="-border-bottom -black"><localize key="contentTypeEditor_reuse"></localize></h5>
+                            <div ng-repeat="result in vm.filterResult.userConfigured">
+                                <div ng-if="result.dataTypes.length > 0">
+                                    <h5>{{result.group}}</h5>
+                                    <ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
+                                        <li ng-repeat="dataType in result.dataTypes | orderBy:'name'"
+                                            ng-mouseover="vm.showDetailsOverlay(dataType)"
+                                            ng-click="vm.pickDataType(dataType)">
+                                            <div ng-if="dataType.loading" class="umb-card-grid-item__loading">
+                                                <div class="umb-button__progress"></div>
+                                            </div>
+                                            <a class="umb-card-grid-item" href="" title="{{dataType.name}}">
+                                                <span>
+                                                    <i class="{{dataType.icon}}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
+                                                    {{dataType.name}}
+                                                </span>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
                             </div>
                         </div>
-                        <h5 class="-border-bottom -black"><localize key="contentTypeEditor_availableEditors"></localize></h5>
-                        <div ng-repeat="result in vm.filterResult.typesAndEditors">
-                            <div ng-if="result.dataTypes.length > 0">
-                                <h5>{{result.group}}</h5>
-                                <ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
-                                    <li ng-repeat="systemDataType in result.dataTypes | orderBy:'name'"
-                                        ng-mouseover="vm.showDetailsOverlay(systemDataType)"
-                                        ng-click="vm.pickEditor(systemDataType)">
-                                        <a class="umb-card-grid-item" href="" title="{{ systemDataType.name }}">
-                                            <span>
-                                                <i class="{{ systemDataType.icon }}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
-                                                {{ systemDataType.name }}
-                                            </span>
-                                        </a>
-                                    </li>
-                                </ul>
+                        <div ng-if="vm.filterResult.totalResults > 0">
+                            <h5 class="-border-bottom -black"><localize key="contentTypeEditor_availableEditors"></localize></h5>
+                            <div ng-repeat="result in vm.filterResult.typesAndEditors">
+                                <div ng-if="result.dataTypes.length > 0">
+                                    <h5>{{result.group}}</h5>
+                                    <ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
+                                        <li ng-repeat="systemDataType in result.dataTypes | orderBy:'name'"
+                                            ng-mouseover="vm.showDetailsOverlay(systemDataType)"
+                                            ng-click="vm.pickEditor(systemDataType)">
+                                            <a class="umb-card-grid-item" href="" title="{{systemDataType.name}}">
+                                                <span>
+                                                    <i class="{{systemDataType.icon}}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
+                                                    {{systemDataType.name}}
+                                                </span>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
                             </div>
                         </div>
+
+                        <umb-empty-state position="center" ng-if="vm.filterResult.totalResults === 0">
+                            <localize key="general_searchNoResult"></localize>
+                        </umb-empty-state>
                     </div>
 
                 </umb-box-content>