Augment keyboard accessibility of contacts menu

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

core/css/server.css

@@ -957,6 +957,12 @@ span.ui-icon {
 #contactsmenu .menutoggle:hover, #contactsmenu .menutoggle:focus, #contactsmenu .menutoggle:active {
   opacity: 1 !important;
 }
+#contactsmenu #contactsmenu-menu a {
+  padding: 2px;
+}
+#contactsmenu #contactsmenu-menu a:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--color-main-text) !important;
+}
 
 #header .header-right > div#contactsmenu > .menu {
   /* show 2.5 to 4.5 entries depending on the screen height */
@@ -997,9 +1003,6 @@ span.ui-icon {
   border-bottom: 1px solid var(--color-border);
   /* actions menu */
 }
-#header .header-right > div#contactsmenu > .menu .contact :last-of-type {
-  border-bottom: none;
-}
 #header .header-right > div#contactsmenu > .menu .contact .avatar {
   height: 32px;
   width: 32px;
@@ -1026,13 +1029,25 @@ span.ui-icon {
 #header .header-right > div#contactsmenu > .menu .contact .top-action, #header .header-right > div#contactsmenu > .menu .contact .second-action, #header .header-right > div#contactsmenu > .menu .contact .other-actions {
   width: 16px;
   height: 16px;
-  padding: 14px;
   opacity: 0.5;
   cursor: pointer;
 }
-#header .header-right > div#contactsmenu > .menu .contact .top-action :hover, #header .header-right > div#contactsmenu > .menu .contact .second-action :hover, #header .header-right > div#contactsmenu > .menu .contact .other-actions :hover {
+#header .header-right > div#contactsmenu > .menu .contact .top-action:not(button), #header .header-right > div#contactsmenu > .menu .contact .second-action:not(button), #header .header-right > div#contactsmenu > .menu .contact .other-actions:not(button) {
+  padding: 14px;
+}
+#header .header-right > div#contactsmenu > .menu .contact .top-action:hover, #header .header-right > div#contactsmenu > .menu .contact .top-action:active, #header .header-right > div#contactsmenu > .menu .contact .top-action:focus, #header .header-right > div#contactsmenu > .menu .contact .second-action:hover, #header .header-right > div#contactsmenu > .menu .contact .second-action:active, #header .header-right > div#contactsmenu > .menu .contact .second-action:focus, #header .header-right > div#contactsmenu > .menu .contact .other-actions:hover, #header .header-right > div#contactsmenu > .menu .contact .other-actions:active, #header .header-right > div#contactsmenu > .menu .contact .other-actions:focus {
   opacity: 1;
 }
+#header .header-right > div#contactsmenu > .menu .contact button.other-actions {
+  margin: 5px;
+}
+#header .header-right > div#contactsmenu > .menu .contact button.other-actions:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 2px var(--color-main-text);
+}
+#header .header-right > div#contactsmenu > .menu .contact button.other-actions:focus-visible {
+  border-radius: var(--border-radius-pill);
+}
 #header .header-right > div#contactsmenu > .menu .contact .menu {
   top: 47px;
   margin-right: 13px;

core/css/styles.css

@@ -956,6 +956,12 @@ span.ui-icon {
 #contactsmenu .menutoggle:hover, #contactsmenu .menutoggle:focus, #contactsmenu .menutoggle:active {
   opacity: 1 !important;
 }
+#contactsmenu #contactsmenu-menu a {
+  padding: 2px;
+}
+#contactsmenu #contactsmenu-menu a:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--color-main-text) !important;
+}
 
 #header .header-right > div#contactsmenu > .menu {
   /* show 2.5 to 4.5 entries depending on the screen height */
@@ -996,9 +1002,6 @@ span.ui-icon {
   border-bottom: 1px solid var(--color-border);
   /* actions menu */
 }
-#header .header-right > div#contactsmenu > .menu .contact :last-of-type {
-  border-bottom: none;
-}
 #header .header-right > div#contactsmenu > .menu .contact .avatar {
   height: 32px;
   width: 32px;
@@ -1025,13 +1028,25 @@ span.ui-icon {
 #header .header-right > div#contactsmenu > .menu .contact .top-action, #header .header-right > div#contactsmenu > .menu .contact .second-action, #header .header-right > div#contactsmenu > .menu .contact .other-actions {
   width: 16px;
   height: 16px;
-  padding: 14px;
   opacity: 0.5;
   cursor: pointer;
 }
-#header .header-right > div#contactsmenu > .menu .contact .top-action :hover, #header .header-right > div#contactsmenu > .menu .contact .second-action :hover, #header .header-right > div#contactsmenu > .menu .contact .other-actions :hover {
+#header .header-right > div#contactsmenu > .menu .contact .top-action:not(button), #header .header-right > div#contactsmenu > .menu .contact .second-action:not(button), #header .header-right > div#contactsmenu > .menu .contact .other-actions:not(button) {
+  padding: 14px;
+}
+#header .header-right > div#contactsmenu > .menu .contact .top-action:hover, #header .header-right > div#contactsmenu > .menu .contact .top-action:active, #header .header-right > div#contactsmenu > .menu .contact .top-action:focus, #header .header-right > div#contactsmenu > .menu .contact .second-action:hover, #header .header-right > div#contactsmenu > .menu .contact .second-action:active, #header .header-right > div#contactsmenu > .menu .contact .second-action:focus, #header .header-right > div#contactsmenu > .menu .contact .other-actions:hover, #header .header-right > div#contactsmenu > .menu .contact .other-actions:active, #header .header-right > div#contactsmenu > .menu .contact .other-actions:focus {
   opacity: 1;
 }
+#header .header-right > div#contactsmenu > .menu .contact button.other-actions {
+  margin: 5px;
+}
+#header .header-right > div#contactsmenu > .menu .contact button.other-actions:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 2px var(--color-main-text);
+}
+#header .header-right > div#contactsmenu > .menu .contact button.other-actions:focus-visible {
+  border-radius: var(--border-radius-pill);
+}
 #header .header-right > div#contactsmenu > .menu .contact .menu {
   top: 47px;
   margin-right: 13px;

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;

core/src/OC/contactsmenu/contact.handlebars

@@ -27,8 +27,13 @@
 			<div class="email-address">{{contact.emailAddresses}}</div>
 		</a>
 	{{/if}}
+	{{#if contact.topAction}}
+		<a class="top-action" href="{{contact.topAction.hyperlink}}" title="{{contact.topAction.title}}">
+			<img src="{{contact.topAction.icon}}" alt="{{contact.topAction.title}}">
+		</a>
+	{{/if}}
 {{else if contact.topAction}}
-	<a class="body" href="{{contact.topAction.hyperlink}}"> 
+	<a class="body" href="{{contact.topAction.hyperlink}}">
 		<div class="full-name">{{contact.fullName}}</div>
 		<div class="last-message">{{contact.lastMessage}}</div>
 		<div class="email-address">{{contact.emailAddresses}}</div>
@@ -49,7 +54,7 @@
 </a>
 {{/if}}
 {{#if contact.hasManyActions}}
-	<span class="other-actions icon-more"></span>
+	<button class="other-actions icon-more"></button>
 	<div class="menu popovermenu">
 		<ul>
 			{{#each contact.actions}}