fix: use day-only time format for wellness setting (#2021)

* fix: use day-only time format for wellness setting

* fix: tweak intl strings

[skip ci]

* test: add test

src/intl/en-US.js

@@ -394,7 +394,7 @@ export default {
   hideUnread: 'Hide unread notifications count (i.e. the red dot)',
   // The quality that makes something seem important or interesting because it seems to be happening now
   immediacy: 'Immediacy',
-  showAbsoluteTimestamps: 'Show absolute timestamps instead of relative timestamps',
+  showAbsoluteTimestamps: 'Show absolute timestamps (e.g. "March 3rd") instead of relative timestamps (e.g. "5 minutes ago")',
   ui: 'UI',
   grayscaleMode: 'Grayscale mode',
   wellnessFooter: `These settings are partly based on guidelines from the

src/routes/_a11y/getAccessibleLabelForStatus.js

@@ -35,7 +35,7 @@ function cleanupText (text) {
 }
 
 export function getAccessibleLabelForStatus (originalAccount, account, plainTextContent,
-  timeagoFormattedDate, spoilerText, showContent,
+  shortInlineFormattedDate, spoilerText, showContent,
   reblog, notification, visibility, omitEmojiInDisplayNames,
   disableLongAriaLabels, showMedia, showPoll) {
   const originalAccountDisplayName = getAccountAccessibleName(originalAccount, omitEmojiInDisplayNames)
@@ -58,7 +58,7 @@ export function getAccessibleLabelForStatus (originalAccount, account, plainText
     contentTextToShow,
     mediaTextToShow,
     pollTextToShow,
-    timeagoFormattedDate,
+    shortInlineFormattedDate,
     `@${originalAccount.acct}`,
     privacyText,
     getReblogText(reblog, account, omitEmojiInDisplayNames)

src/routes/_components/status/Status.html

@@ -127,7 +127,7 @@
   import { formatTimeagoDate } from '../../_intl/formatTimeagoDate'
   import { measureText } from '../../_utils/measureText'
   import { LONG_POST_LENGTH, LONG_POST_TEXT } from '../../_static/statuses'
-  import { absoluteDateFormatter } from '../../_utils/formatters'
+  import { absoluteDateFormatter, dayOnlyAbsoluteDateFormatter } from '../../_utils/formatters'
   import { composeNewStatusMentioning } from '../../_actions/mention'
   import { createStatusOrNotificationUuid } from '../../_utils/createStatusOrNotificationUuid'
   import { addEmojiTooltips } from '../../_utils/addEmojiTooltips'
@@ -277,15 +277,19 @@
       createdAtDate: ({ originalStatus }) => originalStatus.created_at,
       createdAtDateTS: ({ createdAtDate }) => new Date(createdAtDate).getTime(),
       absoluteFormattedDate: ({ createdAtDateTS }) => absoluteDateFormatter.format(createdAtDateTS),
-      timeagoFormattedDate: ({ createdAtDateTS, $now }) => formatTimeagoDate(createdAtDateTS, $now),
+      shortInlineFormattedDate: ({ createdAtDateTS, $now, $disableRelativeTimestamps }) => (
+        $disableRelativeTimestamps
+          ? dayOnlyAbsoluteDateFormatter.format(createdAtDateTS)
+          : formatTimeagoDate(createdAtDateTS, $now)
+      ),
       reblog: ({ status }) => status.reblog,
       ariaLabel: ({
-        originalAccount, account, plainTextContent, timeagoFormattedDate, spoilerText,
+        originalAccount, account, plainTextContent, shortInlineFormattedDate, spoilerText,
         showContent, reblog, notification, visibility, $omitEmojiInDisplayNames, $disableLongAriaLabels,
         showMedia, showPoll
       }) => (
         getAccessibleLabelForStatus(originalAccount, account, plainTextContent,
-          timeagoFormattedDate, spoilerText, showContent,
+          shortInlineFormattedDate, spoilerText, showContent,
           reblog, notification, visibility, $omitEmojiInDisplayNames, $disableLongAriaLabels,
           showMedia, showPoll
         )
@@ -309,10 +313,10 @@
       showContent: ({ spoilerText, spoilerShown }) => !spoilerText || spoilerShown,
       // These timestamp params may change every 10 seconds due to now() polling, so keep them
       // separate from the generic `params` list to avoid costly recomputes.
-      timestampParams: ({ createdAtDate, createdAtDateTS, timeagoFormattedDate, absoluteFormattedDate }) => ({
+      timestampParams: ({ createdAtDate, createdAtDateTS, shortInlineFormattedDate, absoluteFormattedDate }) => ({
         createdAtDate,
         createdAtDateTS,
-        timeagoFormattedDate,
+        shortInlineFormattedDate,
         absoluteFormattedDate
       }),
       // This params list deliberately does *not* include `spoilersShown` or `replyShown`, because these

src/routes/_components/status/StatusRelativeDate.html

@@ -4,9 +4,9 @@
    rel="prefetch"
    {tabindex}
 >
-  <time datetime={createdAtDate} title={formattedDateTitle}
+  <time datetime={createdAtDate} title={absoluteFormattedDate}
         aria-label={createdAtLabel}>
-    {formattedDate}
+    {shortInlineFormattedDate}
   </time>
 </a>
 <style>
@@ -41,23 +41,9 @@
         // just a duplicate link in the focus order.
         $disableTapOnStatus ? '0' : '-1'
       ),
-      formattedDateTitle: ({ $disableRelativeTimestamps, absoluteFormattedDate }) => {
-        if ($disableRelativeTimestamps) {
-          return ''
-        } else {
-          return absoluteFormattedDate
-        }
-      },
       createdAtLabel: ({ formattedDate }) => (
         formatIntl('intl.clickToShowThread', { time: formattedDate })
-      ),
-      formattedDate: ({ $disableRelativeTimestamps, timeagoFormattedDate, absoluteFormattedDate }) => {
-        if ($disableRelativeTimestamps) {
-          return absoluteFormattedDate
-        } else {
-          return timeagoFormattedDate
-        }
-      }
+      )
     }
   }
 </script>

src/routes/_utils/formatters.js

@@ -15,3 +15,9 @@ export const shortAbsoluteDateFormatter = new Intl.DateTimeFormat(LOCALE, {
   hour: '2-digit',
   minute: '2-digit'
 })
+
+export const dayOnlyAbsoluteDateFormatter = new Intl.DateTimeFormat(LOCALE, {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric'
+})

tests/spec/041-wellness.js

@@ -0,0 +1,28 @@
+import {
+  settingsNavButton,
+  homeNavButton,
+  getFirstVisibleStatus,
+  getUrl,
+  disableRelativeTimestamps, getNthStatus, getNthStatusRelativeDate
+} from '../utils'
+import { loginAsFoobar } from '../roles'
+import { Selector as $ } from 'testcafe'
+
+fixture`041-wellness.js`
+  .page`http://localhost:4002`
+
+test('Can disable relative time stamps', async t => {
+  await loginAsFoobar(t)
+  await t
+    .expect(getFirstVisibleStatus().exists).ok()
+    .expect(getNthStatusRelativeDate(1).innerText).match(/\bago\b/i)
+    .click(settingsNavButton)
+    .click($('a').withText('Wellness'))
+    .click(disableRelativeTimestamps)
+    .expect(disableRelativeTimestamps.checked).ok()
+    .click(homeNavButton)
+    .expect(getUrl()).eql('http://localhost:4002/')
+    .expect(getFirstVisibleStatus().exists).ok()
+    .expect(getNthStatusRelativeDate(1).innerText).notMatch(/\bago\b/i)
+    .expect(getNthStatus(1).getAttribute('aria-label')).notMatch(/\bago\b/i)
+})

tests/utils.js

@@ -55,6 +55,7 @@ export const neverMarkMediaSensitiveInput = $('#choice-never-mark-media-sensitiv
 export const removeEmojiFromDisplayNamesInput = $('#choice-omit-emoji-in-display-names')
 export const disableInfiniteScroll = $('#choice-disable-infinite-scroll')
 export const disableUnreadNotifications = $('#choice-disable-unread-notification-counts')
+export const disableRelativeTimestamps = $('#choice-disable-relative-timestamps')
 export const leftRightChangesFocus = $('#choice-left-right-focus')
 export const disableHotkeys = $('#choice-disable-hotkeys')
 export const dialogOptionsOption = $('.modal-dialog button')