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>

1 files changed, 15 insertions, 1 deletions

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index c6097858ed5..b77c6ca2bd1 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -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;
+	}
 }
 
 /**