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 b9f8be91..1a240587 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 dbf90575..7a44f7a9 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 cec825a5..21210014 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 c56dee63..178fc2ae 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 de80da3c..8612e058 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)};