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

@@ -39,7 +39,9 @@
   {#if isStatusInOwnThread}
     <StatusDetails {...params} {...timestampParams} />
   {/if}
+  {#if !isStatusInNotification}
     <StatusToolbar {...params} {replyShown} on:recalculateHeight on:focusArticle="focusArticle()" />
+  {/if}
   {#if replyShown}
     <StatusComposeBox {...params} on:recalculateHeight />
   {/if}

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 {

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: #757575;
-  --very-deemphasized-text-color: #{rgba(#666, 0.6)};
+  --very-deemphasized-link-color: var(--very-deemphasized-text-color);
 
   --status-direct-background: #{darken($body-bg-color, 5%)};
   --main-theme-color: #{$main-theme-color};

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, 44%)};
-  --very-deemphasized-text-color: #{lighten($main-bg-color, 32%)};
+  --very-deemphasized-link-color: var(--very-deemphasized-text-color);
 
   --status-direct-background: #{darken($body-bg-color, 5%)};
   --main-theme-color: #{$main-theme-color};

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()
+})

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')