Merge pull request #31584 from nextcloud/fix/accessibility

2026-04-21 14:23:17 -04:00 · 2022-05-16 22:24:30 +02:00 · 2022-05-16 22:24:30 +02:00 · ab0548e4ed
commit ab0548e4ed
parent 07f17d01cc c1499519d4
45 changed files with 406 additions and 107 deletions
--- a/apps/dashboard/src/DashboardApp.vue
+++ b/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;
 	}
 }

--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@ -316,6 +316,9 @@ table th .columntitle {
  -moz-box-sizing: border-box;
  vertical-align: middle;
 }
+table th .columntitle:focus-visible {
+  border-radius: 2px;
+}

 table.multiselect th .columntitle {
  display: inline-block;
@ -606,6 +609,9 @@ table td.selection {
 .select-all: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;
 }

 #fileList tr td.selection > .selectCheckBox:focus-visible + label,
@ -944,6 +950,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(0, 130, 201, 0.3);
@ -981,9 +991,6 @@ table.dragshadow td.size {
  background-color: transparent;
  z-index: 1;
 }
-#quota > a[href="#"] {
-  box-shadow: none !important;
-}
 #quota > a[href="#"], #quota > a[href="#"] * {
  cursor: default !important;
 }
@ -1240,6 +1247,9 @@ table.dragshadow td.size {
 #view-toggle:hover, #view-toggle:focus, #showgridview:focus + #view-toggle {
  opacity: 1;
 }
