Merge pull request #3442 from NoelDeMartin/MOBILE-4081

MOBILE-4081: Hide network error title

src/core/components/combobox/combobox.scss

@@ -121,15 +121,7 @@ ion-button {
         text-overflow: ellipsis;
     }
     .sr-only {
-        position: absolute;
+        @include sr-only();
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border: 0;
     }
 
     &.ion-activated {

src/theme/bootstrap.scss

@@ -1,14 +1,7 @@
 // Text for accessibility, hidden from the view.
 .sr-only, .accesshide {
-    position: absolute;
+    @include sr-only();
-    width: 1px;
+
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
     display: block !important;
 }
 

src/theme/helpers/custom.mixins.scss

@@ -66,7 +66,6 @@
     }
 }
 
-
 @mixin core-focus() {
     outline: none;
     position: relative;
@@ -96,6 +95,18 @@
     transition: $transitions;
 }
 
+@mixin sr-only() {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
 /**
  * Same as item-push-svg-url but admits flip-rtl
  */
@@ -262,7 +273,7 @@
     @return if($yiq >= 128, $dark, $light);
 }
 
-// WCAG contrast algorythm
+// WCAG contrast algorithm
 @function check-contrast($foreground, $background) {
     $foregroundLumiance: luminance($foreground);
     $backgroundLuminance: luminance($background);

src/theme/theme.base.scss

@@ -436,6 +436,10 @@ div.core-iframe-network-error {
     background: url("/assets/fonts/font-awesome/solid/wifi.svg") no-repeat 50% 50%;
     margin: 25px auto;
 
+    h2 {
+        @include sr-only();
+    }
+
     &::after {
         content: " ";
         position: absolute;