Merge pull request #9956 from kevgathuku/enable-outline

Add focus indicator to File Details tabs view

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()
 				};
 			});

core/css/apps.scss

@@ -764,7 +764,7 @@ kbd {
 	margin: 15px;
 	.tabHeader {
 		float: left;
-		padding: 5px;
+		padding: 12px;
 		cursor: pointer;
 		color: var(--color-text-lighter);
 		margin-bottom: 1px;
@@ -774,21 +774,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);
 		}
 	}
 }