+#view-toggle:focus-visible, #showgridview:focus-visible + #view-toggle {
+  box-shadow: inset 0 0 0 2px var(--color-primary) !important;
+}

 /**
 * Make sure the hidden input is always
--- a/apps/files/css/files.css.map
+++ b/apps/files/css/files.css.map
--- 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;
+	}
 }

 /**
--- a/apps/files/css/merged.css
+++ b/apps/files/css/merged.css
@ -316,6 +316,9 @@ table th .columntitle {
  -moz-box-sizing: border-box;
  vertical-align: middle;
 }
+table th .columntitle:focus-visible {
+  border-radius: 2px;
+}

 table.multiselect th .columntitle {
  display: inline-block;
@ -606,6 +609,9 @@ table td.selection {
 .select-all: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;
 }

 #fileList tr td.selection > .selectCheckBox:focus-visible + label,
@ -944,6 +950,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(0, 130, 201, 0.3);
@ -981,9 +991,6 @@ table.dragshadow td.size {
  background-color: transparent;
  z-index: 1;
 }
-#quota > a[href="#"] {
-  box-shadow: none !important;
-}
 #quota > a[href="#"], #quota > a[href="#"] * {
  cursor: default !important;
 }
@ -1240,6 +1247,9 @@ table.dragshadow td.size {
 #view-toggle:hover, #view-toggle:focus, #showgridview:focus + #view-toggle {
  opacity: 1;
 }
+#view-toggle:focus-visible, #showgridview:focus-visible + #view-toggle {
+  box-shadow: inset 0 0 0 2px var(--color-primary) !important;
+}

 /**
 * Make sure the hidden input is always
--- a/apps/files/css/merged.css.map
+++ b/apps/files/css/merged.css.map
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@ -1686,7 +1686,9 @@
 				td.append(
 					'<input id="select-' + this.id + '-' + fileData.id +
 					'" type="checkbox" class="selectCheckBox checkbox"/><label for="select-' + this.id + '-' + fileData.id + '">' +
-					'<span class="hidden-visually">' + t('files', 'Select') + '</span>' +
+					'<span class="hidden-visually">' + (fileData.type === 'dir' ?
+						t('files', 'Select directory "{dirName}"', {dirName: name}) :
+						t('files', 'Select file "{fileName}"', {fileName: name})) + '</span>' +
 					'</label>'
 				);

--- a/apps/files/templates/index.php
+++ b/apps/files/templates/index.php
@ -5,7 +5,7 @@
 	<input type="checkbox" class="hidden-visually" id="showgridview"
 		aria-label="<?php p($l->t('Toggle grid view'))?>"
 		<?php if ($_['showgridview']) { ?>checked="checked" <?php } ?>/>
-	<label id="view-toggle" for="showgridview" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>"
+	<label id="view-toggle" for="showgridview" tabindex="0" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>"
 		title="<?php p($l->t('Toggle grid view'))?>"></label>

 	<?php foreach ($_['appContents'] as $content) { ?>
--- a/apps/files/templates/list.php
+++ b/apps/files/templates/list.php
@ -44,13 +44,13 @@
 			</th>
 			<th id='headerName' class="hidden column-name">
 				<div id="headerName-container">
-					<a class="name sort columntitle" data-sort="name">
+					<a class="name sort columntitle" onclick="event.preventDefault()" href="#" data-sort="name">
                        <span><?php p($l->t('Name')); ?></span>
                        <span class="sort-indicator"></span>

                    </a>
                    <span id="selectedActionsList" class="selectedActions">
-                        <a href="" class="actions-selected">
+                        <a href="#" onclick="event.preventDefault()" class="actions-selected">
                            <span class="icon icon-more"></span>
                            <span><?php p($l->t('Actions'))?></span>
                        </a>
@ -58,10 +58,10 @@
 				</div>
 			</th>
 			<th id="headerSize" class="hidden column-size">
-				<a class="size sort columntitle" data-sort="size"><span><?php p($l->t('Size')); ?></span><span class="sort-indicator"></span></a>
+				<a class="size sort columntitle" href="#" onclick="event.preventDefault()" data-sort="size"><span><?php p($l->t('Size')); ?></span><span class="sort-indicator"></span></a>
 			</th>
 			<th id="headerDate" class="hidden column-mtime">
-				<a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a>
+				<a id="modified" class="columntitle" href="#" onclick="event.preventDefault()" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a>
 			</th>
 		</tr>
 	</thead>
--- a/apps/files/templates/recentlist.php
+++ b/apps/files/templates/recentlist.php
@ -16,20 +16,20 @@
 	<tr>
 		<th id='headerName' class="hidden column-name">
 			<div id="headerName-container">
-				<a class="name sort columntitle"
+				<a class="name sort columntitle" href="#" onclick="event.preventDefault()"
 				   data-sort="name"><span><?php p($l->t('Name')); ?></span></a>
 			</div>
 		</th>
 		<th id="headerSize" class="hidden column-size">
-			<a class="size sort columntitle"
+			<a class="size sort columntitle" href="#" onclick="event.preventDefault()"
 			   data-sort="size"><span><?php p($l->t('Size')); ?></span></a>
 		</th>
 		<th id="headerDate" class="hidden column-mtime">
-			<a id="modified" class="columntitle"
+			<a id="modified" class="columntitle" href="#" onclick="event.preventDefault()"
 			   data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span
 					class="sort-indicator"></span></a>
 			<span class="selectedActions">
-				<a href="" class="delete-selected">
+				<a href="#" onclick="event.preventDefault()" class="delete-selected">
 					<span class="icon icon-delete"></span>
 					<span><?php p($l->t('Delete')) ?></span>
 				</a>
--- a/apps/files/templates/simplelist.php
+++ b/apps/files/templates/simplelist.php
@ -18,16 +18,16 @@
 		<tr>
 			<th id='headerName' class="hidden column-name">
 				<div id="headerName-container">
-					<a class="name sort columntitle" data-sort="name"><span><?php p($l->t('Name')); ?></span><span class="sort-indicator"></span></a>
+					<a class="name sort columntitle" onclick="event.preventDefault()" href="#" data-sort="name"><span><?php p($l->t('Name')); ?></span><span class="sort-indicator"></span></a>
 				</div>
 			</th>
 			<th id="headerSize" class="hidden column-size">
-				<a class="size sort columntitle" data-sort="size"><span><?php p($l->t('Size')); ?></span><span class="sort-indicator"></span></a>
+				<a class="size sort columntitle" onclick="event.preventDefault()" href="#" data-sort="size"><span><?php p($l->t('Size')); ?></span><span class="sort-indicator"></span></a>
 			</th>
 			<th id="headerDate" class="hidden column-mtime">
-				<a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a>
+				<a id="modified" class="columntitle" onclick="event.preventDefault()" href="#" data-sort="mtime"><span><?php p($l->t('Modified')); ?></span><span class="sort-indicator"></span></a>
 				<span class="selectedActions">
-				    <a href="" class="delete-selected">
+				    <a onclick="event.preventDefault()" href="#" class="delete-selected">
 					<img class="svg" alt=""
 					     src="<?php print_unescaped(OCP\Template::image_path("core", "actions/delete.svg")); ?>" />
 					<?php p($l->t('Delete'))?>
--- a/apps/files/tests/js/filelistSpec.js
+++ b/apps/files/tests/js/filelistSpec.js
@ -119,12 +119,12 @@ describe('OCA.Files.FileList tests', function() {
 			'<thead><tr>' +
 			'<th id="headerName" class="hidden column-name">' +
 			'<input type="checkbox" id="select_all_files" class="select-all checkbox">' +
-			'<a class="name columntitle" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>' +
+			'<a class="name columntitle" href="#" onclick="event.preventDefault()" data-sort="name"><span>Name</span><span class="sort-indicator"></span></a>' +
 			'<span id="selectedActionsList" class="selectedActions hidden">' +
-			'<a href class="actions-selected"><span class="icon icon-more"></span><span>Actions</span></a>' +
+			'<a class="actions-selected" href="#" onclick="event.preventDefault()"><span class="icon icon-more"></span><span>Actions</span></a>' +
 			'</th>' +
-			'<th class="hidden column-size"><a class="columntitle" data-sort="size"><span class="sort-indicator"></span></a></th>' +
-			'<th class="hidden column-mtime"><a class="columntitle" data-sort="mtime"><span class="sort-indicator"></span></a></th>' +
+			'<th class="hidden column-size"><a class="columntitle" href="#" onclick="event.preventDefault()" data-sort="size"><span class="sort-indicator"></span></a></th>' +
+			'<th class="hidden column-mtime"><a class="columntitle" href="#" onclick="event.preventDefault()" data-sort="mtime"><span class="sort-indicator"></span></a></th>' +
 			'</tr></thead>' +
 			'<tbody id="fileList"></tbody>' +
 			'<tfoot></tfoot>' +
--- a/apps/settings/css/settings.css
+++ b/apps/settings/css/settings.css
@ -217,6 +217,12 @@ select#timezone, select#languageinput, select#localeinput {
 .development-notice {
  text-align: center;
 }
+.development-notice a:not(.link-button) {
+  text-decoration: underline;
+}
+.development-notice a:not(.link-button):hover {
+  background-color: var(--color-primary-element-lighter);
+}

 .link-button {
  display: inline-block;
@ -513,6 +519,9 @@ table.nostyle td {
  padding-left: 0 !important;
  margin-left: -10px;
 }
+.social-button a {
+  display: inline-block;
+}
 .social-button img {
  padding: 10px;
 }
--- a/apps/settings/css/settings.css.map
+++ b/apps/settings/css/settings.css.map
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@ -185,6 +185,12 @@ select {
 // Button for 'Reasons to use Nextcloud in your organization'
 .development-notice {
 	text-align: center;
+	a:not(.link-button) {
+		text-decoration: underline;
+		&:hover {
+			background-color: var(--color-primary-element-lighter);
+		}
+	}
 }

 .link-button {
@ -556,6 +562,9 @@ table.nostyle {
 .social-button {
 	padding-left: 0 !important;
 	margin-left: -10px;
+	a {
+		display: inline-block;
+	}

 	img {
 		padding: 10px;
--- a/apps/user_status/src/UserStatus.vue
+++ b/apps/user_status/src/UserStatus.vue
@ -231,6 +231,11 @@ export default {
 		align-items: flex-start !important;
 		color: var(--color-main-text) !important;

+		&:focus-visible {
+			padding: 6px 8px 1px 8px !important;
+			margin: 2px !important;
+		}
+
 		&:not([href]) {
 			height: var(--header-menu-item-height) !important;
 			color: var(--color-text-maxcontrast) !important;
@ -298,7 +303,7 @@ export default {
 				background-color: var(--color-background-hover);
 			}
 			&:focus {
-				border: 2px solid var(--color-main-text)!important;
+				box-shadow: 0 0 0 2px var(--color-main-text) !important;
 			}
 		}
 	}
--- a/core/css/apps.css
+++ b/core/css/apps.css
@ -192,7 +192,7 @@ kbd {
 #app-navigation:not(.vue) > ul {
  position: relative;
  height: 100%;
-  width: inherit;
+  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
@ -232,6 +232,11 @@ kbd {
 #app-navigation:not(.vue) > ul > li a:focus > a {
  background-color: var(--color-background-hover);
 }
+#app-navigation:not(.vue) > ul > li a:focus-visible {
+  border-radius: var(--border-radius);
+  box-shadow: var(--color-primary) inset 0 0 0 2px;
+  outline: none;
+}
 #app-navigation:not(.vue) > ul > li.active,
 #app-navigation:not(.vue) > ul > li.active > a,
 #app-navigation:not(.vue) > ul > li a:active,
@ -344,6 +349,10 @@ kbd {
 #app-navigation:not(.vue) > ul > li > ul > li > a.svg {
  padding: 0 12px 0 44px;
 }
+#app-navigation:not(.vue) > ul > li > a.svg :focus-visible,
+#app-navigation:not(.vue) > ul > li > ul > li > a.svg :focus-visible {
+  padding: 0 8px 0 42px;
+}
 #app-navigation:not(.vue) > ul > li > a:first-child img,
 #app-navigation:not(.vue) > ul > li > ul > li > a:first-child img {
  margin-right: 11px;
@ -424,6 +433,12 @@ kbd {
   * link. */
  left: 0;
 }
