From 9bdb4a4b4a1351dfb85b9d8ea40621e7d0ee6f6f Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 24 Nov 2022 09:17:20 -0800
Subject: [PATCH] fix: announce "loading more" with aria-live=polite after
 delay

---
 .../_components/timeline/LoadingFooter.html   | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/routes/_components/timeline/LoadingFooter.html b/src/routes/_components/timeline/LoadingFooter.html
index 4592b67c..85084d91 100644
--- a/src/routes/_components/timeline/LoadingFooter.html
+++ b/src/routes/_components/timeline/LoadingFooter.html
@@ -65,11 +65,30 @@
   }
 </style>
 <script>
+  import { observe } from 'svelte-extras'
   import LoadingSpinner from '../LoadingSpinner.html'
   import { store } from '../../_store/store.js'
   import { fetchMoreItemsAtBottomOfTimeline } from '../../_actions/timeline.js'
+  import { announceAriaLivePolite } from '../../_utils/announceAriaLivePolite.js'
+
+  const SCREEN_READER_ANNOUNCE_DELAY = 1000 // 1 second
 
   export default {
+    oncreate () {
+      // If the new statuses are delayed a significant amount of time, announce to screen readers that we're loading
+      let delayedAriaAnnouncementHandle
+
+      this.observe('showLoading', showLoading => {
+        if (showLoading) {
+          delayedAriaAnnouncementHandle = setTimeout(() => {
+            delayedAriaAnnouncementHandle = undefined
+            announceAriaLivePolite('intl.loadingMore')
+          }, SCREEN_READER_ANNOUNCE_DELAY)
+        } else if (delayedAriaAnnouncementHandle) {
+          clearTimeout(delayedAriaAnnouncementHandle)
+        }
+      })
+    },
     store: () => store,
     computed: {
       shown: ({ $timelineInitialized, $runningUpdate, $disableInfiniteScroll }) => (
@@ -79,6 +98,7 @@
       showLoadButton: ({ $runningUpdate, $disableInfiniteScroll }) => !$runningUpdate && $disableInfiniteScroll
     },
     methods: {
+      observe,
       onClickLoadMore (e) {
         e.preventDefault()
         e.stopPropagation()