Make scroll areas keyboard focussable

Signed-off-by: Julius Härtl <jus@bitgrid.net>

6 files changed, 9 insertions, 7 deletions

diff --git a/apps/files/src/sidebar.js b/apps/files/src/sidebar.js
index 58b798ed0e7..22c1b95d1b2 100644
--- a/apps/files/src/sidebar.js
+++ b/apps/files/src/sidebar.js
@@ -52,6 +52,8 @@ window.addEventListener('DOMContentLoaded', function() {
 		}
 	}
 
+	document.getElementById('app-sidebar').tabIndex = 0
+
 	// Init vue app
 	const View = Vue.extend(SidebarView)
 	const AppSidebar = new View({
diff --git a/apps/files/templates/appnavigation.php b/apps/files/templates/appnavigation.php
index 91fdfa32b10..5684c3d0d32 100644
--- a/apps/files/templates/appnavigation.php
+++ b/apps/files/templates/appnavigation.php
@@ -1,5 +1,5 @@
 <div id="app-navigation" role="navigation">
-	<ul class="with-icon">
+	<ul class="with-icon" tabindex="0">
 
 		<?php
 
diff --git a/apps/files/templates/index.php b/apps/files/templates/index.php
index e12d9fafab3..016e6f32c70 100644
--- a/apps/files/templates/index.php
+++ b/apps/files/templates/index.php
@@ -1,6 +1,6 @@
 <?php /** @var \OCP\IL10N $l */ ?>
 <?php $_['appNavigation']->printPage(); ?>
-<div id="app-content">
+<div id="app-content" tabindex="0">
 
 	<input type="checkbox" class="hidden-visually" id="showgridview"
 		aria-label="<?php p($l->t('Toggle grid view'))?>"
diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index 13e4366c1c1..ad83732cc28 100644
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -2,7 +2,7 @@
 /** @var \OCP\IL10N $l */
 /** @var array $_ */
 ?>
-<div id="app-content">
+<div id="app-content" tabindex="0">
 <?php if ($_['previewSupported']): /* This enables preview images for links (e.g. on Facebook, Google+, ...)*/?>
 	<link rel="image_src" href="<?php p($_['previewImage']); ?>" />
 <?php endif; ?>
diff --git a/apps/settings/templates/help.php b/apps/settings/templates/help.php
index 763bc430133..18cba18559a 100644
--- a/apps/settings/templates/help.php
+++ b/apps/settings/templates/help.php
@@ -1,7 +1,7 @@
 <?php
 \OC_Util::addStyle('settings', 'help');
 ?>
-<div id="app-navigation" role="navigation">
+<div id="app-navigation" role="navigation" tabindex="0">
 	<ul>
 		<li>
 			<a class="icon-user <?php if ($_['mode'] === 'user') {
@@ -43,6 +43,6 @@
 </div>
 
 <div id="app-content" class="help-includes">
-	<iframe src="<?php print_unescaped($_['url']); ?>" class="help-iframe">
+	<iframe src="<?php print_unescaped($_['url']); ?>" class="help-iframe" tabindex="0">
 	</iframe>
 </div>
diff --git a/apps/settings/templates/settings/frame.php b/apps/settings/templates/settings/frame.php
index c388b03e191..93b03ac7eca 100644
--- a/apps/settings/templates/settings/frame.php
+++ b/apps/settings/templates/settings/frame.php
@@ -30,7 +30,7 @@ script('files', 'jquery.fileupload');
 ?>
 
 <div id="app-navigation" role="navigation">
-	<ul>
+	<ul tabindex="0">
 		<?php if (!empty($_['forms']['admin'])) { ?>
 			<li class="app-navigation-caption"><?php p($l->t('Personal')); ?></li>
 		<?php
@@ -83,6 +83,6 @@ script('files', 'jquery.fileupload');
 	</ul>
 </div>
 
-<div id="app-content">
+<div id="app-content" tabindex="0">
 	<?php print_unescaped($_['content']); ?>
 </div>