From 2ce0378c2b9ad9edaa13b554169a285b7a9c8b05 Mon Sep 17 00:00:00 2001
From: BatJan <1932158+BatJan@users.noreply.github.com>
Date: Fri, 2 Oct 2020 09:46:36 +0200
Subject: [PATCH 1/4] Ensure the "clear" button is tabable and add
 accessibility attributes and texts for the overlay

---
 .../views/components/application/umb-search.html    | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 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
index cc1c8abb7ef2..7c6522b720db 100644
--- 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,5 +1,12 @@
 
-<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">Search the Umbraco backoffice</h1>
+        <p id="search-overlay-description">Search for content nodes, media nodes etc. - This will do a search for the
+            entire backoffice.</p>
+    </div>
 
     <div class="flex items-center">
         <label for="app-search" class="umb-search__label">
@@ -15,10 +22,10 @@
             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()">
+        <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>

From fd5c617257c2bfc9f89b53bddd050f9abc1e980c Mon Sep 17 00:00:00 2001
From: BatJan <1932158+BatJan@users.noreply.github.com>
Date: Fri, 2 Oct 2020 10:46:35 +0200
Subject: [PATCH 2/4] Add sr-only texts and useful aria attributes

---
 .../components/application/umb-search.html    | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 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
index 7c6522b720db..9263c4efb56f 100644
--- 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
@@ -4,17 +4,18 @@
 
     <div class="sr-only">
         <h1 id="search-overlay-title">Search the Umbraco backoffice</h1>
-        <p id="search-overlay-description">Search for content nodes, media nodes etc. - This will do a search for the
-            entire backoffice.</p>
+        <p id="search-overlay-description">Search for content nodes, media nodes etc. across the backoffice.</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">When autocomplete results are available, press up and down arrows,
+            or use the tab key and use the enter key to select.</span>
         <input
             class="umb-search-input"
             type="text"
@@ -24,24 +25,33 @@ <h1 id="search-overlay-title">Search the Umbraco backoffice</h1>
             localize="placeholder"
             placeholder="@placeholders_search"
             id="app-search"
-            focus-when="{{vm.searchHasFocus}}" />
+            focus-when="{{vm.searchHasFocus}}"
+            aria-describedby="search-input-description"
+            aria-expanded="false"
+            aria-owns="search-results"
+            aria-autocomplete="both"
+        />
         <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>
                         <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">Path: </span>
+                                <span>{{result.subTitle}}</span>
+                            </span>
                         </span>
                     </a>
+                    <span class="sr-only">Found in {{key}}</span>
                 </li>
             </ul>
         </div>

From db98602cf474d50a604f01eda90f9fccae00950c Mon Sep 17 00:00:00 2001
From: BatJan <1932158+BatJan@users.noreply.github.com>
Date: Fri, 2 Oct 2020 11:22:39 +0200
Subject: [PATCH 3/4] Convert i to umb-icon and fix wrong values in aria
 attributes

---
 .../src/views/components/application/umb-search.html        | 6 +++---
 1 file changed, 3 insertions(+), 3 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
index 9263c4efb56f..b2d956a18d31 100644
--- 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
@@ -27,9 +27,9 @@ <h1 id="search-overlay-title">Search the Umbraco backoffice</h1>
             id="app-search"
             focus-when="{{vm.searchHasFocus}}"
             aria-describedby="search-input-description"
-            aria-expanded="false"
+            aria-expanded="{{vm.hasResults}}"
             aria-owns="search-results"
-            aria-autocomplete="both"
+            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>
@@ -42,7 +42,7 @@ <h1 id="search-overlay-title">Search the Umbraco backoffice</h1>
             <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">

From 96ce3e21050342a501194c43209946f9b13977f1 Mon Sep 17 00:00:00 2001
From: BatJan <1932158+BatJan@users.noreply.github.com>
Date: Fri, 2 Oct 2020 12:01:46 +0200
Subject: [PATCH 4/4] Add translation mappings

---
 .../components/application/umb-search.html    | 24 ++++++++++++++-----
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml |  5 ++++
 .../Umbraco/config/lang/en_us.xml             |  5 ++++
 3 files changed, 28 insertions(+), 6 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
index b2d956a18d31..76098d1308ff 100644
--- 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
@@ -3,8 +3,13 @@
     aria-labelledby="search-overlay-title" aria-describedby="search-overlay-description">
 
     <div class="sr-only">
-        <h1 id="search-overlay-title">Search the Umbraco backoffice</h1>
-        <p id="search-overlay-description">Search for content nodes, media nodes etc. across the backoffice.</p>
+        <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">
@@ -14,8 +19,11 @@ <h1 id="search-overlay-title">Search the Umbraco backoffice</h1>
                 <localize key="general_search">Search...</localize>
             </span>
         </label>
-        <span class="sr-only" id="search-input-description">When autocomplete results are available, press up and down arrows,
-            or use the tab key and use the enter key to select.</span>
+        <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"
@@ -46,12 +54,16 @@ <h1 id="search-overlay-title">Search the Umbraco backoffice</h1>
                         <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">
-                                <span class="sr-only">Path: </span>
+                                <span class="sr-only">
+                                    <localize key="visuallyHiddenTexts_path">Path:</localize>
+                                </span>
                                 <span>{{result.subTitle}}</span>
                             </span>
                         </span>
                     </a>
-                    <span class="sr-only">Found in {{key}}</span>
+                    <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
index 63963dcc46ba..acd14b0accfc 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2278,6 +2278,11 @@ To manage your website, simply open the Umbraco back office and start adding con
       <key alias="hasTranslation">Has translation</key>
       <key alias="noTranslation">Missing translation</key>
       <key alias="dictionaryListCaption">Dictionary items</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>
   </area>
   <area alias="references">
     <key alias="tabName">References</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
index 3ede47755de6..80fedddc067c 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2300,6 +2300,11 @@ To manage your website, simply open the Umbraco back office and start adding con
       <key alias="hasTranslation">Has translation</key>
       <key alias="noTranslation">Missing translation</key>
       <key alias="dictionaryListCaption">Dictionary items</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>
   </area>
   <area alias="references">
     <key alias="tabName">References</key>