From 3f9c31b6a1fe06f48c8e5c4dfb40716f3cbe8508 Mon Sep 17 00:00:00 2001
From: Sami Keijonen <sami.keijonen@foxnet.fi>
Date: Sun, 22 Oct 2017 19:00:06 +0300
Subject: [PATCH] Update screen-reader-text class.

---
 sass/modules/_accessibility.scss |  9 +++++++--
 style.css                        | 12 ++++++++----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/sass/modules/_accessibility.scss b/sass/modules/_accessibility.scss
index f71106bd..469887cc 100644
--- a/sass/modules/_accessibility.scss
+++ b/sass/modules/_accessibility.scss
@@ -1,10 +1,14 @@
 /* Text meant only for screen readers. */
 .screen-reader-text {
+	border: 0;
 	clip: rect(1px, 1px, 1px, 1px);
-	position: absolute !important;
+	clip-path: inset(50%);
 	height: 1px;
-	width: 1px;
+	margin: -1px;
 	overflow: hidden;
+	padding: 0;
+	position: absolute !important;
+	width: 1px;
 	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
 
 	&:focus {
@@ -12,6 +16,7 @@
 		border-radius: 3px;
 		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 		clip: auto !important;
+		clip-path: none;
 		color: $color__text-screen;
 		display: block;
 		@include font-size(0.875);
diff --git a/style.css b/style.css
index 380dac3c..97018e5b 100644
--- a/style.css
+++ b/style.css
@@ -599,13 +599,16 @@ a:hover, a:active {
 --------------------------------------------------------------*/
 /* Text meant only for screen readers. */
 .screen-reader-text {
+	border: 0;
 	clip: rect(1px, 1px, 1px, 1px);
-	position: absolute !important;
+	clip-path: inset(50%);
 	height: 1px;
-	width: 1px;
+	margin: -1px;
 	overflow: hidden;
-	word-wrap: normal !important;
-	/* Many screen reader and browser combinations announce broken words as they would appear visually. */
+	padding: 0;
+	position: absolute !important;
+	width: 1px;
+	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
 }
 
 .screen-reader-text:focus {
@@ -613,6 +616,7 @@ a:hover, a:active {
 	border-radius: 3px;
 	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 	clip: auto !important;
+	clip-path: none;
 	color: #21759b;
 	display: block;
 	font-size: 14px;