fix(a11y): add aria-live for keyboard shortcuts (#2176)

Fixes #2163

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`

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.',

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(() => {

src/routes/_utils/announceAriaLivePolite.js

@@ -0,0 +1,5 @@
+const ariaLiveElement = process.browser && document.getElementById('theAriaLive')
+
+export function announceAriaLivePolite (text) {
+  ariaLiveElement.textContent = text
+}