diff --git a/src/routes/_a11y/getAccessibleLabelForStatus.js b/src/routes/_a11y/getAccessibleLabelForStatus.js index 280faa5..c792f14 100644 --- a/src/routes/_a11y/getAccessibleLabelForStatus.js +++ b/src/routes/_a11y/getAccessibleLabelForStatus.js @@ -1,6 +1,5 @@ import { getAccountAccessibleName } from './getAccountAccessibleName' import { POST_PRIVACY_OPTIONS } from '../_static/statuses' -import { htmlToPlainText } from '../_utils/htmlToPlainText' function getNotificationText (notification, omitEmojiInDisplayNames) { if (!notification) { @@ -34,13 +33,13 @@ function cleanupText (text) { return text.replace(/\s+/g, ' ').trim() } -export function getAccessibleLabelForStatus (originalAccount, account, content, +export function getAccessibleLabelForStatus (originalAccount, account, plainTextContent, timeagoFormattedDate, spoilerText, showContent, reblog, notification, visibility, omitEmojiInDisplayNames, disableLongAriaLabels) { let originalAccountDisplayName = getAccountAccessibleName(originalAccount, omitEmojiInDisplayNames) let contentTextToShow = (showContent || !spoilerText) - ? cleanupText(htmlToPlainText(content)) + ? cleanupText(plainTextContent) : `Content warning: ${cleanupText(spoilerText)}` let privacyText = getPrivacyText(visibility) diff --git a/src/routes/_components/status/Status.html b/src/routes/_components/status/Status.html index f4a6769..c3fe662 100644 --- a/src/routes/_components/status/Status.html +++ b/src/routes/_components/status/Status.html @@ -123,6 +123,9 @@ import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName' import { getAccessibleLabelForStatus } from '../../_a11y/getAccessibleLabelForStatus' import { formatTimeagoDate } from '../../_intl/formatTimeagoDate' + import { htmlToPlainText } from '../../_utils/htmlToPlainText' + import { measureText } from '../../_utils/measureText' + import { LONG_POST_LENGTH, LONG_POST_TEXT } from '../../_static/statuses' const INPUT_TAGS = new Set(['a', 'button', 'input', 'textarea']) const isUserInputElement = node => INPUT_TAGS.has(node.localName) @@ -207,7 +210,12 @@ originalAccount: ({ originalStatus }) => originalStatus.account, originalAccountId: ({ originalAccount }) => originalAccount.id, visibility: ({ originalStatus }) => originalStatus.visibility, - spoilerText: ({ originalStatus }) => originalStatus.spoiler_text, + plainTextContent: ({ content }) => htmlToPlainText(content), + plainTextContentLength: ({ plainTextContent }) => measureText(plainTextContent), + plainTextContentOverLength: ({ plainTextContentLength }) => plainTextContentLength > LONG_POST_LENGTH, + spoilerText: ({ originalStatus, plainTextContentOverLength }) => ( + originalStatus.spoiler_text || (plainTextContentOverLength && LONG_POST_TEXT) + ), inReplyToId: ({ originalStatus }) => originalStatus.in_reply_to_id, uuid: ({ $currentInstance, timelineType, timelineValue, notificationId, statusId }) => ( `${$currentInstance}/${timelineType}/${timelineValue}/${notificationId || ''}/${statusId}` @@ -235,9 +243,9 @@ createdAtDate: ({ originalStatus }) => originalStatus.created_at, timeagoFormattedDate: ({ createdAtDate }) => formatTimeagoDate(createdAtDate), reblog: ({ status }) => status.reblog, - ariaLabel: ({ originalAccount, account, content, timeagoFormattedDate, spoilerText, + ariaLabel: ({ originalAccount, account, plainTextContent, timeagoFormattedDate, spoilerText, showContent, reblog, notification, visibility, $omitEmojiInDisplayNames, $disableLongAriaLabels }) => ( - getAccessibleLabelForStatus(originalAccount, account, content, + getAccessibleLabelForStatus(originalAccount, account, plainTextContent, timeagoFormattedDate, spoilerText, showContent, reblog, notification, visibility, $omitEmojiInDisplayNames, $disableLongAriaLabels) ), diff --git a/src/routes/_components/status/StatusSpoiler.html b/src/routes/_components/status/StatusSpoiler.html index b0faf67..81fb526 100644 --- a/src/routes/_components/status/StatusSpoiler.html +++ b/src/routes/_components/status/StatusSpoiler.html @@ -59,7 +59,6 @@ Shortcut }, computed: { - spoilerText: ({ originalStatus }) => originalStatus.spoiler_text, emojis: ({ originalStatus }) => originalStatus.emojis, massagedSpoilerText: ({ spoilerText, emojis, $autoplayGifs }) => { spoilerText = escapeHtml(spoilerText) diff --git a/src/routes/_static/statuses.js b/src/routes/_static/statuses.js index 6202279..b0ad40d 100644 --- a/src/routes/_static/statuses.js +++ b/src/routes/_static/statuses.js @@ -20,3 +20,6 @@ export const POST_PRIVACY_OPTIONS = [ icon: '#fa-envelope' } ] + +export const LONG_POST_LENGTH = 1024 +export const LONG_POST_TEXT = 'Long post'