Accessibility: Adding label fors and control ids for the macro picker

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

@@ -1,12 +1,13 @@
 function MacroPickerController($scope, entityResource, macroResource, umbPropEditorHelper, macroService, formHelper, localizationService) {
 
     $scope.macros = [];
+    $scope.a11yInfo = "";
     $scope.model.selectedMacro = null;
     $scope.model.macroParams = [];
-
+    $scope.displayA11YMessageForFilter = displayA11YMessageForFilter;
     $scope.wizardStep = "macroSelect";
     $scope.noMacroParams = false;
-
+    $scope.model.searchTerm = "";
     function onInit() {
         if (!$scope.model.title) {
             localizationService.localize("defaultdialogs_selectMacro").then(function (value) {
@@ -49,6 +50,7 @@ function MacroPickerController($scope, entityResource, macroResource, umbPropEdi
                         $scope.model.submit($scope.model);
                     } else {
                         $scope.wizardStep = 'macroSelect';
+                        displayA11yMessages($scope.macros);
                     }
 
                 } else {
@@ -95,6 +97,28 @@ function MacroPickerController($scope, entityResource, macroResource, umbPropEdi
             });
     }
 
+    function displayA11yMessages(macros) {
+        if ($scope.noMacroParams || !macros || macros.length === 0)
+            localizationService.localize("general_searchNoResult").then(function (value) {
+                $scope.a11yInfo = value;
+            });
+        else if (macros) {
+            if (macros.length === 1) {
+                localizationService.localize("treeSearch_searchResult").then(function(value) {
+                    $scope.a11yInfo = "1 " + value;
+                });
+            } else {
+                localizationService.localize("treeSearch_searchResults").then(function (value) {
+                    $scope.a11yInfo = macros.length + " " + value;
+                });
+            }
+        }
+    }
+
+    function displayA11YMessageForFilter() {
+        var macros = _.filter($scope.macros, v => v.name.toLowerCase().includes($scope.model.searchTerm.toLowerCase()));
+        displayA11yMessages(macros);
+    }
     //here we check to see if we've been passed a selected macro and if so we'll set the
     //editor to start with parameter editing
     if ($scope.model.dialogData && $scope.model.dialogData.macroData) {
@@ -141,10 +165,11 @@ function MacroPickerController($scope, entityResource, macroResource, umbPropEdi
                 //we don't have a pre-selected macro so ensure the correct step is set
                 $scope.wizardStep = 'macroSelect';
             }
+            displayA11yMessages($scope.macros);
         });
 
     onInit();
-
+    
 }
 
 angular.module("umbraco").controller("Umbraco.Overlays.MacroPickerController", MacroPickerController);

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

@@ -16,18 +16,18 @@
                     <div ng-switch="wizardStep">
 
                         <div ng-switch-when="macroSelect" class="macro-select">
-
-                            <umb-search-filter
-                                input-id="macro-search"
-                                model="searchTerm"
-                                label-key="placeholders_filter"
-                                text="Type to filter..."
-                                css-class="w-100 mb-15"
-                                auto-focus="true">
+                            <label for="macro-search" class="sr-only">{{model.title}}</label>
+                            <umb-search-filter input-id="macro-search"
+                                               model="model.searchTerm"
+                                               label-key="placeholders_filter"
+                                               text="Type to filter..."
+                                               css-class="w-100 mb-15"
+                                               on-change="displayA11YMessageForFilter()"
+                                               auto-focus="true">
                             </umb-search-filter>
-
+                            <p ng-bind="a11yInfo" class="sr-only" role="alert"></p>
                             <ul class="umb-card-grid -three-in-row">
-                                <li ng-repeat="availableItem in macros | orderBy:'name' | filter:searchTerm">
+                                <li ng-repeat="availableItem in macros | orderBy:'name' | filter:model.searchTerm">
                                     <button class="btn-reset umb-card-grid-item" title="{{availableItem.name}}" ng-click="selectMacro(availableItem)">
                                         <span>
                                             <i class="icon-settings-alt" aria-hidden="true"></i>
@@ -38,7 +38,7 @@
                             </ul>
 
                             <umb-empty-state ng-if="nomacros"
-                                                position="center">
+                                             position="center">
                                 <localize key="defaultdialogs_noMacros">
                                     There are no macros available to insert
                                 </localize>
@@ -53,7 +53,7 @@ <h5>{{model.selectedMacro.name}}</h5>
                                 <li ng-repeat="param in model.macroParams">
 
                                     <ng-form name="parameterForm">
-                                        <umb-control-group label="{{param.name}}">
+                                        <umb-control-group label="{{param.name}}" alias="{{param.alias}}">
                                             <umb-property-editor model="param"></umb-property-editor>
                                         </umb-control-group>
                                     </ng-form>

src/Umbraco.Web.UI/Umbraco/config/lang/en.xml

@@ -2576,4 +2576,8 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="viewPublishedContentAcceptButton">View published version</key>
     <key alias="viewPublishedContentDeclineButton">Stay in preview mode</key>
   </area>
+  <area alias="treeSearch">
+    <key alias="searchResult">item returned</key>
+    <key alias="searchResults">items returned</key>
+  </area>
 </language>

src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml

@@ -2595,4 +2595,8 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="viewPublishedContentAcceptButton">View published version</key>
     <key alias="viewPublishedContentDeclineButton">Stay in preview mode</key>
   </area>
+  <area alias="treeSearch">
+    <key alias="searchResult">item returned</key>
+    <key alias="searchResults">items returned</key>
+  </area>
 </language>