From 3edfed971fa470b8d1fd1748282e799ed78e9296 Mon Sep 17 00:00:00 2001
From: Nick Colley <2445413+NickColley@users.noreply.github.com>
Date: Sat, 17 Dec 2022 18:12:13 +0000
Subject: [PATCH] fix: notification page contrast (#2302)

Use lowest possible contrast gray that meets WCAG requirements for
very deemphasised text.

Makes the notification page more readable without compromising access.

Co-authored-by: Nolan Lawson <nolan@nolanlawson.com>

Co-authored-by: Nolan Lawson <nolan@nolanlawson.com>
---
 src/routes/_components/status/Status.html     |  4 +++-
 src/routes/_components/status/StatusPoll.html |  2 +-
 src/scss/themes/_base.scss                    |  4 ++--
 src/scss/themes/_dark.scss                    |  6 +++---
 tests/spec/005-status-types.js                |  7 +++++++
 tests/spec/026-shortcuts-notification.js      | 18 ++++++++++++------
 6 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/routes/_components/status/Status.html b/src/routes/_components/status/Status.html
index a919aeae..3d9e28d7 100644
--- a/src/routes/_components/status/Status.html
+++ b/src/routes/_components/status/Status.html
@@ -39,7 +39,9 @@
   {#if isStatusInOwnThread}
     <StatusDetails {...params} {...timestampParams} />
   {/if}
-  <StatusToolbar {...params} {replyShown} on:recalculateHeight on:focusArticle="focusArticle()" />
+  {#if !isStatusInNotification}
+    <StatusToolbar {...params} {replyShown} on:recalculateHeight on:focusArticle="focusArticle()" />
+  {/if}
   {#if replyShown}
     <StatusComposeBox {...params} on:recalculateHeight />
   {/if}
diff --git a/src/routes/_components/status/StatusPoll.html b/src/routes/_components/status/StatusPoll.html
index 0f8388b5..a9116ba9 100644
--- a/src/routes/_components/status/StatusPoll.html
+++ b/src/routes/_components/status/StatusPoll.html
@@ -122,7 +122,7 @@
   }
 
   .status-in-notification svg {
-    opacity: 0.5;
+    stroke: var(--very-deemphasized-text-color);
   }
 
   .status-in-own-thread .option-text {
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index a3a8c603..da971375 100644
--- a/src/scss/themes/_base.scss
+++ b/src/scss/themes/_base.scss
@@ -81,8 +81,8 @@
   --deemphasized-text-color: #{$deemphasized-color};
   --focus-outline: #{$focus-outline};
 
-  --very-deemphasized-link-color: #{rgba($anchor-color, 0.6)};
-  --very-deemphasized-text-color: #{rgba(#666, 0.6)};
+  --very-deemphasized-text-color: #757575;
+  --very-deemphasized-link-color: var(--very-deemphasized-text-color);
 
   --status-direct-background: #{darken($body-bg-color, 5%)};
   --main-theme-color: #{$main-theme-color};
diff --git a/src/scss/themes/_dark.scss b/src/scss/themes/_dark.scss
index 497d4775..ad606126 100644
--- a/src/scss/themes/_dark.scss
+++ b/src/scss/themes/_dark.scss
@@ -1,5 +1,5 @@
 :root {
-  $deemphasized-color: lighten($main-bg-color, 45%);
+  $deemphasized-color: lighten($main-bg-color, 54%);
 
   --action-button-deemphasized-fill-color: #{$deemphasized-color};
   --action-button-deemphasized-fill-color-hover: #{lighten($deemphasized-color, 22%)};
@@ -12,8 +12,8 @@
 
   --deemphasized-text-color: #{$deemphasized-color};
 
-  --very-deemphasized-link-color: #{rgba($anchor-color, 0.8)};
-  --very-deemphasized-text-color: #{lighten($main-bg-color, 32%)};
+  --very-deemphasized-text-color: #{lighten($main-bg-color, 44%)};
+  --very-deemphasized-link-color: var(--very-deemphasized-text-color);
 
   --status-direct-background: #{darken($body-bg-color, 5%)};
   --main-theme-color: #{$main-theme-color};
diff --git a/tests/spec/005-status-types.js b/tests/spec/005-status-types.js
index b79535e7..6d87c627 100644
--- a/tests/spec/005-status-types.js
+++ b/tests/spec/005-status-types.js
@@ -35,3 +35,10 @@ test('shows direct vs followers-only vs regular in notifications', async t => {
     .eql('Cannot be boosted because this is a direct message')
     .expect($(`${getNthStatusSelector(5)} .status-toolbar button:nth-child(2)`).hasAttribute('disabled')).ok()
 })
+
+test('hides status toolbar on notification page', async t => {
+  await loginAsFoobar(t)
+  await t
+    .navigateTo('/notifications')
+    .expect($(`${getNthStatusSelector(1)} .status-toolbar`).exists).notOk()
+})
diff --git a/tests/spec/026-shortcuts-notification.js b/tests/spec/026-shortcuts-notification.js
index 0f74e184..0d3115ca 100644
--- a/tests/spec/026-shortcuts-notification.js
+++ b/tests/spec/026-shortcuts-notification.js
@@ -1,10 +1,10 @@
 import {
   closeDialogButton,
   composeModalInput,
-  getNthFavoritedLabel,
   getNthStatus,
   getUrl, modalDialog, notificationsNavButton,
-  isNthStatusActive, goBack
+  isNthStatusActive, goBack,
+  getNthFavoritedLabel
 } from '../utils'
 import { loginAsFoobar } from '../roles'
 
@@ -12,16 +12,22 @@ fixture`026-shortcuts-notification.js`
   .page`http://localhost:4002`
 
 test('Shortcut f toggles favorite status in notification', async t => {
-  const idx = 0
+  const idx = 6 // "hello foobar"
   await loginAsFoobar(t)
   await t
     .expect(getUrl()).eql('http://localhost:4002/')
     .click(notificationsNavButton)
     .expect(getUrl()).contains('/notifications')
-    .expect(getNthStatus(1 + idx).exists).ok({ timeout: 30000 })
+    .expect(getNthStatus(1).exists).ok({ timeout: 30000 })
+
+  for (let i = 0; i < idx + 1; i++) {
+    await t.pressKey('j')
+      .expect(getNthStatus(1 + i).exists).ok()
+      .expect(isNthStatusActive(1 + i)()).ok()
+  }
+
+  await t
     .expect(getNthFavoritedLabel(1 + idx)).eql('Favorite')
-    .pressKey('j '.repeat(idx + 1))
-    .expect(isNthStatusActive(1 + idx)()).ok()
     .pressKey('f')
     .expect(getNthFavoritedLabel(1 + idx)).eql('Unfavorite')
     .pressKey('f')