+#app-navigation:not(.vue) .collapsible .collapse:focus-visible {
+  opacity: 1;
+  border-width: 0;
+  box-shadow: inset 0 0 0 2px var(--color-primary);
+  background: none;
+}
 #app-navigation:not(.vue) .collapsible:before {
  position: absolute;
  height: 44px;
@ -759,6 +774,11 @@ kbd {
  display: block;
  filter: var(--background-invert-if-dark);
 }
+#app-settings-header .settings-button:focus-visible {
+  box-shadow: 0 0 0 2px inset var(--color-primary) !important;
+  border-radius: var(--border-radius);
+  background-position: 12px center;
+}

 /* GENERAL SECTION ------------------------------------------------------------ */
 .section {
--- a/core/css/apps.css.map
+++ b/core/css/apps.css.map
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@ -124,7 +124,7 @@ kbd {
 	> ul {
 		position: relative;
 		height: 100%;
-		width: inherit;
+		width: 100%;
 		overflow-x: hidden;
 		overflow-y: auto;
 		box-sizing: border-box;
@ -162,6 +162,11 @@ kbd {
 					background-color: var(--color-background-hover);
 				}
 			}
+			a:focus-visible {
+				border-radius: var(--border-radius);
+				box-shadow: var(--color-primary) inset 0 0 0 2px;
+				outline: none;
+			}
 			&.active,
 			a:active,
 			a.selected ,
@ -283,6 +288,9 @@ kbd {

 				&.svg {
 					padding: 0 12px 0 44px;
+					:focus-visible {
+						padding: 0 8px 0 42px;
+					}
 				}
 				&:first-child img {
 				    margin-right: 11px;
@ -373,6 +381,13 @@ kbd {
 			/* Needed for IE11; otherwise the button appears to the right of the
 			 * link. */
 			left: 0;
+
+			&:focus-visible {
+				opacity: 1;
+				border-width: 0;
+				box-shadow: inset 0 0 0 2px var(--color-primary);
+				background: none;
+			}
 		}
 		&:before {
 			position: absolute;
@ -764,6 +779,12 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 		display: block;
 		filter: var(--background-invert-if-dark);
 	}
+
+	&:focus-visible {
+		box-shadow: 0 0 0 2px inset var(--color-primary) !important;
+		border-radius: var(--border-radius);
+		background-position: 12px center;
+	}
 }

 /* GENERAL SECTION ------------------------------------------------------------ */
--- a/core/css/guest.css
+++ b/core/css/guest.css
@ -461,6 +461,11 @@ input[type='checkbox'].checkbox--white:checked + label:before {
 #show + label:hover, #dbpassword-toggle + label:hover, #personal-show + label:hover {
  opacity: 1;
 }
+#show:focus-visible + label, #dbpassword-toggle:focus-visible + label, #personal-show:focus-visible + label {
+	box-shadow: var(--color-primary) 0 0 0 2px;
+	opacity: 1;
+	border-radius: 9999px;
+}
 #pass2, input[name='personal-password-clone'] {
 	padding: .6em 2.5em .4em .4em;
 	width: 8em;
--- a/core/css/header.css
+++ b/core/css/header.css
@ -42,6 +42,17 @@
  -moz-user-select: none;
  -ms-user-select: none;
 }
+#header a:focus-visible, #header button:not(.button-vue):focus-visible, #header div[role=button]:focus-visible,
+#navigation a:focus-visible,
+#navigation button:not(.button-vue):focus-visible,
+#navigation div[role=button]:focus-visible,
+#expanddiv a:focus-visible,
+#expanddiv button:not(.button-vue):focus-visible,
+#expanddiv div[role=button]:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--color-primary-text);
+  border-radius: var(--border-radius);
+  outline: none;
+}

 /* removed until content-focusing issue is fixed */
 #skip-to-content a {
@ -78,19 +89,17 @@

 /* LOGO and APP NAME -------------------------------------------------------- */
 #nextcloud {
-  padding: 7px 0;
+  padding: 5px 0;
  padding-left: 86px;
  position: relative;
-  height: 100%;
+  height: calc(100% - 4px);
  box-sizing: border-box;
  opacity: 1;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
-}
-#nextcloud:focus {
-  opacity: 0.75;
+  margin: 2px;
 }
 #nextcloud:hover, #nextcloud:active {
  opacity: 1;
@ -170,6 +179,12 @@
 #header .header-right > div > .menu.settings-menu > ul li a.active {
  background-color: var(--color-primary-light);
 }
+#header .header-left > nav > .menu #apps > ul li a:focus-visible, #header .header-left > nav > .menu.settings-menu > ul li a:focus-visible,
+#header .header-right > div > .menu #apps > ul li a:focus-visible,
+#header .header-right > div > .menu.settings-menu > ul li a:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--color-primary);
+  outline: none;
+}
 #header .header-left > nav > .menu #apps > ul li a span, #header .header-left > nav > .menu.settings-menu > ul li a span,
 #header .header-right > div > .menu #apps > ul li a span,
 #header .header-right > div > .menu.settings-menu > ul li a span {
@ -252,11 +267,19 @@
  justify-content: center;
  align-items: center;
  width: 50px;
-  height: 100%;
+  height: 44px;
  cursor: pointer;
-  opacity: 0.6;
+  opacity: 0.85;
  padding: 0;
-  margin: 0;
+  margin: 2px 0;
+}
+#header .header-right > div > .menutoggle:focus,
+#header .header-right > form > .menutoggle:focus {
+  opacity: 1;
+}
+#header .header-right > div > .menutoggle:focus-visible,
+#header .header-right > form > .menutoggle:focus-visible {
+  outline: none;
 }

 /* hover effect for app switcher label */
@ -366,7 +389,7 @@ nav[role=navigation] {
 #settings #expand {
  opacity: 1;
  /* override icon opacity */
-  padding-right: 12px;
+  margin-right: 12px;
  /* Profile picture in header */
  /* show triangle below user menu if active */
 }
@ -453,13 +476,14 @@ nav[role=navigation] {
  position: relative;
  display: flex;
  margin: 0;
-  height: 50px;
+  height: 44px;
  width: 50px;
  align-items: center;
  justify-content: center;
-  opacity: 0.6;
+  opacity: 0.85;
  letter-spacing: -0.5px;
  font-size: 12px;
+  margin: 2px;
 }
 #appmenu li:hover a,
 #appmenu li a:focus,
@ -565,7 +589,7 @@ nav[role=navigation] {
  border-width: 10px;
  transform: translateX(-50%);
  left: 50%;
-  bottom: 0;
+  bottom: -5px;
  display: none;
 }
 #appmenu li a.active::before,
