Add focus indicator for file details view tabs

Signed-off-by: Kevin Ndung'u <kevgathuku@gmail.com>

2 files changed, 13 insertions, 15 deletions

diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js
index 7bfc3d5ad7b..7e2a5f0e8a9 100644
--- a/apps/files/js/detailsview.js
+++ b/apps/files/js/detailsview.js
@@ -15,8 +15,8 @@
 		'	{{#if tabHeaders}}' +
 		'	<ul class="tabHeaders">' +
 		'		{{#each tabHeaders}}' +
-		'		<li class="tabHeader" data-tabid="{{tabId}}" data-tabindex="{{tabIndex}}">' +
-		'			<a href="#">{{label}}</a>' +
+		'		<li class="tabHeader" data-tabid="{{tabId}}" tabindex="0">' +
+		'			<a href="#" tabindex="-1">{{label}}</a>' +
 		'		</li>' +
 		'		{{/each}}' +
 		'	</ul>' +
@@ -67,7 +67,8 @@
 
 		events: {
 			'click a.close': '_onClose',
-			'click .tabHeaders .tabHeader': '_onClickTab'
+			'click .tabHeaders .tabHeader': '_onClickTab',
+			'keyup .tabHeaders .tabHeader': '_onKeyboardActivateTab'
 		},
 
 		/**
@@ -99,6 +100,12 @@
 			this.selectTab(tabId);
 		},
 
+		_onKeyboardActivateTab: function (event) {
+			if (event.key === " " || event.key === "Enter") {
+				this._onClickTab(event);
+			}
+		},
+
 		template: function(vars) {
 			if (!this._template) {
 				this._template = Handlebars.compile(TEMPLATE);
@@ -126,7 +133,6 @@
 			templateVars.tabHeaders = _.map(this._tabViews, function(tabView, i) {
 				return {
 					tabId: tabView.id,
-					tabIndex: i,
 					label: tabView.getLabel()
 				};
 			});
diff --git a/core/css/apps.scss b/core/css/apps.scss
index 702ab5d75bc..4e1504ed60b 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -768,7 +768,7 @@ kbd {
 	margin: 15px;
 	.tabHeader {
 		float: left;
-		padding: 5px;
+		padding: 12px;
 		cursor: pointer;
 		color: var(--color-text-lighter);
 		margin-bottom: 1px;
@@ -778,21 +778,13 @@ kbd {
 		}
 		&.selected {
 			font-weight: 600;
-			border-bottom: 1px solid var(--color-border);
-		}
-		&:hover,
-		&:focus {
-			border-bottom: 1px solid var(--color-border);
 		}
 		&.selected,
-		&:hover
+		&:hover,
 		&:focus {
 			margin-bottom: 0px;
 			color: var(--color-main-text);
-			a {
-				margin-bottom: 0px;
-				color: var(--color-main-text);
-			}
+			border-bottom: 1px solid var(--color-text-lighter);
 		}
 	}
 }