diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss index 8ebd587a7..e270c8528 100644 --- a/src/core/components/combobox/combobox.scss +++ b/src/core/components/combobox/combobox.scss @@ -121,15 +121,7 @@ ion-button { text-overflow: ellipsis; } .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; + @include sr-only(); } &.ion-activated { diff --git a/src/theme/bootstrap.scss b/src/theme/bootstrap.scss index 0be89e900..673073c71 100644 --- a/src/theme/bootstrap.scss +++ b/src/theme/bootstrap.scss @@ -1,14 +1,7 @@ // Text for accessibility, hidden from the view. .sr-only, .accesshide { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; + @include sr-only(); + display: block !important; } diff --git a/src/theme/helpers/custom.mixins.scss b/src/theme/helpers/custom.mixins.scss index 2fab25f57..dac3ec43c 100644 --- a/src/theme/helpers/custom.mixins.scss +++ b/src/theme/helpers/custom.mixins.scss @@ -95,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 */ diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 1d3f41565..62e2bd598 100644 --- a/src/theme/theme.base.scss +++ b/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;