--- a/core/css/header.css.map
+++ b/core/css/header.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["variables.scss","header.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;AACA;AAAA;AAAA;EAGC;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;;AAIF;AACA;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA,QDwDe;ECvDf;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAED;EACC;;;AASF;AACC;AA6GA;AA4BA;;AAtIA;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EAhBD;EACA;EAiBC;EACA,KDQc;ECPd;AAMA;AAqBA;;AAzBA;AAAA;EACC;;AAID;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;AAAA;AAAA;EAGC;EACA;EA3CF;EACA;;AAkDG;AAAA;AAAA;EACC;EACA;EACA,QAhDuB;EAiDvB;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;EAEC;;AAED;AAAA;AAAA;AAAA;AAAA;EAEC;;AAED;AAAA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;AAAA;AAAA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;EACA;EACA;;AAML;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAKA;AAAA;EAEC;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA,OD7HY;EC8HZ;EACA;EACA;EACA;EACA;;;AAMJ;AAEA;EACC;;;AAIA;EACC;;AAGA;EACC;;AAID;EACC;;AAID;EACC;;;AAKH;AACA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;;;AAGD;AACA;EACC;EACA,ODpMe;ECqMf,QDrMe;ECsMf;EACA;;;AAGD;EACC;EACA;AAAY;EACZ;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;;AACA;AAAA;AAAA;AACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAoB;;;AAItB;EACC;;AACA;EACC;;;AAIF;AACA;EACC;EACA;EACA;EACA;AAEA;;AACA;EACC;AAAY;EACZ;AAqBA;AA2BA;;AA9CA;EAGC;;AAEA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;;AAED;EACC;;AAED;EACC;;AAKF;EACC;EACA;EACA;AAMA;;AAJA;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;AAEA;;AACA;EACC;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;;;AAIF;AACA;EACC;EACA,WDhUe;ECiUf;AAwFA;AAiCA;AAwBA;AAgBA;;AA/JA;EACC;EACA;EACA;EACA;EACA;AAgBA;AA4BA;AAQA;AAcA;AACA;AAQA;;AAzEA;EACC;EACA;EACA;EACA,QD9Ua;EC+Ub,OD/Ua;ECgVb;EACA;EACA;EAEA;EACA;;AAID;AAAA;AAAA;EAGC;EACA;;AAID;AAAA;EAEC;;AAGD;AAAA;AAAA;AAAA;EAMC;EACA;EACA;EACA;EACA;EACA;;AAID;AAAA;EAEC;EACA;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKD;AAAA;EAEC;EAEA;;AAID;EACC;;AAMD;AACC;AASA;AAOA;AAOA;;AAtBA;AAAA;AAAA;AAAA;AAAA;EAKC;;AAID;EACC;EACA;EACA;AAAa;;AAId;AAAA;EAGC;;AAID;EACC;;AAMH;AACC;AASA;AAOA;;AAfA;AAAA;AAAA;AAAA;AAAA;EAKC;;AAID;AAAA;EAEC;EACA;;AAID;EACC;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAID;AAAA;AAAA;AAAA;EAIC;;AAED;EACC;;AAED;AAAA;AAAA;EAGC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAED;AAAA;EAEC;;;AAKA;AAAA;EACC;;AAED;AAAA;EACC;;;AAKF;AACA;EACC;EACA;EACA;EACA;EACA;EACA;AACA;EACA;;AAEA;EACC,MDzhBiB;EC0hBjB;;AAGD;EAEC,KDhiBc;;;ACqiBhB;AAGC;AAAA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;EAEC;EACA;EACA","file":"header.css"}
+{"version":3,"sourceRoot":"","sources":["variables.scss","header.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;AACA;AAAA;AAAA;EAGC;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;;AAIF;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;;AAIF;AACA;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA,QDmDe;EClDf;EACA;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AASF;AACC;AAiHA;AA4BA;;AA1IA;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EAhBD;EACA;EAiBC;EACA,KDKc;ECJd;AAMA;AAqBA;;AAzBA;AAAA;EACC;;AAID;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;AAAA;AAAA;EAGC;EACA;EA3CF;EACA;;AAkDG;AAAA;AAAA;EACC;EACA;EACA,QAhDuB;EAiDvB;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;EAEC;;AAED;AAAA;AAAA;AAAA;AAAA;EAEC;;AAED;AAAA;AAAA;EACC;EACA;;AAED;AAAA;AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;AAAA;AAAA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;EACA;EACA;;AAML;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;AAAA;EAEC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAKA;AAAA;EAEC;EACA;;AACA;AAAA;EACC;EACA;EACA;EACA,ODpIY;ECqIZ;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACC;;AAGD;AAAA;EACC;;;AAOL;AAEA;EACC;;;AAIA;EACC;;AAGA;EACC;;AAID;EACC;;AAID;EACC;;;AAKH;AACA;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;AACA;EACC;;;AAGD;AACA;EACC;EACA,ODnNe;ECoNf,QDpNe;ECqNf;EACA;;;AAGD;EACC;EACA;AAAY;EACZ;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;;AACA;AAAA;AAAA;AACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAoB;;;AAItB;EACC;;AACA;EACC;;;AAIF;AACA;EACC;EACA;EACA;EACA;AAEA;;AACA;EACC;AAAY;EACZ;AAqBA;AA2BA;;AA9CA;EAGC;;AAEA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;;AAED;EACC;;AAED;EACC;;AAKF;EACC;EACA;EACA;AAMA;;AAJA;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;AAEA;;AACA;EACC;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;;;AAIF;AACA;EACC;EACA,WD/Ue;ECgVf;AAyFA;AAiCA;AAwBA;AAgBA;;AAhKA;EACC;EACA;EACA;EACA;EACA;AAiBA;AA4BA;AAQA;AAcA;AACA;AAQA;;AA1EA;EACC;EACA;EACA;EACA;EACA,OD9Va;EC+Vb;EACA;EACA;EAEA;EACA;EACA;;AAID;AAAA;AAAA;EAGC;EACA;;AAID;AAAA;EAEC;;AAGD;AAAA;AAAA;AAAA;EAMC;EACA;EACA;EACA;EACA;EACA;;AAID;AAAA;EAEC;EACA;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKD;AAAA;EAEC;EAEA;;AAID;EACC;;AAMD;AACC;AASA;AAOA;AAOA;;AAtBA;AAAA;AAAA;AAAA;AAAA;EAKC;;AAID;EACC;EACA;EACA;AAAa;;AAId;AAAA;EAGC;;AAID;EACC;;AAMH;AACC;AASA;AAOA;;AAfA;AAAA;AAAA;AAAA;AAAA;EAKC;;AAID;AAAA;EAEC;EACA;;AAID;EACC;;AAKF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAID;AAAA;AAAA;AAAA;EAIC;;AAED;EACC;;AAED;AAAA;AAAA;EAGC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAED;AAAA;EAEC;;;AAKA;AAAA;EACC;;AAED;AAAA;EACC;;;AAKF;AACA;EACC;EACA;EACA;EACA;EACA;EACA;AACA;EACA;;AAEA;EACC,MDziBiB;EC0iBjB;;AAGD;EAEC,KDhjBc;;;ACqjBhB;AAGC;AAAA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;EAEC;EACA;EACA","file":"header.css"}
--- a/core/css/header.scss
+++ b/core/css/header.scss
@ -21,6 +21,11 @@
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
+	a:focus-visible, button:not(.button-vue):focus-visible, div[role="button"]:focus-visible {
+		box-shadow: inset 0 0 0 2px var(--color-primary-text);
+		border-radius: var(--border-radius);
+		outline: none;
+	}
 }

 /* removed until content-focusing issue is fixed */
