Merge pull request #39332 from nextcloud/fix/36981-fix-focus-style-on…

…-status-radio-buttons Set double outline on checked state for radio buttons
nextcloud · Aug 16, 2023 · 3c43ff6 · 3c43ff6
2 parents 6f6e244 + 9545826
commit 3c43ff6
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 12 deletions.
diff --git a/apps/user_status/src/components/OnlineStatusSelect.vue b/apps/user_status/src/components/OnlineStatusSelect.vue
@@ -109,14 +109,13 @@ $label-padding: 8px;
 		}
 	}
 
-	&__input:checked + &__label,
-	&__input:focus + &__label,
-	&__label:hover {
-		border-color: var(--color-primary-element);
+	&__input:checked + &__label {
+		outline: 2px solid var(--color-main-text);
+		box-shadow: 0 0 0 4px var(--color-main-background);
 	}
 
-	&__label:active {
-		border-color: var(--color-border-dark);
+	&__input:focus-visible + &__label {
+		outline: 2px solid var(--color-primary-element) !important;
 	}
 
 	&__subline {

diff --git a/dist/user-status-modal-8299.js b/dist/user-status-modal-8299.js
diff --git a/dist/user-status-modal-8299.js.map b/dist/user-status-modal-8299.js.map
diff --git a/dist/user_status-menu.js b/dist/user_status-menu.js
diff --git a/dist/user_status-menu.js.map b/dist/user_status-menu.js.map