Search overlay: Improve accessibility (#9035)

* Ensure the "clear" button is tabable and add accessibility attributes and texts for the overlay * Add sr-only texts and useful aria attributes * Convert i to umb-icon and fix wrong values in aria attributes * Add translation mappings Co-authored-by: Nathan Woulfe <[email protected]>
umbraco · Dec 2, 2020 · 8d681f1 · 8d681f1
1 parent b5ae399
commit 8d681f1
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 9 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-search.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-search.html
@@ -1,40 +1,69 @@
 
-<div class="umb-search" on-outside-click="vm.closeSearch()" ng-keydown="vm.handleKeyDown($event)">
+<div class="umb-search" on-outside-click="vm.closeSearch()" ng-keydown="vm.handleKeyDown($event)" role="dialog"
+    aria-labelledby="search-overlay-title" aria-describedby="search-overlay-description">
+
+    <div class="sr-only">
+        <h1 id="search-overlay-title">
+            <localize key="visuallyHiddenTexts_searchOverlayTitle">Search the Umbraco backoffice</localize>
+        </h1>
+        <p id="search-overlay-description">
+            <localize key="visuallyHiddenTexts_searchOverlayDescription">Search for content nodes, media nodes etc. across the
+                backoffice.</localize>
+        </p>
+    </div>
 
     <div class="flex items-center">
         <label for="app-search" class="umb-search__label">
-            <i class="umb-search-input-icon icon-search" aria-hidden="true"></i>
+            <umb-icon icon="icon-search" class="umb-search-input-icon icon-search"></umb-icon>
             <span class="sr-only">
                 <localize key="general_search">Search...</localize>
             </span>
         </label>
+        <span class="sr-only" id="search-input-description">
+            <localize key="visuallyHiddenTexts_searchInputDescription">When autocomplete results are available, press up and
+                down arrows,
+                or use the tab key and use the enter key to select.</localize>
+        </span>
         <input
             class="umb-search-input"
             type="text"
             ng-model="vm.searchQuery"
             ng-model-options="{ debounce: 200 }"
             ng-change="vm.search(vm.searchQuery)"
             localize="placeholder"
-            placeholder="@placeholders_search" 
+            placeholder="@placeholders_search"
             id="app-search"
-            focus-when="{{vm.searchHasFocus}}" />
-        <button ng-show="vm.searchQuery.length > 0" tabindex="-1" class="umb-search-input-clear umb-animated" ng-click="vm.clearSearch()">
+            focus-when="{{vm.searchHasFocus}}"
+            aria-describedby="search-input-description"
+            aria-expanded="{{vm.hasResults}}"
+            aria-owns="search-results"
+            aria-autocomplete="list"
+        />
+        <button ng-show="vm.searchQuery.length > 0" class="umb-search-input-clear umb-animated" ng-click="vm.clearSearch()">
             <localize key="general_clear">Clear</localize>
         </button>
     </div>
 
     <div class="umb-search-results">
-        <div class="umb-search-group" ng-repeat="(key, group) in vm.searchResults">
-            <div class="umb-search-group__title">{{key}}</div>
+        <div class="umb-search-group" ng-repeat="(key, group) in vm.searchResults" id="search-results" role="listbox">
+            <div class="umb-search-group__title" aria-hidden="true">{{key}}</div>
             <ul class="umb-search-items">
                 <li class="umb-search-item" ng-repeat="result in group.results" active-result="{{result === vm.activeResult}}">
                     <a class="umb-search-result__link" ng-href="#/{{result.editorPath}}" ng-click="vm.clickItem(result)">
-                        <i class="umb-search-result__icon {{result.icon}}"></i>
+                        <umb-icon icon="{{result.icon}}" class="umb-search-result__icon {{result.icon}}"></umb-icon>
                         <span class="umb-search-result__meta">
                             <span class="umb-search-result__name">{{result.name}}</span>
-                            <span class="umb-search-result__description" ng-show="result.subTitle">{{result.subTitle}}</span>
+                            <span class="umb-search-result__description" ng-show="result.subTitle">
+                                <span class="sr-only">
+                                    <localize key="visuallyHiddenTexts_path">Path:</localize>
+                                </span>
+                                <span>{{result.subTitle}}</span>
+                            </span>
                         </span>
                     </a>
+                    <span class="sr-only">
+                        <localize key="visuallyHiddenTexts_foundIn">Found in</localize> {{key}}
+                    </span>
                 </li>
             </ul>
         </div>

diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2274,6 +2274,11 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="name">Name</key>
     <key alias="addNewRow">Add new row</key>
     <key alias="tabExpand">View more options</key>
+    <key alias="searchOverlayTitle">Search the Umbraco backoffice</key>
+    <key alias="searchOverlayDescription">Search for content nodes, media nodes etc. across the backoffice.</key>
+    <key alias="searchInputDescription">When autocomplete results are available, press up and down arrows, or use the tab key and use the enter key to select.</key>
+    <key alias="path">Path: </key>
+    <key alias="foundIn">Found in</key>
     <key alias="hasTranslation">Has translation</key>
     <key alias="noTranslation">Missing translation</key>
     <key alias="dictionaryListCaption">Dictionary items</key>

diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2295,6 +2295,11 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="name">Name</key>
     <key alias="addNewRow">Add new row</key>
     <key alias="tabExpand">View more options</key>
+    <key alias="searchOverlayTitle">Search the Umbraco backoffice</key>
+    <key alias="searchOverlayDescription">Search for content nodes, media nodes etc. across the backoffice.</key>
+    <key alias="searchInputDescription">When autocomplete results are available, press up and down arrows, or use the tab key and use the enter key to select.</key>
+    <key alias="path">Path: </key>
+    <key alias="foundIn">Found in</key>
     <key alias="hasTranslation">Has translation</key>
     <key alias="noTranslation">Missing translation</key>
     <key alias="dictionaryListCaption">Dictionary items</key>