From e16c31278883468a3bad6758f71aa76f4d687115 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 22 Feb 2019 20:35:04 -0800
Subject: [PATCH] fix: use focus ring rather than background for
 status/notifications (#1030)

I don't like clicking on a status, clicking back, and suddenly it has a
different background. The focus ring is less distracting. Unfortunately
it doesn't look right on the article element itself, so we have to apply
the style to its parent, but that's not too hard.
---
 src/routes/_components/status/Notification.html | 13 +++++++++++--
 src/routes/_components/status/Status.html       | 16 +++++++++++++---
 src/scss/global.scss                            |  2 +-
 src/scss/themes/_base.scss                      |  1 -
 src/scss/themes/_dark.scss                      |  1 -
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/routes/_components/status/Notification.html b/src/routes/_components/status/Notification.html
index b9f8be9..1a24058 100644
--- a/src/routes/_components/status/Notification.html
+++ b/src/routes/_components/status/Notification.html
@@ -10,6 +10,9 @@
            aria-label={ariaLabel}
            focus-key={focusKey}
            shortcut-key={shortcutScope}
+           on:focus="onFocus()"
+           on:blur="onBlur()"
+           ref:article
   >
     <StatusHeader {notification} {notificationId} {status} {statusId} {timelineType}
                   {account} {accountId} {uuid} isStatusInNotification="true" />
@@ -27,8 +30,7 @@
     border-bottom: 1px solid var(--main-border);
   }
   .notification-article:focus {
-    background-color: var(--status-active-background);
-    outline: none;
+    outline: none; /* focus is on the parent instead */
   }
   @media (max-width: 767px) {
     .notification-article {
@@ -84,6 +86,13 @@
       async mentionAuthor () {
         let { account } = this.get()
         await composeNewStatusMentioning(account)
+      },
+      // apply focus styles to parent rather than article because it shows up better
+      onFocus () {
+        this.refs.article.parentElement.classList.toggle('focus', true)
+      },
+      onBlur () {
+        this.refs.article.parentElement.classList.toggle('focus', false)
       }
     }
   }
diff --git a/src/routes/_components/status/Status.html b/src/routes/_components/status/Status.html
index dbf9057..7a44f7a 100644
--- a/src/routes/_components/status/Status.html
+++ b/src/routes/_components/status/Status.html
@@ -6,7 +6,11 @@
          aria-posinset={index}
          aria-setsize={length}
          aria-label={ariaLabel}
-         on:recalculateHeight>
+         on:recalculateHeight
+         on:focus="onFocus()"
+         on:blur="onBlur()"
+         ref:article
+>
   {#if showHeader}
     <StatusHeader {...params} />
   {/if}
@@ -76,8 +80,7 @@
   }
 
   .status-article:focus {
-    background-color: var(--status-active-background);
-    outline: none;
+    outline: none; /* focus is on the parent instead */
   }
 
   .status-article.status-in-own-thread {
@@ -213,6 +216,13 @@
       async mentionAuthor () {
         let { accountForShortcut } = this.get()
         await composeNewStatusMentioning(accountForShortcut)
+      },
+      // apply focus styles to parent rather than article because it shows up better
+      onFocus () {
+        this.refs.article.parentElement.classList.toggle('focus', true)
+      },
+      onBlur () {
+        this.refs.article.parentElement.classList.toggle('focus', false)
       }
     },
     computed: {
diff --git a/src/scss/global.scss b/src/scss/global.scss
index cec825a..2121001 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -173,7 +173,7 @@ ul, li, p {
   opacity: 0;
 }
 
-*:focus {
+*:focus, .focus {
   outline: 2px solid var(--focus-outline);
 }
 
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index c56dee6..178fc2a 100644
--- a/src/scss/themes/_base.scss
+++ b/src/scss/themes/_base.scss
@@ -82,7 +82,6 @@
   --very-deemphasized-text-color: #{rgba(#666, 0.6)};
 
   --status-direct-background: #{darken($body-bg-color, 5%)};
-  --status-active-background: #{lighten($body-bg-color, 2%)};
   --main-theme-color: #{$main-theme-color};
   --warning-color: #{#e01f19};
   --alt-input-bg: #{rgba($main-bg-color, 0.7)};
diff --git a/src/scss/themes/_dark.scss b/src/scss/themes/_dark.scss
index de80da3..8612e05 100644
--- a/src/scss/themes/_dark.scss
+++ b/src/scss/themes/_dark.scss
@@ -16,7 +16,6 @@
   --very-deemphasized-text-color: #{lighten($main-bg-color, 32%)};
 
   --status-direct-background: #{darken($body-bg-color, 5%)};
-  --status-active-background: #{lighten($body-bg-color, 10%)};
   --main-theme-color: #{$main-theme-color};
   --warning-color: #{#c7423d};
   --alt-input-bg: #{rgba($main-bg-color, 0.7)};