Merge pull request #29893 from nextcloud/enh/28139/a11y

6 files changed, 30 insertions, 9 deletions

diff --git a/apps/settings/src/components/PersonalInfo/BiographySection/Biography.vue b/apps/settings/src/components/PersonalInfo/BiographySection/Biography.vue
index 29a4e1bcb16..64f9640d9f2 100644
--- a/apps/settings/src/components/PersonalInfo/BiographySection/Biography.vue
+++ b/apps/settings/src/components/PersonalInfo/BiographySection/Biography.vue
@@ -137,7 +137,9 @@ export default {
 		font-family: var(--font-face);
 		cursor: text;
 
-		&:hover {
+		&:hover,
+		&:focus,
+		&:active {
 			border-color: var(--color-primary-element) !important;
 			outline: none !important;
 		}
diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
index 3cf380842a1..383b8a608ff 100644
--- a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
+++ b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
@@ -388,7 +388,9 @@ export default {
 		.email__actions {
 			opacity: 0.4 !important;
 
-			&:hover {
+			&:hover,
+			&:focus,
+			&:active {
 				opacity: 0.8 !important;
 			}
 
diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue
index f680a6a9b65..b1ff57130b1 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue
@@ -88,7 +88,9 @@ a {
 		margin-right: 8px;
 	}
 
-	&:hover {
+	&:hover,
+	&:focus,
+	&:active {
 		opacity: 0.8;
 		background-color: rgba(127, 127, 127, .25);
 	}
diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
index 43fcc85619a..01454311765 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
@@ -105,10 +105,17 @@ export default {
 	font-weight: bold;
 	box-shadow: 0 2px 9px var(--color-box-shadow);
 
-	&:hover {
+	&:hover,
+	&:focus,
+	&:active {
 		box-shadow: 0 2px 12px var(--color-box-shadow);
 	}
 
+	&:focus-visible {
+		outline: var(--color-main-text) solid 1px;
+		outline-offset: 3px;
+	}
+
 	&.disabled {
 		filter: grayscale(1);
 		opacity: 0.5;
diff --git a/apps/settings/src/components/PersonalInfo/shared/AddButton.vue b/apps/settings/src/components/PersonalInfo/shared/AddButton.vue
index 1fe7a532419..56cbb2ba515 100644
--- a/apps/settings/src/components/PersonalInfo/shared/AddButton.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/AddButton.vue
@@ -61,13 +61,19 @@ export default {
 			}
 		}
 
-		&:hover {
+		&:hover,
+		&:focus,
+		&:active {
 			background-color: rgba(127, 127, 127, .15);
 		}
 
-		&:enabled:hover {
-			background-color: rgba(127, 127, 127, .25);
-			opacity: 0.8 !important;
+		&:enabled {
+			&:hover,
+			&:focus,
+			&:active {
+				background-color: rgba(127, 127, 127, .25);
+				opacity: 0.8 !important;
+			}
 		}
 	}
 </style>
diff --git a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
index 010cb325e4b..6d5dc0f2529 100644
--- a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
@@ -185,7 +185,9 @@ export default {
 	.federation-actions--additional {
 		opacity: 0.4 !important;
 
-		&:hover {
+		&:hover,
+		&:focus,
+		&:active {
 			opacity: 0.8 !important;
 		}
 	}