Set double outline to buttons in focus state

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
nextcloud · Jul 11, 2023 · 34bbb4e · 34bbb4e
1 parent 12ee258
commit 34bbb4e
Show file tree

Hide file tree

Showing 11 changed files with 20 additions and 14 deletions.
diff --git a/apps/dashboard/src/DashboardApp.vue b/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;
 	}
 }
 

diff --git a/apps/user_status/src/UserStatus.vue b/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;
 			}
 		}
 	}

diff --git a/core/css/apps.css b/core/css/apps.css
diff --git a/core/css/apps.css.map b/core/css/apps.css.map
diff --git a/core/css/apps.scss b/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;
+}
diff --git a/core/css/server.css b/core/css/server.css