@ -58,20 +63,18 @@

 /* LOGO and APP NAME -------------------------------------------------------- */
 #nextcloud {
-	padding: 7px 0;
+	padding: 5px 0;
 	padding-left: 86px; // logo width + 2* pa
 	position: relative;
-	height: 100%;
+	height: calc(100% - 4px);
 	box-sizing: border-box;
 	opacity: 1;
 	align-items: center;
 	display: flex;
 	flex-wrap: wrap;
 	overflow: hidden;
+	margin: 2px;

-	&:focus {
-		opacity: .75;
-	}
 	&:hover, &:active {
 		opacity: 1;
 	}
@ -147,6 +150,10 @@
 					&.active {
 						background-color: var(--color-primary-light);
 					}
+					&:focus-visible {
+						box-shadow: inset 0 0 0 2px var(--color-primary);
+						outline: none;
+					}
 					span {
 						display: inline-block;
 						padding-bottom: 0;
@ -231,11 +238,19 @@
 				justify-content: center;
 				align-items: center;
 				width: variables.$header-height;
-				height: 100%;
+				height: 44px;
 				cursor: pointer;
-				opacity: 0.6;
+				opacity: 0.85;
 				padding: 0;
-				margin: 0;
+				margin: 2px 0;
+
+				&:focus {
+					opacity: 1;
+				}
+
+				&:focus-visible {
+					outline: none;
+				}
 			}
 		}
 	}
@ -353,7 +368,7 @@ nav[role='navigation'] {
 	/* User menu on the right */
 	#expand {
 		opacity: 1; /* override icon opacity */
-		padding-right: 12px;
+		margin-right: 12px;

 		&:hover,
 		&:focus,
@ -439,14 +454,15 @@ nav[role='navigation'] {
 			position: relative;
 			display: flex;
 			margin: 0;
-			height: variables.$header-height;
+			height: calc(variables.$header-height - 6px);
 			width: variables.$header-height;
 			align-items: center;
 			justify-content: center;
-			opacity: .6;
+			opacity: .85;
 			// Make sure most app names don’t ellipsize
 			letter-spacing: -0.5px;
 			font-size: 12px;
+			margin: 2px;
 		}

 		/* focused app visual feedback */
@ -583,7 +599,7 @@ nav[role='navigation'] {
 		border-width: 10px;
 		transform: translateX(-50%);
 		left: 50%;
-		bottom: 0;
+		bottom: -5px;
 		display: none;
 	}

--- a/core/css/inputs.css
+++ b/core/css/inputs.css
@ -147,6 +147,15 @@ div[contenteditable=true]:not(:disabled):not(.primary):active,
  background-color: var(--color-main-background);
  color: var(--color-text-light);
 }
