From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Wed, 17 Dec 2014 13:12:13 +0000 (+0100)
Subject: use method to only visually hide elements, show only for screen reader
X-Git-Tag: v8.0.0alpha1~69^2~1
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=6f4ed59883c7cda899ccb49e60e34a8529ffbd18;p=nextcloud-server.git

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 e981ac625bc..875857745b8 100644
--- 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 90d30507f48..d8b8916752d 100644
--- 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 aa2deea78eb..faf2be39b03 100644
--- 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 bd27be8c5e1..a90ababf2bb 100644
--- 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 7badfca6c16..856ba68def8 100644
--- 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; }