use method to only visually hide elements, show only for screen reader

diff --git a/apps/files/js/fileactions.js b/apps/files/js/fileactions.js
index e981ac625bcd352044ea1319d9c523a5bd68629d..875857745b804b2271b1cb965d904f271f4bf45c 100644 (file)
--- a/apps/files/js/fileactions.js
+++ b/apps/files/js/fileactions.js
@@ -290,7 +290,7 @@
                        var $actionLink = $('<a href="#" original-title="' +
                                escapeHTML(deleteTitle) +
                                '" class="action delete icon-delete">' +
-                               '<span class="hidden">' + escapeHTML(deleteTitle) + '</span>' +
+                               '<span class="hidden-visually">' + escapeHTML(deleteTitle) + '</span>' +
                                '</a>'
                        );
                        var $container = context.$file.find('td:last');

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 90d30507f488754bfcc5c7a4b80663692299e3ad..d8b8916752dfe75be6df247f947517c8bf183e88 100644 (file)
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -710,7 +710,7 @@
                                        '<input id="select-' + this.id + '-' + fileData.id +
                                        '" type="checkbox" class="selectCheckBox"/><label for="select-' + this.id + '-' + fileData.id + '">' +
                                        '<div class="thumbnail" style="background-image:url(' + icon + '); background-size: 32px;"></div>' +
-                                       '<span class="hidden">' + t('files', 'Select') + '</span>' +
+                                       '<span class="hidden-visually">' + t('files', 'Select') + '</span>' +
                                        '</label>'
                                );
                        } else {

diff --git a/apps/files/templates/appnavigation.php b/apps/files/templates/appnavigation.php
index aa2deea78ebd0cba5f43f75257c62431d079eeb2..faf2be39b034cfb38d1a71c236ae0031b865933e 100644 (file)
--- a/apps/files/templates/appnavigation.php
+++ b/apps/files/templates/appnavigation.php
@@ -7,7 +7,7 @@
        <div id="app-settings">
                <div id="app-settings-header">
                        <button class="settings-button" data-apps-slide-toggle="#app-settings-content">
-                               <span class="hidden"><?php p($l->t('Settings'));?></span>
+                               <span class="hidden-visually"><?php p($l->t('Settings'));?></span>
                        </button>
                </div>
                <div id="app-settings-content">

diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php
index bd27be8c5e1f832d7958d7b7eb8d04650192fdf5..a90ababf2bbfbf705c36243dabd1397eb763368f 100644 (file)
--- a/apps/files/templates/list.php
+++ b/apps/files/templates/list.php
@@ -59,7 +59,7 @@
                                <div id="headerName-container">
                                        <input type="checkbox" id="select_all_files" class="select-all"/>
                                        <label for="select_all_files">
-                                               <span class="hidden"><?php p($l->t('Select all'))?></span>
+                                               <span class="hidden-visually"><?php p($l->t('Select all'))?></span>
                                        </label>
                                        <a class="name sort columntitle" data-sort="name"><span><?php p($l->t( 'Name' )); ?></span><span class="sort-indicator"></span></a>
                                        <span id="selectedActionsList" class="selectedActions">

diff --git a/core/css/styles.css b/core/css/styles.css
index 7badfca6c16aad71d3fcddb9afc1d73247cb7742..856ba68def840428a0f422388163b0b4242ea928 100644 (file)
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -711,7 +711,18 @@ label.infield {
 
 
 /* VARIOUS REUSABLE SELECTORS */
-.hidden { display:none; }
+.hidden {
+       display: none;
+}
+.hidden-visually {
+       position: absolute;
+       left:-10000px;
+       top: auto;
+       width: 1px;
+       height: 1px;
+       overflow: hidden;
+}
+
 .bold { font-weight:bold; }
 .center { text-align:center; }
 .inlineblock { display: inline-block; }