+div.select2-drop .select2-search input:not(:disabled):not(.primary):focus-visible,
+select:not(:disabled):not(.primary):focus-visible,
+button:not(.button-vue):not(:disabled):not(.primary):focus-visible, .button:not(:disabled):not(.primary):focus-visible,
+input:not([type=range]):not(:disabled):not(.primary):focus-visible,
+textarea:not(:disabled):not(.primary):focus-visible,
+div[contenteditable=true]:not(:disabled):not(.primary):focus-visible,
+.pager li a:not(:disabled):not(.primary):focus-visible {
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
 div.select2-drop .select2-search input:disabled,
 select:disabled,
 button:not(.button-vue):disabled, .button:disabled,
--- a/core/css/inputs.css.map
+++ b/core/css/inputs.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["variables.scss","inputs.scss","functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ADlCC;AACD;EACC;;;AAED;EACC;;;AAKD;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC;EACA,YAVgB;EAWhB;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA4BA;;AA1BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAGD;AACA;AAcC;AAAA;;AAbA;EACC;EACA;EAEA,QAvHe;;AAyHhB;EAIC;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;EACC;;;AAIF;AACA;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;EACA,YA1JgB;EA2JhB;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACC;;;AAKD;AAAA;EACC;;AAIA;AAAA;EACC;;;AAKH;AACA;AAAA;AAAA;AAAA;EAIC;EACA;AAEA;;AACA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;EACA;EACA;;;AAID;AACC;;AACA;EAEC;EACA;EACA;;;AAKH;EACC;EACA;EACA;EACA;;AAEC;EAGC;EACA;;;AAKH;EACC;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,QA9OgB;;;AAiPjB;AAEC;AAsBC;;AAnBA;EACC;EACA;EACA;EACA;AACA;EACA;EACA;EACA,QA9Pc;EA+Pd,OA/Pc;EAgQd;EACA;EACA;;AACA;EACC;AC7NH;EAEA;;ADmOG;EACC;;AAID;EAGC;EACA;;AACA;EACC;;AAQH;EACC;EACA;AACA;EACA;;;AAOJ;AACA;AAAA;EAEC;;;AAED;AAAA;EAEC;;;AAGD;AAKC;AA8EC;;AA5EA;EAEC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EAEC;;AAED;EACC;EACA;EACA,QAxBkB;EAyBlB,OAzBkB;EA0BlB;EACA;EACA;EACA;;AAED;EAEC;;AAED;EACC;EACA;EACA;EACA;;AAED;AAEA;AAAA;EAEC;EACA;EACA;;AAED;EACC;EACA;AAA4D;;AAE7D;EACC;;AAID;EACC;EACA;;AAED;EACC,eA/DkB;;AAmEnB;EACC;EACA,QArEkB;EAsElB,OAtEkB;EAuElB;EACA;;AAED;EACC;;AAED;EACC;;AAOD;EAEC;;AAED;EACC,cAzFyB;;AA2F1B;EACC;EACA;EACA;;AAED;EACC;AAAuE;EACvE;AAAiE;;AAElE;EACC;EACA;AAAiE;EACjE;;AAID;EAEC;AAA0C;EAC1C;AAAsD;EACtD;;AAED;EACC;;AAED;EACC;AAAc;;;AAMlB;AACA;EACC;EACA;;AACA;EACC;;AAED;EACC;EACA;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;EACA;;AAIH;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;;AAGF;EACE;EACA;;;AAMH;AAAA;AAAA;AAAA;EAEC;;;AAID;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACA;EAIC;EACA;EACA;EACA;;AAED;EACC;;AAGF;EACC;;AACA;EACC;;;AAKJ;EACC;;AACA;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EAEC;EACA;;AAGF;EACC;EACA;EACA;;AACA;EACC;EACA;;AAGF;EAGC;;AAED;EACC;;;AAKH;AACA;EACC;EACA;;AACA;EACC;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAIH;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;;AAED;EACC;EACA;;AACA;EACC;;;AAQL;AACA;EACC;EACA;EACA;EACA;EACA;EACA;AAiHA;;AAhHA;AACC;;AACA;EACC;EACA;;AAGF;EAEC;;AAED;AACC;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QA1rBe;AA2rBf;AAoDA;AASA;AAaA;;AAzEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;AASA;;AAPA;EACC;AACA;;AACA;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;EAEA;EACA;EACA;EACA;AACA;AAAA;AAQA;AAAA;;AANA;EACC;;AAED;EACC,cAnDa;;AAuDd;EACC;EACA;EACA;;AAKH;EACC;EACA;EACA;AAAY;EACZ;EACA;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA,cAhFe;AAiFf;EACA;;AAGD;EACC;EACA;EACA;EACA;AACA;EACA;EACA;AACA;EACA;AACA;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AACA;AAAA;EAEC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAiBA;AAAA;AAAA;;AAhBA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAMA;EACC;EACA;;AAGF;EACC;;AAED;EACC;;AAIA;EACC;;;AAQN;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEC;EACC;;AAED;EACC;;AAGF;EACC;;AAED;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;;AAIF;AACA;EACC;IAEC;;EAED;IAEC;;EAED;IAGC;;EAED;IAEC;;;AAGF;EACC;EACA;EACA;;;AAKD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC","file":"inputs.css"}
+{"version":3,"sourceRoot":"","sources":["variables.scss","inputs.scss","functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ADlCC;AACD;EACC;;;AAED;EACC;;;AAKD;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC;EACA,YAVgB;EAWhB;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA+BA;;AA7BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAGD;AACA;AAcC;AAAA;;AAbA;EACC;EACA;EAEA,QA1He;;AA4HhB;EAIC;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;EACC;;;AAIF;AACA;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;EACA,YA7JgB;EA8JhB;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACC;;;AAKD;AAAA;EACC;;AAIA;AAAA;EACC;;;AAKH;AACA;AAAA;AAAA;AAAA;EAIC;EACA;AAEA;;AACA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;EACA;EACA;;;AAID;AACC;;AACA;EAEC;EACA;EACA;;;AAKH;EACC;EACA;EACA;EACA;;AAEC;EAGC;EACA;;;AAKH;EACC;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,QAjPgB;;;AAoPjB;AAEC;AAsBC;;AAnBA;EACC;EACA;EACA;EACA;AACA;EACA;EACA;EACA,QAjQc;EAkQd,OAlQc;EAmQd;EACA;EACA;;AACA;EACC;AChOH;EAEA;;ADsOG;EACC;;AAID;EAGC;EACA;;AACA;EACC;;AAQH;EACC;EACA;AACA;EACA;;;AAOJ;AACA;AAAA;EAEC;;;AAED;AAAA;EAEC;;;AAGD;AAKC;AA8EC;;AA5EA;EAEC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EAEC;;AAED;EACC;EACA;EACA,QAxBkB;EAyBlB,OAzBkB;EA0BlB;EACA;EACA;EACA;;AAED;EAEC;;AAED;EACC;EACA;EACA;EACA;;AAED;AAEA;AAAA;EAEC;EACA;EACA;;AAED;EACC;EACA;AAA4D;;AAE7D;EACC;;AAID;EACC;EACA;;AAED;EACC,eA/DkB;;AAmEnB;EACC;EACA,QArEkB;EAsElB,OAtEkB;EAuElB;EACA;;AAED;EACC;;AAED;EACC;;AAOD;EAEC;;AAED;EACC,cAzFyB;;AA2F1B;EACC;EACA;EACA;;AAED;EACC;AAAuE;EACvE;AAAiE;;AAElE;EACC;EACA;AAAiE;EACjE;;AAID;EAEC;AAA0C;EAC1C;AAAsD;EACtD;;AAED;EACC;;AAED;EACC;AAAc;;;AAMlB;AACA;EACC;EACA;;AACA;EACC;;AAED;EACC;EACA;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;EACA;;AAIH;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;;AAGF;EACE;EACA;;;AAMH;AAAA;AAAA;AAAA;EAEC;;;AAID;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACA;EAIC;EACA;EACA;EACA;;AAED;EACC;;AAGF;EACC;;AACA;EACC;;;AAKJ;EACC;;AACA;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EAEC;EACA;;AAGF;EACC;EACA;EACA;;AACA;EACC;EACA;;AAGF;EAGC;;AAED;EACC;;;AAKH;AACA;EACC;EACA;;AACA;EACC;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAIH;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;;AAED;EACC;EACA;;AACA;EACC;;;AAQL;AACA;EACC;EACA;EACA;EACA;EACA;EACA;AAiHA;;AAhHA;AACC;;AACA;EACC;EACA;;AAGF;EAEC;;AAED;AACC;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QA7rBe;AA8rBf;AAoDA;AASA;AAaA;;AAzEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;AASA;;AAPA;EACC;AACA;;AACA;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;EAEA;EACA;EACA;EACA;AACA;AAAA;AAQA;AAAA;;AANA;EACC;;AAED;EACC,cAnDa;;AAuDd;EACC;EACA;EACA;;AAKH;EACC;EACA;EACA;AAAY;EACZ;EACA;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA,cAhFe;AAiFf;EACA;;AAGD;EACC;EACA;EACA;EACA;AACA;EACA;EACA;AACA;EACA;AACA;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AACA;AAAA;EAEC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAiBA;AAAA;AAAA;;AAhBA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAMA;EACC;EACA;;AAGF;EACC;;AAED;EACC;;AAIA;EACC;;;AAQN;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEC;EACC;;AAED;EACC;;AAGF;EACC;;AAED;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;;AAIF;AACA;EACC;IAEC;;EAED;IAEC;;EAED;IAGC;;EAED;IAEC;;;AAGF;EACC;EACA;EACA;;;AAKD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC","file":"inputs.css"}
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@ -72,6 +72,9 @@ div[contenteditable=true],
 			background-color: var(--color-main-background);
 			color: var(--color-text-light);
 		}
+		&:focus-visible {
+			box-shadow: 0 0 0 2px var(--color-primary);
+		}
 	}
 	&:disabled {
 		background-color: var(--color-background-dark);
--- a/core/css/server.css
+++ b/core/css/server.css
@ -40,7 +40,6 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr
  margin: 0;
  padding: 0;
  border: 0;
-  outline: 0;
  font-weight: inherit;
  font-size: 100%;
  font-family: inherit;
@ -50,6 +49,23 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr
  scrollbar-width: thin;
 }

+.js-focus-visible :focus:not(.focus-visible) {
+  outline: none;
+}
+
+:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-primary);
+  outline: none;
+}
+
+/** Let vue apps handle the focus themselves */
+#content-vue :focus-visible,
+#app-navigation-vue :focus-visible,
+.vue :focus-visible {
+  box-shadow: none;
+  outline: none;
+}
+
 html, body {
  height: 100%;
 }
@ -309,6 +325,12 @@ body {
  opacity: 0.8;
 }

+#show:focus-visible + label, #dbpassword-toggle:focus-visible + label, #personal-show:focus-visible + label {
+  box-shadow: var(--color-primary) 0 0 0 2px;
+  opacity: 1;
+  border-radius: 9999px;
+}
+
 #show + label, #dbpassword + label, #personal-show + label {
  position: absolute !important;
  height: 20px;
