From 1f0d67fcc422a7cf835f67695e2dabbb9ef10fe7 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sat, 25 Apr 2020 19:03:39 -0700 Subject: [PATCH] feat: aria-labels and buttons contain more media info (#1743) * feat: aria-labels and buttons contain more media info fixes #1733 * fix lint --- CONTRIBUTING.md | 6 +++--- .../_a11y/getAccessibleLabelForStatus.js | 6 +++++- src/routes/_components/status/Media.html | 16 +++++++++----- src/routes/_components/status/Status.html | 7 +++++-- tests/spec/008-status-media.js | 21 +++++++++++++++---- tests/spec/120-status-aria-label.js | 14 +++++++++++-- 6 files changed, 53 insertions(+), 17 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a892a9e9..c100336a 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -14,7 +14,7 @@ To run a dev server with hot reloading: Now it's running at `localhost:4002`. -**Linux users:** for file changes to work, +**Linux users:** for file changes to work, you'll probably want to run `export CHOKIDAR_USEPOLLING=1` because of [this issue](https://github.com/paulmillr/chokidar/issues/237). @@ -39,7 +39,7 @@ running on `localhost:3000`. The integration tests require running Mastodon itself, meaning the [Mastodon development guide](https://docs.joinmastodon.org/development/overview/) -is relevant here. In particular, you'll need a recent +is relevant here. In particular, you'll need a recent version of Ruby, Redis, and Postgres running. For a full list of deps, see `bin/setup-mastodon-in-travis.sh`. Run integration tests, using headless Chrome by default: @@ -96,7 +96,7 @@ There are two parts to the Mastodon data used for testing: 1. A Postgres dump and a tgz containing the media files, located in `fixtures` 2. A script that populates the Mastodon backend with test data (`restore-mastodon-data.js`). -The reason we don't use a Postgres dump for everything +The reason we don't use a Postgres dump for everything is that Mastodon will ignore changes made after a certain period of time, and we don't want our tests to randomly start breaking one day. Running the script ensures that statuses, favorites, boosts, etc. are all "fresh". diff --git a/src/routes/_a11y/getAccessibleLabelForStatus.js b/src/routes/_a11y/getAccessibleLabelForStatus.js index ae8abeb3..05f3ae8b 100644 --- a/src/routes/_a11y/getAccessibleLabelForStatus.js +++ b/src/routes/_a11y/getAccessibleLabelForStatus.js @@ -36,11 +36,13 @@ function cleanupText (text) { export function getAccessibleLabelForStatus (originalAccount, account, plainTextContent, timeagoFormattedDate, spoilerText, showContent, reblog, notification, visibility, omitEmojiInDisplayNames, - disableLongAriaLabels) { + disableLongAriaLabels, showMedia, showPoll) { const originalAccountDisplayName = getAccountAccessibleName(originalAccount, omitEmojiInDisplayNames) const contentTextToShow = (showContent || !spoilerText) ? cleanupText(plainTextContent) : `Content warning: ${cleanupText(spoilerText)}` + const mediaTextToShow = showMedia && 'has media' + const pollTextToShow = showPoll && 'has poll' const privacyText = getPrivacyText(visibility) if (disableLongAriaLabels) { @@ -53,6 +55,8 @@ export function getAccessibleLabelForStatus (originalAccount, account, plainText getNotificationText(notification, omitEmojiInDisplayNames), originalAccountDisplayName, contentTextToShow, + mediaTextToShow, + pollTextToShow, timeagoFormattedDate, `@${originalAccount.acct}`, privacyText, diff --git a/src/routes/_components/status/Media.html b/src/routes/_components/status/Media.html index af522849..8d8aa013 100644 --- a/src/routes/_components/status/Media.html +++ b/src/routes/_components/status/Media.html @@ -2,7 +2,7 @@