From 1b9b04be76ac4e850ef38b9b41dfdaca2b72d282 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 12 Nov 2022 08:53:44 -0800
Subject: [PATCH] fix(a11y): add aria-live for keyboard shortcuts

---
 src/build/template.html                          |  3 +++
 src/intl/en-US.js                                |  3 +++
 src/routes/_components/status/StatusToolbar.html | 15 +++++++++++----
 src/routes/_utils/announceAriaLivePolite.js      |  5 +++++
 4 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 src/routes/_utils/announceAriaLivePolite.js

diff --git a/src/build/template.html b/src/build/template.html
index 7a068790..7fc81fdd 100644
--- a/src/build/template.html
+++ b/src/build/template.html
@@ -104,6 +104,9 @@
   <!-- LoadingMask.html gets rendered here -->
   <div id="loading-mask" aria-hidden="true"></div>
 
+  <!-- announceAriaLivePolite.js gets rendered here -->
+  <div id="theAriaLive" class="sr-only" aria-live="polite"></div>
+
   <!-- inline SVG -->
 
   <!-- Sapper creates a <script> tag containing `templates/client.js`
diff --git a/src/intl/en-US.js b/src/intl/en-US.js
index e0cb576d..7baed57b 100644
--- a/src/intl/en-US.js
+++ b/src/intl/en-US.js
@@ -513,6 +513,9 @@ export default {
   pollYouCreatedEnded: 'A poll you created has ended',
   pollYouVotedEnded: 'A poll you voted on has ended',
   reblogged: 'boosted',
+  favorited: 'favorited',
+  unreblogged: 'unboosted',
+  unfavorited: 'unfavorited',
   showSensitiveMedia: 'Show sensitive media',
   hideSensitiveMedia: 'Hide sensitive media',
   clickToShowSensitive: 'Sensitive content. Click to show.',
diff --git a/src/routes/_components/status/StatusToolbar.html b/src/routes/_components/status/StatusToolbar.html
index 48d20141..5c08895c 100644
--- a/src/routes/_components/status/StatusToolbar.html
+++ b/src/routes/_components/status/StatusToolbar.html
@@ -38,9 +38,9 @@
   />
 </div>
 {#if enableShortcuts}
-  <Shortcut scope={shortcutScope} key="f" on:pressed="toggleFavorite()"/>
+  <Shortcut scope={shortcutScope} key="f" on:pressed="toggleFavorite(true)"/>
   <Shortcut scope={shortcutScope} key="r" on:pressed="reply()"/>
-  <Shortcut scope={shortcutScope} key="b" on:pressed="reblog()"/>
+  <Shortcut scope={shortcutScope} key="b" on:pressed="reblog(true)"/>
 {/if}
 <style>
   .status-toolbar {
@@ -77,6 +77,7 @@
   import { updateProfileAndRelationship } from '../../_actions/accounts.js'
   import { FAVORITE_ANIMATION, REBLOG_ANIMATION } from '../../_static/animations.js'
   import { on } from '../../_utils/eventBus.js'
+  import { announceAriaLivePolite } from '../../_utils/announceAriaLivePolite.js'
 
   export default {
     oncreate () {
@@ -112,21 +113,27 @@
     },
     store: () => store,
     methods: {
-      toggleFavorite () {
+      toggleFavorite (announce) {
         const { originalStatusId, favorited } = this.get()
         const newFavoritedValue = !favorited
         /* no await */ setFavorited(originalStatusId, newFavoritedValue)
         if (newFavoritedValue) {
           this.refs.favoriteIcon.animate(FAVORITE_ANIMATION)
         }
+        if (announce) {
+          announceAriaLivePolite(newFavoritedValue ? 'intl.favorited' : 'intl.unfavorited')
+        }
       },
-      reblog () {
+      reblog (announce) {
         const { originalStatusId, reblogged } = this.get()
         const newRebloggedValue = !reblogged
         /* no await */ setReblogged(originalStatusId, newRebloggedValue)
         if (newRebloggedValue) {
           this.refs.reblogIcon.animate(REBLOG_ANIMATION)
         }
+        if (announce) {
+          announceAriaLivePolite(newRebloggedValue ? 'intl.reblogged' : 'intl.unreblogged')
+        }
       },
       reply () {
         requestAnimationFrame(() => {
diff --git a/src/routes/_utils/announceAriaLivePolite.js b/src/routes/_utils/announceAriaLivePolite.js
new file mode 100644
index 00000000..01d219a9
--- /dev/null
+++ b/src/routes/_utils/announceAriaLivePolite.js
@@ -0,0 +1,5 @@
+const ariaLiveElement = process.browser && document.getElementById('theAriaLive')
+
+export function announceAriaLivePolite (text) {
+  ariaLiveElement.textContent = text
+}