Improve notifications page readability #2302
Conversation
NickColley
changed the title
NickColley
added this to the Meet Web Content Accessibility Guidelines 2.1 level AA milestone
|
Think legit CI failure will update tests soon |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Thanks a bunch, this largely LGTM, except for the circular var issue I mention above.
Sorry for taking so long to review, but I've had a bunch of stuff going on in my life. 😕 Also there are a deluge of PRs on Pinafore right now. But thanks again for your accessibility work!
|
Don't worry about the time to review, maybe I can help review and merge some stuff in future? |
|
You have committer access, so you should be able to, yeah. :) I will need to hand off this project at some time anyway if I'm being honest with myself: https://nolanlawson.com/2022/11/22/thoughts-on-mastodon/ Next step is probably to create a GitHub org for it. |
|
Okay when I tried to get the tests running locally I accidentally upgraded my machine to the latest Ubuntu version and bricked it but now I've got a fresh install (that's how they get ya) so will hopefully finish this soon. |
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>
NickColley
force-pushed
the
improve-notifications-page
branch
from
8b8a4b5 to
fe0bc0f
Compare
|
@nolanlawson this is ready to merge once you're happy with it! |
Sorry to hear about that. This is actually exactly why I finally learned to use Podman – it was too hard to get certain versions of Mastodon to work with my Ubuntu version. FWIW, this is what I use: podman run -dt -p 4002:4002 -p 3000:3000 -p 4000:4000 -p 10000:10000 -p 3035:3035 -v ~/workspace/pinafore:/mnt ubuntu:18.04(Ubuntu 20.04 should also work.) |
| --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); |
There was a problem hiding this comment.
--very-deemphasized-link-color is redundant now that it's the same as --very-deemphasized-text-color. And it's only used in one place:
pinafore/src/routes/_components/status/StatusContent.html
Lines 66 to 68 in 774aa7a
The impact of this is that links only have a color that differentiates them from the surrounding text if they're in a mention notification rather than a fav/boost notification:
Technically this does not meet WCAG link requirements since the only thing distinguishing the link is that they're underlined when you hover over them.
To be fair, though, the existing colors have the exact same problem:
Maybe it would be best to just use the same (blue) color as links in mention notifications? Or a slightly different shade of blue? We don't need to solve this in this PR, though, since it's a pre-existing issue.
There was a problem hiding this comment.
One approach might be to just turn links into plain text for these types of notifications and make it one big clickable area, but agreed existing issue that could be improved.
|
LGTM, I had a couple nitpicks, but if you want to resolve them in this PR please go ahead, or else feel free to click the merge button and we can do it in another PR. Thanks! |
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>
Use lowest possible contrast gray that meets WCAG requirements for very deemphasised text.
Removes the status toolbar when its a notification for your own toot
Makes the notification page more readable without compromising access as much.
Closes #2249
Screenshots
Light
Light