From db6d572235afc7e061ecd4eabd10a5e9bbd2575c Mon Sep 17 00:00:00 2001
From: Rachel Breeze <RachBreeze@users.noreply.github.com>
Date: Tue, 6 Apr 2021 02:50:14 +0100
Subject: [PATCH] Accessibility: Alerts the user how many results have been
 returned on a tree search (#10100)

* 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

* Tree search details the number of search items returned

* Add French translations
---
 .../tree/umb-tree-search-results.html         | 49 +++++++++----------
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml |  4 ++
 .../Umbraco/config/lang/en_us.xml             |  4 ++
 src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml |  4 ++
 4 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-results.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-results.html
index f472251624a2..fbabf4c67c9c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-results.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-results.html
@@ -1,30 +1,29 @@
 <div>
-  <umb-empty-state ng-if="results.length === 0" position="{{emptySearchResultPosition}}">
-    <localize key="general_searchNoResult">Sorry, we can not find what you are looking for.</localize>
-  </umb-empty-state>
-
-  <ul class="umb-tree">
-    <li class="root">
-      <ul class="umb-search-group">
-        <li class="umb-search-group-item" ng-repeat="result in results">
-          <div ng-class="{ 'umb-tree-node-checked': result.selected }">
-            <button type="button"
-                    class="btn-reset umb-search-group-item-link"
-                    ng-class="{ first: $first }"
-                    ng-click="selectResultCallback($event, result)">
-                <span class="umb-search-group-item-name">
-                    <umb-icon icon="{{result.selected ? 'icon-check' : result.icon}}"
-                              class="icon umb-tree-icon sprTree {{result.selected ? 'icon-check' : result.icon}}">
-                    </umb-icon>
-                    <span class="umb-search-group-item-name__text">{{ result.name }}</span>
-                </span>
-                <small class="search-subtitle" ng-if="result.subTitle">{{ result.subTitle }}</small>
-            </button>
-          </div>
+    <umb-empty-state ng-if="results.length === 0" position="{{emptySearchResultPosition}}">
+        <p role="alert"><localize key="general_searchNoResult">Sorry, we can not find what you are looking for.</localize></p>
+    </umb-empty-state>
+    <p ng-if="results.length === 1" role="alert">1 <localize key="treeSearch_searchResult">item returned</localize></p>
+    <p ng-if="results.length > 1" role="alert">{{results.length}} <localize key="treeSearch_searchResults">items returned</localize></p>
+    <ul class="umb-tree">
+        <li class="root">
+            <ul class="umb-search-group">
+                <li class="umb-search-group-item" ng-repeat="result in results">
+                    <div ng-class="{ 'umb-tree-node-checked': result.selected }">
+                        <button type="button"
+                                class="btn-reset umb-search-group-item-link"
+                                ng-class="{ first: $first }"
+                                ng-click="selectResultCallback($event, result)">
+                            <span class="umb-search-group-item-name">
+                                <umb-icon icon="{{result.selected ? 'icon-check' : result.icon}}" class="icon umb-tree-icon sprTree {{result.selected ? 'icon-check' : result.icon}}"></umb-icon>
+                                <span class="umb-search-group-item-name__text">{{ result.name }}</span>
+                            </span>
+                            <small class="search-subtitle" ng-if="result.subTitle">{{ result.subTitle }}</small>
+                        </button>
+                    </div>
+                </li>
+            </ul>
         </li>
-      </ul>
-    </li>
-  </ul>
+    </ul>
 
 </div>
 
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 6559b2565a27..38dde65f5722 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2577,4 +2577,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>
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 2b7c3ec842c0..f7d634171179 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2596,4 +2596,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>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml
index 8900272af754..69e2189c6787 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/fr.xml
@@ -2372,4 +2372,8 @@ Pour gérer votre site, ouvrez simplement le backoffice Umbraco et commencez à
         ]]>
     </key>
   </area>
+  <area alias="treeSearch">
+    <key alias="searchResult">élément retrouvé</key>
+    <key alias="searchResults">éléments retrouvés</key>
+  </area>
 </language>