More ui accessibility improvements.

static/skald.css

@@ -1,6 +1,6 @@
 /* Accessibility: Visible focus indicators for keyboard navigation */
 button:focus,
-[role="button"]:focus,
+[role="separator"]:focus,
 select:focus,
 input:focus,
 textarea:focus,
@@ -1003,38 +1003,50 @@ header .collapse:hover {
 }
 
 #users .user-p {
+    display: block;
     position: relative;
     padding: 10px !important;
     border-bottom: 1px solid #f0f0f0;
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
     height: 40px;
     line-height: 18px;
     margin: 0 !important;
     cursor: pointer;
     overflow: hidden;
     white-space: pre;
+    width: 100%;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: left;
 }
 
-#left-sidebar.active #users > div {
+#left-sidebar.active #users > .user-p {
     padding: 10px 5px !important;
 }
 
-#users > div:hover {
+#users > .user-p:hover,
+#users > .user-p:focus {
     background-color: #f2f2f2;
 }
 
-#users > div::before {
-    content: "\f111";
-    font-family: 'Font Awesome 6 Free';
+#users .user-status-icon {
     color: #20b91e;
     margin-right: 5px;
     font-weight: 900;
 }
 
-#users > div.user-status-raisehand::before {
+#users .user-status-icon::before {
+    content: "\f111";
+}
+
+#users .user-status-raisehand .user-status-icon::before {
     content: "\f256";
 }
 
-#users > div::after {
+#users .user-microphone-icon {
     font-family: 'Font Awesome 6 Free';
     color: #808080;
     margin-left: 5px;
@@ -1042,7 +1054,7 @@ header .collapse:hover {
     float: right;
 }
 
-#users > div.user-status-microphone::after {
+#users .user-microphone-icon::before {
     content: "\f130";
 }
 
@@ -1186,22 +1198,64 @@ header .collapse:hover {
     color: #000;
 }
 
-:root{
-    --contextualMenuBg: #eee;
-    --contextualMenuShadow: 1px 1px 1px #444; */
-    --contextualMenuRadius: 0px; */
-    --contextualMenuText: black;
-
-    --contextualSubMenuBg: #eee;
-
-    --contextualHover: #ddd;
-
-    --contextualOverflowIcon: #999;
-    --contextualSeperator: #999;
+:root {
+    --skald-menu-bg: #eee;
+    --skald-menu-shadow: 1px 1px 1px #444;
+    --skald-menu-radius: 0;
+    --skald-menu-text: black;
+    --skald-menu-hover: #ddd;
+    --skald-menu-separator: #999;
 }
 
-.contextualMenu{
+.skald-action-menu {
+    position: absolute;
     z-index: 2999;
+    margin: 0;
+    padding: 8px 0;
+    min-width: 14em;
+    list-style: none;
+    background: var(--skald-menu-bg);
+    box-shadow: var(--skald-menu-shadow);
+    border-radius: var(--skald-menu-radius);
+    color: var(--skald-menu-text);
+    font-size: 13px;
+}
+
+.skald-action-menu li {
+    margin: 0;
+    padding: 0;
+}
+
+.skald-action-menu-item {
+    width: 100%;
+    border: 0;
+    padding: 5px 8px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+}
+
+.skald-action-menu-item:focus,
+.skald-action-menu-item:hover {
+    background: var(--skald-menu-hover);
+}
+
+.skald-action-menu-separator {
+    border-top: 1px solid var(--skald-menu-separator);
+    margin: 5px 0;
+    padding: 0;
+}
+
+.message-actions {
+    margin-left: 0.5em;
+    border: 0;
+    background: transparent;
+    color: #404064;
+    cursor: pointer;
+    font: inherit;
+    text-decoration: underline;
 }
 
 .file-progress {