Improve accessibility with more visible focus indication for non vue apps

- Add visible-focus effect on each header entry
- Show focus outline when using focus-visible (keyboard navigation)
- Add polyfy for focus-visible since it's only very recently available
  on webkit
- Change text for link to home button to describe the destination and
  not the current page
- Improve focus effect in app sidebar navigation

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

4 files changed, 13 insertions, 13 deletions

diff --git a/apps/files/templates/index.php b/apps/files/templates/index.php
index 4a1cf808f2a..0d95f2694d9 100644
--- a/apps/files/templates/index.php
+++ b/apps/files/templates/index.php
@@ -5,7 +5,7 @@
 	<input type="checkbox" class="hidden-visually" id="showgridview"
 		aria-label="<?php p($l->t('Toggle grid view'))?>"
 		<?php if ($_['showgridview']) { ?>checked="checked" <?php } ?>/>
-	<label id="view-toggle" for="showgridview" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>"
+	<label id="view-toggle" for="showgridview" tabindex="0" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>"
 		title="<?php p($l->t('Toggle grid view'))?>"></label>
 
 	<?php foreach ($_['appContents'] as $content) { ?>
diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php
index 0a34396aa5c..25558bf16f7 100644
--- a/apps/files/templates/list.php
+++ b/apps/files/templates/list.php
@@ -44,13 +44,13 @@
 			</th>
 			<th id='headerName' class="hidden column-name">
 				<div id="headerName-container">
-					<a class="name sort columntitle" data-sort="name">
+					<a class="name sort columntitle" onclick="event.preventDefault()" href="#" data-sort="name">
                         <span><?php p($l->t('Name')); ?></span>
                         <span class="sort-indicator"></span>
 
                     </a>
                     <span id="selectedActionsList" class="selectedActions">
-                        <a href="" class="actions-selected">
+                        <a href="#" onclick="event.preventDefault()" class="actions-selected">
                             <span class="icon icon-more"></span>
                             <span><?php p($l->t('Actions'))?></span>
                         </a>
@@ -58,10 +58,10 @@
 				</div>
 			</th>
 			<th id="headerSize" class="hidden column-size">
-				<a class="size sort columntitle" data-sort="size"><span><?php p($l->t('Size')); ?></span><span class="sort-indicator"></span></a>
+				<a class="size sort columntitle" href="#" onclick="event.preventDefault()" data-sort="size"><span><?php p($l->t('Size')); ?></span><span class="sort-indicator"></span></a>
 			</th>
 			<th id="headerDate" class="hidden column-mtime">
-				<a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a>
+				<a id="modified" class="columntitle" href="#" onclick="event.preventDefault()" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a>
 			</th>
 		</tr>
 	</thead>
diff --git a/apps/files/templates/recentlist.php b/apps/files/templates/recentlist.php
index 8a556a6dc1d..3a5049bc2de 100644
--- a/apps/files/templates/recentlist.php
+++ b/apps/files/templates/recentlist.php
@@ -16,20 +16,20 @@
 	<tr>
 		<th id='headerName' class="hidden column-name">
 			<div id="headerName-container">
-				<a class="name sort columntitle"
+				<a class="name sort columntitle" href="#" onclick="event.preventDefault()"
 				   data-sort="name"><span><?php p($l->t('Name')); ?></span></a>
 			</div>
 		</th>
 		<th id="headerSize" class="hidden column-size">
-			<a class="size sort columntitle"
+			<a class="size sort columntitle" href="#" onclick="event.preventDefault()"
 			   data-sort="size"><span><?php p($l->t('Size')); ?></span></a>
 		</th>
 		<th id="headerDate" class="hidden column-mtime">
-			<a id="modified" class="columntitle"
+			<a id="modified" class="columntitle" href="#" onclick="event.preventDefault()"
 			   data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span
 					class="sort-indicator"></span></a>
 			<span class="selectedActions">
-				<a href="" class="delete-selected">
+				<a href="#" onclick="event.preventDefault()" class="delete-selected">
 					<span class="icon icon-delete"></span>
 					<span><?php p($l->t('Delete')) ?></span>
 				</a>
diff --git a/apps/files/templates/simplelist.php b/apps/files/templates/simplelist.php
index 24bd1c8ca2a..917fc307ff8 100644
--- a/apps/files/templates/simplelist.php
+++ b/apps/files/templates/simplelist.php
@@ -18,16 +18,16 @@
 		<tr>
 			<th id='headerName' class="hidden column-name">
 				<div id="headerName-container">
-					<a class="name sort columntitle" data-sort="name"><span><?php p($l->t('Name')); ?></span><span class="sort-indicator"></span></a>
+					<a class="name sort columntitle" onclick="event.preventDefault()" href="#" data-sort="name"><span><?php p($l->t('Name')); ?></span><span class="sort-indicator"></span></a>
 				</div>
 			</th>
 			<th id="headerSize" class="hidden column-size">
-				<a class="size sort columntitle" data-sort="size"><span><?php p($l->t('Size')); ?></span><span class="sort-indicator"></span></a>
+				<a class="size sort columntitle" onclick="event.preventDefault()" href="#" data-sort="size"><span><?php p($l->t('Size')); ?></span><span class="sort-indicator"></span></a>
 			</th>
 			<th id="headerDate" class="hidden column-mtime">
-				<a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a>
+				<a id="modified" class="columntitle" onclick="event.preventDefault()" href="#" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a>
 				<span class="selectedActions">
-				    <a href="" class="delete-selected">
+				    <a onclick="event.preventDefault()" href="#" class="delete-selected">
 					<img class="svg" alt=""
 					     src="<?php print_unescaped(OCP\Template::image_path("core", "actions/delete.svg")); ?>" />
 					<?php p($l->t('Delete'))?>