From a5fb2d20253df2a39e63e3fb6ae94d6bc67baaee Mon Sep 17 00:00:00 2001
From: Sebastiaan Janssen <sebastiaan@umbraco.com>
Date: Tue, 25 Jun 2019 14:53:58 +0200
Subject: [PATCH] Replace `visually-hidden` in favor of `sr-only` as discussed
 in #5664

---
 .../src/less/accessibility/visually-hidden.less       | 11 -----------
 src/Umbraco.Web.UI.Client/src/less/belle.less         |  3 ---
 .../views/components/application/umb-app-header.html  |  4 ++--
 3 files changed, 2 insertions(+), 16 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/less/accessibility/visually-hidden.less

diff --git a/src/Umbraco.Web.UI.Client/src/less/accessibility/visually-hidden.less b/src/Umbraco.Web.UI.Client/src/less/accessibility/visually-hidden.less
deleted file mode 100644
index 592f9dcb21..0000000000
--- a/src/Umbraco.Web.UI.Client/src/less/accessibility/visually-hidden.less
+++ /dev/null
@@ -1,11 +0,0 @@
-
-// Visually Hidden - used to remove an element from the view, whilst retaining accessibily for screen readers. More info available at https://a11yproject.com/posts/how-to-hide-content/
-// --------------------------------------------------
-
-.visually-hidden {
-    position: absolute !important;
-    height: 1px; 
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-}
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index db1bd30305..0b5e10379f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -80,9 +80,6 @@
 
 @import "forms/umb-validation-label.less";
 
-// Umbraco Accessibility
-@import "accessibility/visually-hidden.less";
-
 // Umbraco Components
 @import "components/application/umb-app-a11y.less"; 
 @import "components/application/umb-app-header.less";
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
index a601940193..93c3a9b50d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
@@ -12,13 +12,13 @@
             <ul class="umb-app-header__actions">
                 <li data-element="global-search" class="umb-app-header__action">
                     <button class="umb-app-header__button btn-reset" hotkey="ctrl+space" ng-click="searchClick()" ng-mousedown="rememberFocus()" prevent-default style="font-size: 20px;">
-                        <span class="visually-hidden">Open/Close backoffice search</span>
+                        <span class="sr-only">Open/Close backoffice search</span>
                         <i class="umb-app-header__action-icon icon-search"></i>
                     </button>
                 </li>
                 <li data-element="global-help" class="umb-app-header__action">
                     <button class="umb-app-header__button btn-reset" hotkey="ctrl+shift+h" ng-click="helpClick()" prevent-default>
-                        <span class="visually-hidden">Open/Close backoffice help window</span>
+                        <span class="sr-only">Open/Close backoffice help window</span>
                         <i class="umb-app-header__action-icon icon-help-alt"></i>
                     </button>
                 </li>