@ -920,9 +942,15 @@ span.ui-icon {

 /* ---- CONTACTS MENU ---- */
 #contactsmenu .menutoggle {
-  background-size: 20px 20px;
-  padding: 14px;
  cursor: pointer;
+}
+#contactsmenu .menutoggle:before {
+  background-size: 20px 20px;
+  background-repeat: no-repeat;
+  background-position-x: 3px;
+  background-position-y: 4px;
+  padding: 14px;
+  content: " ";
  background-image: var(--original-icon-contacts-white);
  filter: var(--primary-invert-if-bright);
 }
@ -1327,6 +1355,15 @@ div[contenteditable=true]:not(:disabled):not(.primary):active,
  background-color: var(--color-main-background);
  color: var(--color-text-light);
 }
+div.select2-drop .select2-search input:not(:disabled):not(.primary):focus-visible,
+select:not(:disabled):not(.primary):focus-visible,
+button:not(.button-vue):not(:disabled):not(.primary):focus-visible, .button:not(:disabled):not(.primary):focus-visible,
+input:not([type=range]):not(:disabled):not(.primary):focus-visible,
+textarea:not(:disabled):not(.primary):focus-visible,
+div[contenteditable=true]:not(:disabled):not(.primary):focus-visible,
+.pager li a:not(:disabled):not(.primary):focus-visible {
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
 div.select2-drop .select2-search input:disabled,
 select:disabled,
 button:not(.button-vue):disabled, .button:disabled,
@ -2259,6 +2296,17 @@ label.infield {
  -moz-user-select: none;
  -ms-user-select: none;
 }
+#header a:focus-visible, #header button:not(.button-vue):focus-visible, #header div[role=button]:focus-visible,
+#navigation a:focus-visible,
+#navigation button:not(.button-vue):focus-visible,
+#navigation div[role=button]:focus-visible,
+#expanddiv a:focus-visible,
+#expanddiv button:not(.button-vue):focus-visible,
+#expanddiv div[role=button]:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--color-primary-text);
+  border-radius: var(--border-radius);
+  outline: none;
+}

 /* removed until content-focusing issue is fixed */
 #skip-to-content a {
@ -2295,19 +2343,17 @@ label.infield {

 /* LOGO and APP NAME -------------------------------------------------------- */
 #nextcloud {
-  padding: 7px 0;
+  padding: 5px 0;
  padding-left: 86px;
  position: relative;
-  height: 100%;
+  height: calc(100% - 4px);
  box-sizing: border-box;
  opacity: 1;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
-}
-#nextcloud:focus {
-  opacity: 0.75;
+  margin: 2px;
 }
 #nextcloud:hover, #nextcloud:active {
  opacity: 1;
@ -2387,6 +2433,12 @@ label.infield {
 #header .header-right > div > .menu.settings-menu > ul li a.active {
  background-color: var(--color-primary-light);
 }
+#header .header-left > nav > .menu #apps > ul li a:focus-visible, #header .header-left > nav > .menu.settings-menu > ul li a:focus-visible,
+#header .header-right > div > .menu #apps > ul li a:focus-visible,
+#header .header-right > div > .menu.settings-menu > ul li a:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--color-primary);
+  outline: none;
+}
 #header .header-left > nav > .menu #apps > ul li a span, #header .header-left > nav > .menu.settings-menu > ul li a span,
 #header .header-right > div > .menu #apps > ul li a span,
 #header .header-right > div > .menu.settings-menu > ul li a span {
@ -2469,11 +2521,19 @@ label.infield {
  justify-content: center;
  align-items: center;
  width: 50px;
-  height: 100%;
+  height: 44px;
  cursor: pointer;
-  opacity: 0.6;
+  opacity: 0.85;
  padding: 0;
-  margin: 0;
+  margin: 2px 0;
+}
+#header .header-right > div > .menutoggle:focus,
+#header .header-right > form > .menutoggle:focus {
+  opacity: 1;
+}
+#header .header-right > div > .menutoggle:focus-visible,
+#header .header-right > form > .menutoggle:focus-visible {
+  outline: none;
 }

 /* hover effect for app switcher label */
@ -2583,7 +2643,7 @@ nav[role=navigation] {
 #settings #expand {
  opacity: 1;
  /* override icon opacity */
-  padding-right: 12px;
+  margin-right: 12px;
  /* Profile picture in header */
  /* show triangle below user menu if active */
 }
@ -2670,13 +2730,14 @@ nav[role=navigation] {
  position: relative;
  display: flex;
  margin: 0;
-  height: 50px;
+  height: 44px;
  width: 50px;
  align-items: center;
  justify-content: center;
-  opacity: 0.6;
+  opacity: 0.85;
  letter-spacing: -0.5px;
  font-size: 12px;
+  margin: 2px;
 }
 #appmenu li:hover a,
 #appmenu li a:focus,
@ -2782,7 +2843,7 @@ nav[role=navigation] {
  border-width: 10px;
  transform: translateX(-50%);
  left: 50%;
-  bottom: 0;
+  bottom: -5px;
  display: none;
 }
 #appmenu li a.active::before,
@ -3253,7 +3314,7 @@ kbd {
 #app-navigation:not(.vue) > ul {
  position: relative;
  height: 100%;
-  width: inherit;
+  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
@ -3293,6 +3354,11 @@ kbd {
 #app-navigation:not(.vue) > ul > li a:focus > a {
  background-color: var(--color-background-hover);
 }
+#app-navigation:not(.vue) > ul > li a:focus-visible {
+  border-radius: var(--border-radius);
+  box-shadow: var(--color-primary) inset 0 0 0 2px;
+  outline: none;
+}
 #app-navigation:not(.vue) > ul > li.active,
 #app-navigation:not(.vue) > ul > li.active > a,
 #app-navigation:not(.vue) > ul > li a:active,
@ -3405,6 +3471,10 @@ kbd {
 #app-navigation:not(.vue) > ul > li > ul > li > a.svg {
  padding: 0 12px 0 44px;
 }
+#app-navigation:not(.vue) > ul > li > a.svg :focus-visible,
+#app-navigation:not(.vue) > ul > li > ul > li > a.svg :focus-visible {
+  padding: 0 8px 0 42px;
+}
 #app-navigation:not(.vue) > ul > li > a:first-child img,
 #app-navigation:not(.vue) > ul > li > ul > li > a:first-child img {
  margin-right: 11px;
@ -3485,6 +3555,12 @@ kbd {
   * link. */
  left: 0;
 }
+#app-navigation:not(.vue) .collapsible .collapse:focus-visible {
+  opacity: 1;
+  border-width: 0;
+  box-shadow: inset 0 0 0 2px var(--color-primary);
+  background: none;
+}
 #app-navigation:not(.vue) .collapsible:before {
  position: absolute;
  height: 44px;
@ -3820,6 +3896,11 @@ kbd {
  display: block;
  filter: var(--background-invert-if-dark);
 }
