add fallback screen reader styles (https://github.com/woocommerce/woocommerce-blocks/pull/3557)

* add fallback screen reader styles

* use shared blocks screen-reader styles from mixin:
- tweak mixin to align with focus-reveal style
- add new mixin for focus-reveal style, since it is coupled to
visually-hidden mixin

plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss

@@ -52,6 +52,7 @@ $fontSizes: (
 
 // Hide an element from sighted users, but available to screen reader users.
 @mixin visually-hidden() {
+	border: 0;
 	clip: rect(1px, 1px, 1px, 1px);
 	clip-path: inset(50%);
 	height: 1px;
@@ -61,6 +62,29 @@ $fontSizes: (
 	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
 	overflow-wrap: normal !important;
 	word-wrap: normal !important;
+	padding: 0;
+	position: absolute !important;
+	width: 1px;
+}
+
+@mixin visually-hidden-focus-reveal() {
+	background-color: #fff;
+	border-radius: 3px;
+	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+	clip: auto !important;
+	clip-path: none;
+	color: $input-text-active;
+	display: block;
+	font-size: 0.875rem;
+	font-weight: 700;
+	height: auto;
+	left: 5px;
+	line-height: normal;
+	padding: 15px 23px 14px;
+	text-decoration: none;
+	top: 5px;
+	width: auto;
+	z-index: 100000;
 }
 
 @mixin reset-box() {

plugins/woocommerce-blocks/assets/css/style.scss

@@ -303,3 +303,11 @@
 		}
 	}
 }
+
+// Default screen-reader styles. Included as a fallback for themes that don't have support.
+.screen-reader-text {
+	@include visually-hidden();
+}
+.screen-reader-text:focus {
+	@include visually-hidden-focus-reveal();
+}