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

@@ -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; /* focus is on the parent instead */
-    outline: none;
   }
   @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)
       }
     }
   }

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; /* focus is on the parent instead */
-    outline: none;
   }
 
   .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: {

src/scss/global.scss

@@ -173,7 +173,7 @@ ul, li, p {
   opacity: 0;
 }
 
-*:focus {
+*:focus, .focus {
   outline: 2px solid var(--focus-outline);
 }
 

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)};

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)};