+#app-settings-header .settings-button:focus-visible {
+  box-shadow: 0 0 0 2px inset var(--color-primary) !important;
+  border-radius: var(--border-radius);
+  background-position: 12px center;
+}

 /* GENERAL SECTION ------------------------------------------------------------ */
 .section {
--- a/core/css/server.css.map
+++ b/core/css/server.css.map
--- a/core/css/styles.css
+++ b/core/css/styles.css
@ -39,7 +39,6 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr
  margin: 0;
  padding: 0;
  border: 0;
-  outline: 0;
  font-weight: inherit;
  font-size: 100%;
  font-family: inherit;
@ -49,6 +48,23 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr
  scrollbar-width: thin;
 }

+.js-focus-visible :focus:not(.focus-visible) {
+  outline: none;
+}
+
+:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-primary);
+  outline: none;
+}
+
+/** Let vue apps handle the focus themselves */
+#content-vue :focus-visible,
+#app-navigation-vue :focus-visible,
+.vue :focus-visible {
+  box-shadow: none;
+  outline: none;
+}
+
 html, body {
  height: 100%;
 }
@ -308,6 +324,12 @@ body {
  opacity: 0.8;
 }

+#show:focus-visible + label, #dbpassword-toggle:focus-visible + label, #personal-show:focus-visible + label {
+  box-shadow: var(--color-primary) 0 0 0 2px;
+  opacity: 1;
+  border-radius: 9999px;
+}
+
 #show + label, #dbpassword + label, #personal-show + label {
  position: absolute !important;
  height: 20px;
@ -919,9 +941,15 @@ span.ui-icon {

 /* ---- CONTACTS MENU ---- */
 #contactsmenu .menutoggle {
-  background-size: 20px 20px;
-  padding: 14px;
  cursor: pointer;
+}
+#contactsmenu .menutoggle:before {
+  background-size: 20px 20px;
+  background-repeat: no-repeat;
+  background-position-x: 3px;
+  background-position-y: 4px;
+  padding: 14px;
+  content: " ";
  background-image: var(--original-icon-contacts-white);
  filter: var(--primary-invert-if-bright);
 }
--- a/core/css/styles.css.map
+++ b/core/css/styles.css.map
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@ -20,7 +20,6 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr
 	margin: 0;
 	padding: 0;
 	border: 0;
-	outline: 0;
 	font-weight: inherit;
 	font-size: 100%;
 	font-family: inherit;
@ -30,6 +29,23 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr
 	scrollbar-width: thin;
 }

+.js-focus-visible :focus:not(.focus-visible) {
+	outline: none;
+}
+
+:focus-visible {
+	box-shadow: 0 0 0 2px var(--color-primary);
+	outline: none;
+}
+
+/** Let vue apps handle the focus themselves */
+#content-vue :focus-visible,
+#app-navigation-vue :focus-visible,
+.vue :focus-visible {
+	box-shadow: none;
+	outline: none;
+}
+
 html, body {
 	height: 100%;
 }
@ -294,6 +310,11 @@ body {
 #show:checked + label, #dbpassword:checked + label, #personal-show:checked + label {
 	opacity: .8;
 }
+#show:focus-visible + label, #dbpassword-toggle:focus-visible + label, #personal-show:focus-visible + label {
+	box-shadow: var(--color-primary) 0 0 0 2px;
+	opacity: 1;
+	border-radius: 9999px;
+}

 #show + label, #dbpassword + label, #personal-show + label {
 	position: absolute !important;
@ -975,12 +996,18 @@ span.ui-icon {

 #contactsmenu {
 	.menutoggle {
-		background-size: 20px 20px;
-		padding: 14px;
 		cursor: pointer;
-		// Force white
-		background-image: var(--original-icon-contacts-white);
-		filter: var(--primary-invert-if-bright);
+		&:before {
+			background-size: 20px 20px;
+			background-repeat: no-repeat;
+			background-position-x: 3px;
+			background-position-y: 4px;
+			padding: 14px;
+			content: ' ';
+			// Force white
+			background-image: var(--original-icon-contacts-white);
+			filter: var(--primary-invert-if-bright);
+		}

 		&:hover,
 		&:focus,
--- a/core/src/Polyfill/index.js
+++ b/core/src/Polyfill/index.js
@ -24,3 +24,4 @@
 import './console'
 import './closest'
 import './windows-phone'
+import 'focus-visible'
--- a/core/src/components/HeaderMenu.vue
+++ b/core/src/components/HeaderMenu.vue
@ -174,8 +174,8 @@ export default {
 		align-items: center;
 		justify-content: center;
 		width: 50px;
-		height: 100%;
-		margin: 0;
+		height: 44px;
+		margin: 2px 0;
 		padding: 0;
 		cursor: pointer;
 		opacity: .6;
@ -188,6 +188,10 @@ export default {
 		opacity: 1;
 	}

+	&__trigger:focus-visible {
+		outline: none;
+	}
+
 	&__wrapper {
 		position: fixed;
 		z-index: 2000;
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@ -61,7 +61,7 @@ $getUserAvatar = static function (int $size) use ($_): string {
 					id="nextcloud">
 					<div class="logo logo-icon">
 						<h1 class="hidden-visually">
-							<?php p($theme->getName()); ?> <?php p(!empty($_['application'])?$_['application']: $l->t('Apps')); ?>
+							<?php p($l->t('%s\'s homepage', [$theme->getName()])); ?>
 						</h1>
 					</div>
 				</a>
@ -136,7 +136,7 @@ $getUserAvatar = static function (int $size) use ($_): string {
 				<div id="notifications"></div>
 				<div id="unified-search"></div>
 				<div id="contactsmenu">
-					<div class="icon-contacts menutoggle" tabindex="0" role="button"
+					<div class="menutoggle" tabindex="0" role="button"
 					aria-haspopup="true" aria-controls="contactsmenu-menu" aria-expanded="false">
 						<span class="hidden-visually"><?php p($l->t('Contacts'));?></span>
 					</div>
--- a/dist/core-common.js
+++ b/dist/core-common.js
--- a/dist/core-common.js.map
+++ b/dist/core-common.js.map
--- a/dist/core-main.js
+++ b/dist/core-main.js
--- a/dist/core-main.js.map
+++ b/dist/core-main.js.map
--- a/dist/core-unified-search.js
+++ b/dist/core-unified-search.js
--- a/dist/core-unified-search.js.map
+++ b/dist/core-unified-search.js.map
--- a/dist/dashboard-main.js
+++ b/dist/dashboard-main.js
--- a/dist/dashboard-main.js.map
+++ b/dist/dashboard-main.js.map
--- a/dist/user_status-menu.js
+++ b/dist/user_status-menu.js
--- a/dist/user_status-menu.js.map
+++ b/dist/user_status-menu.js.map
--- a/package.json
+++ b/package.json
@ -61,6 +61,7 @@
    "debounce": "^1.2.1",
    "dompurify": "^2.3.6",
    "escape-html": "^1.0.3",
+    "focus-visible": "^5.2.0",
    "handlebars": "^4.7.7",
    "ical.js": "^1.4.0",
    "jquery": "~3.6",