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

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

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 8b37b65b947fe56dda5feb574f99b0e40eb34cab..1ffe8af432446c44bcc825d26416b570c3a38b25 100644 (file)
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -541,8 +541,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;
@@ -752,7 +759,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 b661fc61d453f601d401dbc227d6fa643d66f852..5437451d53d1cc91ea015c5727f1a980fc09dac9 100644 (file)
--- a/apps/files/css/mobile.scss
+++ b/apps/files/css/mobile.scss
@@ -36,8 +36,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;
 }