Sharing in list: Use .hidden-visually instead of display:none for accessibility, fix #11661

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

2 files changed, 18 insertions, 5 deletions

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index daf4ef2dd78..0885efa423f 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -559,8 +559,15 @@ a.action > img {
 		opacity: .3;
 		&.action-share {
 			padding: 17px 14px;
-			> span:not(.icon) {
-				display: none;
+			&.permanent:not(.shared-style) .icon-shared + span {
+				/* hide text of the share action */
+				/* .hidden-visually for accessbility */
+				position: absolute;
+				left:-10000px;
+				top: auto;
+				width: 1px;
+				height: 1px;
+				overflow: hidden;
 			}
 			.avatar {
 				display: inline-block;
@@ -770,7 +777,7 @@ table.dragshadow td.size {
 	border-radius: 0;
 	background-color: transparent;
 	z-index:1;
-	
+
 	> a[href='#'] {
 		// if no link is set, no mouse feedback
 		box-shadow: none !important;
diff --git a/apps/files/css/mobile.scss b/apps/files/css/mobile.scss
index 879e8a2bb31..111909bf957 100644
--- a/apps/files/css/mobile.scss
+++ b/apps/files/css/mobile.scss
@@ -37,8 +37,14 @@ table.multiselect thead {
 	margin-right: 6px;
 }
 /* hide text of the share action on mobile */
-#fileList a.action-share span:not(.icon) {
-	display: none !important;
+/* .hidden-visually for accessbility */
+#fileList a.action-share span:not(.icon):not(.avatar) {
+	position: absolute;
+	left:-10000px;
+	top: auto;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
 }