From e21cc6f97eb1d49e2f0060186b57680e4ef44a59 Mon Sep 17 00:00:00 2001
From: Rachel Breeze <RachBreeze@users.noreply.github.com>
Date: Sat, 10 Apr 2021 01:34:18 +0100
Subject: [PATCH] Accessibility: Adding label fors and control ids for the
 macro picker (#10101)

* Added support for screeen reader alerts on the embed so that assitive technology knows when a url retrieve has been succesfull.
Added labels for the controls
Preview reload only triggered if the values for height and width change

* Added support for label fors for the macro picker and also gave the ,acro search box a title

* Now displays a count of the matching macros returned. Please note the language file amends shared with #10100

* Removed src-only class for the display of the count of messages
---
 .../macropicker/macropicker.controller.js     | 31 +++++++++++++++++--
 .../macropicker/macropicker.html              | 24 +++++++-------
 2 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.controller.js
index 40338f2dca..1701553efc 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.controller.js
+++ b/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);
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html
index 33d7a471a5..8bda49b328 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html
+++ b/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" 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 @@
                                 <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>