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 <[email protected]>

Author: CarlSchwan

apps/dashboard/src/DashboardApp.vue

@@ -517,9 +517,9 @@ export default {
 
 	& > .panel--content {
 		margin: 0 16px 16px 16px;
-		height: 420px;
+		height: 424px;
 		// We specifically do not want scrollbars inside widgets
-		overflow: hidden;
+		overflow: visible;
 	}
 
 	// No need to extend height of widgets if only one column is shown
@@ -566,7 +566,7 @@ export default {
 		background-color: var(--color-background-hover)!important;
 	}
 	&:focus-visible {
-		border: 2px solid var(--color-main-text)!important;
+		box-shadow: 0 0 0 2px var(--color-main-text) !important;
 	}
 }
 

apps/files/css/files.css

@@ -232,6 +232,9 @@ table th .columntitle {
 	box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	vertical-align: middle;
+	&:focus-visible {
+		border-radius: 2px;
+	}
 }
 table.multiselect th .columntitle {
 	display: inline-block;
@@ -507,6 +510,9 @@ table td.selection {
 	&:focus + label {
 		background-color: var(--color-background-hover);
 		border-radius: var(--border-radius-pill);
+		outline: none !important;
+		border: 2px solid var(--color-primary) !important;
+		padding: 14px;
 	}
 }
 
@@ -845,6 +851,10 @@ table.dragshadow td.size {
 	position: relative;
 }
 
+.breadcrumb .icon-home {
+	border-radius: var(--border-radius);
+}
+
 .breadcrumb .canDrop > a,
 #filestable tbody tr.canDrop {
 	background-color: rgba( variables.$color-primary, .3 );
@@ -885,7 +895,6 @@ table.dragshadow td.size {
 
 	> a[href='#'] {
 		// if no link is set, no mouse feedback
-		box-shadow: none !important;
 		&, * {
 			cursor: default !important;
 		}
@@ -1196,6 +1205,11 @@ table.dragshadow td.size {
 	#showgridview:focus + & {
 		opacity: 1;
 	}
+
+	&:focus-visible,
+	#showgridview:focus-visible + & {
+		box-shadow: inset 0 0 0 2px var(--color-primary) !important;
+	}
 }
 
 /**