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
umbraco · Apr 6, 2021 · db6d572 · db6d572
1 parent 739d9a8
commit db6d572
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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>