Improve accessibility

Pytal · nextcloud-command · commit 52b2f5603e34 · 2021-11-26T00:21:50.000Z
Signed-off-by: Christopher Ng &lt;chrng8@gmail.com&gt;
Signed-off-by: nextcloud-command &lt;nextcloud-command@users.noreply.github.com&gt;
diff --git a/apps/settings/js/vue-settings-personal-info.js b/apps/settings/js/vue-settings-personal-info.js
diff --git a/apps/settings/js/vue-settings-personal-info.js.map b/apps/settings/js/vue-settings-personal-info.js.map
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -185,7 +185,9 @@ export default {
 	.federation-actions--additional {
 		opacity: 0.4 !important;
 
-		&:hover {
+		&:hover,
+		&:focus,
+		&:active {
 			opacity: 0.8 !important;
 		}
 	}
diff --git a/core/js/dist/profile.js b/core/js/dist/profile.js
diff --git a/core/js/dist/profile.js.map b/core/js/dist/profile.js.map
diff --git a/core/src/components/Profile/PrimaryActionButton.vue b/core/src/components/Profile/PrimaryActionButton.vue
@@ -96,7 +96,9 @@ export default {
 			}
 		}
 
-		&:hover {
+		&:hover,
+		&:focus,
+		&:active {
 			background-color: var(--color-primary-element-light);
 		}
 	}
diff --git a/core/src/views/Profile.vue b/core/src/views/Profile.vue
@@ -364,7 +364,9 @@ $content-max-width: 640px;
 				line-height: 44px;
 				font-weight: bold;
 
-				&:hover {
+				&:hover,
+				&:focus,
+				&:active {
 					color: var(--color-primary-text);
 					background-color: var(--color-primary-element-light);
 				}
@@ -386,7 +388,9 @@ $content-max-width: 640px;
 				&.interactive {
 					cursor: pointer;
 
-					&:hover {
+					&:hover,
+					&:focus,
+					&:active {
 						background-color: var(--color-main-background);
 						color: var(--color-main-text);
 						border-radius: var(--border-radius-pill);
@@ -438,7 +442,9 @@ $content-max-width: 640px;
 			.avatardiv__user-status {
 				cursor: pointer;
 
-				&:hover {
+				&:hover,
+				&:focus,
+				&:active {
 					box-shadow: 0 3px 6px var(--color-box-shadow);
 				}
 			}

Original file line number	Diff line number	Diff line change
`@@ -388,7 +388,9 @@ export default {`
`388`	`388`	`.email__actions {`
`389`	`389`	`opacity: 0.4 !important;`
`390`	`390`
`391`		`- &:hover {`
	`391`	`+ &:hover,`
	`392`	`+ &:focus,`
	`393`	`+ &:active {`
`392`	`394`	`opacity: 0.8 !important;`
`393`	`395`	`}`
`394`	`396`
Original file line number	Diff line number	Diff line change
`@@ -88,7 +88,9 @@ a {`
`88`	`88`	`margin-right: 8px;`
`89`	`89`	`}`
`90`	`90`
`91`		`- &:hover {`
	`91`	`+ &:hover,`
	`92`	`+ &:focus,`
	`93`	`+ &:active {`
`92`	`94`	`opacity: 0.8;`
`93`	`95`	`background-color: rgba(127, 127, 127, .25);`
`94`	`96`	`}`
Original file line number	Diff line number	Diff line change
`@@ -61,13 +61,19 @@ export default {`
`61`	`61`	`}`
`62`	`62`	`}`
`63`	`63`
`64`		`- &:hover {`
	`64`	`+ &:hover,`
	`65`	`+ &:focus,`
	`66`	`+ &:active {`
`65`	`67`	`background-color: rgba(127, 127, 127, .15);`
`66`	`68`	`}`
`67`	`69`
`68`		`- &:enabled:hover {`
`69`		`- background-color: rgba(127, 127, 127, .25);`
`70`		`- opacity: 0.8 !important;`
	`70`	`+ &:enabled {`
	`71`	`+ &:hover,`
	`72`	`+ &:focus,`
	`73`	`+ &:active {`
	`74`	`+ background-color: rgba(127, 127, 127, .25);`
	`75`	`+ opacity: 0.8 !important;`
	`76`	`+ }`
`71`	`77`	`}`
`72`	`78`	`}`
`73`	`79`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -185,7 +185,9 @@ export default {`
`185`	`185`	`.federation-actions--additional {`
`186`	`186`	`opacity: 0.4 !important;`
`187`	`187`
`188`		`- &:hover {`
	`188`	`+ &:hover,`
	`189`	`+ &:focus,`
	`190`	`+ &:active {`
`189`	`191`	`opacity: 0.8 !important;`
`190`	`192`	`}`
`191`	`193`	`}`
Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,9 @@ export default {`
`96`	`96`	`}`
`97`	`97`	`}`
`98`	`98`
`99`		`- &:hover {`
	`99`	`+ &:hover,`
	`100`	`+ &:focus,`
	`101`	`+ &:active {`
`100`	`102`	`background-color: var(--color-primary-element-light);`
`101`	`103`	`}`
`102`	`104`	`}`