From 64de165f2f7657e0ece7c4cad8afe60931d532fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Tue, 19 Dec 2023 09:56:58 +0100
Subject: [PATCH] pkp/pkp-lib Address RTL issues for 'screenreader only'
 styling, which was creating additional space

---
 src/components/Container/StatsPage.vue | 14 +++++++-------
 src/styles/elements/screen-reader.less | 13 ++++++++++---
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/Container/StatsPage.vue b/src/components/Container/StatsPage.vue
index 395469c66..ca3c32068 100644
--- a/src/components/Container/StatsPage.vue
+++ b/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;
 		}
diff --git a/src/styles/elements/screen-reader.less b/src/styles/elements/screen-reader.less
index 16864aed2..64f2c0ba8 100644
--- a/src/styles/elements/screen-reader.less
+++ b/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;