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

@@ -11,21 +11,21 @@
 // --------------------------------------------------------------------------------------------
 @function get-color-shade-percent($color, $percent: 48%) {
     @return mix(#000, $color, $percent);
-  }
+}
 
-  // Mixes a color with white to create its tint.
+// Mixes a color with white to create its tint.
-  // Default to bootstrap level -10.
+// Default to bootstrap level -10.
-  // --------------------------------------------------------------------------------------------
+// --------------------------------------------------------------------------------------------
-  @function get-color-tint-percent($color, $percent: 80%) {
+@function get-color-tint-percent($color, $percent: 80%) {
     @return mix(#fff, $color, $percent);
-  }
+}
 
-  // Ionic Colors
+// Ionic Colors
-  // --------------------------------------------------
+// --------------------------------------------------
-  // Generates the color classes and variables based on the
+// Generates the color classes and variables based on the
-  // colors map
+// colors map
 
-  @mixin generate-color($color-name, $colors, $theme) {
+@mixin generate-color($color-name, $colors, $theme) {
     $color-themes: map-get($colors, $color-name);
     $base: map-get($color-themes, $theme);
 
@@ -34,9 +34,9 @@
     }
 
     @include generate-color-variants($color-name, $base);
-  }
+}
 
-  @mixin generate-color-variants($color-name, $base) {
+@mixin generate-color-variants($color-name, $base) {
     $contrast: get_contrast_color($base);
     $shade: get-color-shade-percent($base);
     $tint: get-color-tint-percent($base);
@@ -64,10 +64,9 @@
         --ion-color-shade: var(--ion-color-#{$color-name}-shade);
         --ion-color-tint: var(--ion-color-#{$color-name}-tint);
     }
-  }
+}
 
-
+@mixin core-focus() {
- @mixin core-focus() {
     outline: none;
     position: relative;
     &::after {
@@ -78,9 +77,9 @@
         z-index: 1;
         @include core-focus-style();
     }
- }
+}
 
- @mixin core-focus-style() {
+@mixin core-focus-style() {
     box-shadow: inset 0 0 var(--a11y-focus-width) 1px var(--a11y-focus-color);
     // Thicker option:
     // border: var(--a11y-focus-width) solid var(--a11y-focus-color);
@@ -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;