pkp/pkp-lib Address RTL issues for 'screenreader only' styling, which…

… was creating additional space

src/components/Container/StatsPage.vue

@@ -257,10 +257,12 @@ export default {
 }
 
 .pkpStats__sidebar {
-	position: absolute;
-	left: -9999px;
-	opacity: 0;
-	width: 0;
+	/** Intention here seems to be hiding from screen, but keeping for screen reader
+		Not sure if thats best practice in this case, but for now using tailwindcss classes,
+		which work with RTL. 
+	*/
+
+	@apply sr-only;
 
 	+ .pkpStats__content {
 		float: right;
@@ -279,6 +281,7 @@ export default {
 }
 
 .pkpStats__sidebar.-isVisible {
+	@apply not-sr-only;
 	float: left;
 	position: relative;
 	left: 0;
@@ -494,9 +497,6 @@ export default {
 
 [dir='rtl'] {
 	.pkpStats__sidebar {
-		left: auto;
-		right: -9999px;
-
 		+ .pkpStats__content {
 			float: left;
 		}

src/styles/elements/screen-reader.less

@@ -1,7 +1,14 @@
 .-screenReader {
-	clip: rect(1px, 1px, 1px, 1px);
-	position: absolute !important;
-	left: -2000px;
+	/* better version of screen reader only (from tailwindcss) to work with RTL*/
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border-width: 0;
 
 	&:focus {
 		background-color: #fff;