From 361bbec2937a81ab4b46a37ffd35dff2fa500b46 Mon Sep 17 00:00:00 2001
From: James Hillyerd <james@hillyerd.com>
Date: Tue, 22 Sep 2020 14:11:06 -0700
Subject: [PATCH] ui: Keyboard accessibility focus highlights (#180)

* Focus indication for mailbox message list
* Add focus for monitor message list
---
 ui/src/mailbox.css | 15 +++++++++++++++
 ui/src/main.css    |  8 ++++++++
 2 files changed, 23 insertions(+)

diff --git a/ui/src/mailbox.css b/ui/src/mailbox.css
index c0207b4..af26a8f 100644
--- a/ui/src/mailbox.css
+++ b/ui/src/mailbox.css
@@ -98,9 +98,14 @@
   border-width: 1px;
   border-style: none solid solid solid;
   cursor: pointer;
+  outline: none;
   padding: 5px 8px;
 }
 
+.message-list-entry:focus {
+  background-color: var(--focused-bg-color) !important;
+}
+
 .message-list-entry.selected {
   background-color: var(--selected-color);
 }
@@ -109,6 +114,10 @@
   border-style: solid;
 }
 
+.message-list-entry:focus .subject {
+  color: var(--focused-color);
+}
+
 .message-list-entry .subject {
   color: var(--high-color);
 }
@@ -117,6 +126,12 @@
   font-weight: bold;
 }
 
+.message-list-entry:focus .from,
+.message-list-entry:focus .date {
+  color: var(--focused-color);
+  opacity: 0.8;
+}
+
 .message-list-entry .from,
 .message-list-entry .date {
   color: var(--low-color);
diff --git a/ui/src/main.css b/ui/src/main.css
index 57e8bd3..46cd7f0 100644
--- a/ui/src/main.css
+++ b/ui/src/main.css
@@ -9,6 +9,8 @@
   --border-color: #ddd;
   --placeholder-color: #9f9f9f;
   --selected-color: #eee;
+  --focused-color: #fff;
+  --focused-bg-color: #337ab7;
 }
 
 html, body, div, span, applet, object, iframe,
@@ -352,3 +354,9 @@ h3 {
   background-color: var(--selected-color);
   cursor: pointer;
 }
+
+.monitor tr:focus {
+  color: var(--focused-color);
+  background-color: var(--focused-bg-color);
+  outline: none;
+}