Augment keyboard accessibility of contacts menu

Signed-off-by: Christopher Ng <chrng8@gmail.com>

1 files changed, 30 insertions, 6 deletions

diff --git a/core/css/styles.scss b/core/css/styles.scss
index b21394a52c6..0fb2f8eef73 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -1015,6 +1015,16 @@ span.ui-icon {
 			opacity: 1 !important;
 		}
 	}
+
+	#contactsmenu-menu {
+		a {
+			padding: 2px;
+
+			&:focus-visible {
+				box-shadow: inset 0 0 0 2px var(--color-main-text) !important; // override rule in core/css/headers.scss #header a:focus-visible
+			}
+		}
+	}
 }
 
 #header .header-right > div#contactsmenu > .menu {
@@ -1059,10 +1069,6 @@ span.ui-icon {
 		padding: 3px 3px 3px 10px;
 		border-bottom: 1px solid var(--color-border);
 
-		:last-of-type {
-			border-bottom: none;
-		}
-
 		.avatar {
 			height: 32px;
 			width: 32px;
@@ -1093,15 +1099,33 @@ span.ui-icon {
 		.top-action, .second-action, .other-actions {
 			width: 16px;
 			height: 16px;
-			padding: 14px;
 			opacity: .5;
 			cursor: pointer;
 
-			:hover {
+			&:not(button) {
+				padding: 14px;
+			}
+
+			&:hover,
+			&:active,
+			&:focus {
 				opacity: 1;
 			}
 		}
 
+		button.other-actions {
+			margin: 5px;
+
+			&:focus {
+				border-color: transparent;
+				box-shadow: 0 0 0 2px var(--color-main-text);
+			}
+
+			&:focus-visible {
+				border-radius: var(--border-radius-pill);
+			}
+		}
+
 		/* actions menu */
 		.menu {
 			top: 47px;