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>
This commit is contained in:
Nick Colley 2022-12-17 18:12:13 +00:00 committed by GitHub
parent d71430f86d
commit 3edfed971f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 28 additions and 13 deletions

View File

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

View File

@ -122,7 +122,7 @@
} }
.status-in-notification svg { .status-in-notification svg {
opacity: 0.5; stroke: var(--very-deemphasized-text-color);
} }
.status-in-own-thread .option-text { .status-in-own-thread .option-text {

View File

@ -81,8 +81,8 @@
--deemphasized-text-color: #{$deemphasized-color}; --deemphasized-text-color: #{$deemphasized-color};
--focus-outline: #{$focus-outline}; --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%)}; --status-direct-background: #{darken($body-bg-color, 5%)};
--main-theme-color: #{$main-theme-color}; --main-theme-color: #{$main-theme-color};

View File

@ -1,5 +1,5 @@
:root { :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: #{$deemphasized-color};
--action-button-deemphasized-fill-color-hover: #{lighten($deemphasized-color, 22%)}; --action-button-deemphasized-fill-color-hover: #{lighten($deemphasized-color, 22%)};
@ -12,8 +12,8 @@
--deemphasized-text-color: #{$deemphasized-color}; --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%)}; --status-direct-background: #{darken($body-bg-color, 5%)};
--main-theme-color: #{$main-theme-color}; --main-theme-color: #{$main-theme-color};

View File

@ -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') .eql('Cannot be boosted because this is a direct message')
.expect($(`${getNthStatusSelector(5)} .status-toolbar button:nth-child(2)`).hasAttribute('disabled')).ok() .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()
})

View File

@ -1,10 +1,10 @@
import { import {
closeDialogButton, closeDialogButton,
composeModalInput, composeModalInput,
getNthFavoritedLabel,
getNthStatus, getNthStatus,
getUrl, modalDialog, notificationsNavButton, getUrl, modalDialog, notificationsNavButton,
isNthStatusActive, goBack isNthStatusActive, goBack,
getNthFavoritedLabel
} from '../utils' } from '../utils'
import { loginAsFoobar } from '../roles' import { loginAsFoobar } from '../roles'
@ -12,16 +12,22 @@ fixture`026-shortcuts-notification.js`
.page`http://localhost:4002` .page`http://localhost:4002`
test('Shortcut f toggles favorite status in notification', async t => { test('Shortcut f toggles favorite status in notification', async t => {
const idx = 0 const idx = 6 // "hello foobar"
await loginAsFoobar(t) await loginAsFoobar(t)
await t await t
.expect(getUrl()).eql('http://localhost:4002/') .expect(getUrl()).eql('http://localhost:4002/')
.click(notificationsNavButton) .click(notificationsNavButton)
.expect(getUrl()).contains('/notifications') .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') .expect(getNthFavoritedLabel(1 + idx)).eql('Favorite')
.pressKey('j '.repeat(idx + 1))
.expect(isNthStatusActive(1 + idx)()).ok()
.pressKey('f') .pressKey('f')
.expect(getNthFavoritedLabel(1 + idx)).eql('Unfavorite') .expect(getNthFavoritedLabel(1 + idx)).eql('Unfavorite')
.pressKey('f') .pressKey('f')