Merge pull request #39277 from nextcloud/test/4193-Buttons_accessibility_improvements

Set double outline to buttons in focus state

apps/dashboard/src/DashboardApp.vue

@@ -522,7 +522,8 @@ export default {
 		background-color: var(--color-background-hover)!important;
 	}
 	&:focus-visible {
-		box-shadow: 0 0 0 2px var(--color-main-text) !important;
+		box-shadow: 0 0 0 4px var(--color-main-background) !important;
+		outline: 2px solid var(--color-main-text) !important;
 	}
 }
 

apps/user_status/src/UserStatus.vue

@@ -301,8 +301,9 @@ export default {
 			&:focus {
 				background-color: var(--color-background-hover);
 			}
-			&:focus {
-				box-shadow: 0 0 0 2px var(--color-main-text) !important;
+			&:focus-visible {
+				box-shadow: 0 0 0 4px var(--color-main-background) !important;
+				outline: 2px solid var(--color-main-text) !important;
 			}
 		}
 	}

core/css/apps.scss

@@ -731,7 +731,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 			}
 		}
 	}
-	
+
 	&::-webkit-scrollbar-button {
 		height:  var(--body-container-radius);
 	}
@@ -1430,3 +1430,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
 		display: flex;
 	}
 }
+.button.primary.skip-navigation:focus-visible {
+	box-shadow: 0 0 0 4px var(--color-main-background) !important;
+	outline: 2px solid var(--color-main-text) !important;
+}