From de93512db006a419def78720067cf34cb224399c Mon Sep 17 00:00:00 2001
From: LeandraH <LeandraH@users.noreply.github.com>
Date: Mon, 25 Nov 2024 16:04:03 +0100
Subject: [PATCH 1/2] 2352: Announce number of search results to a screenreader

---
 native/src/routes/SearchModal.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/native/src/routes/SearchModal.tsx b/native/src/routes/SearchModal.tsx
index 9e7da908ea..50afb0aad1 100644
--- a/native/src/routes/SearchModal.tsx
+++ b/native/src/routes/SearchModal.tsx
@@ -1,6 +1,6 @@
-import React, { ReactElement, useState } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { KeyboardAvoidingView, Platform } from 'react-native'
+import { AccessibilityInfo, KeyboardAvoidingView, Platform } from 'react-native'
 import styled from 'styled-components/native'
 
 import { parseHTML, SEARCH_FINISHED_SIGNAL_NAME, SEARCH_ROUTE, SearchResult, useSearch } from 'shared'
@@ -48,6 +48,13 @@ const SearchModal = ({
 
   const searchResults = useSearch(allPossibleResults, query)
 
+  useEffect(() => {
+    // iOS doesn't have live regions to inform a user with a screenreader that there are no more search results
+    if (searchResults?.length === 0 && Platform.OS === 'ios') {
+      AccessibilityInfo.announceForAccessibility(t('searchResultsCount', { count: 0 }))
+    }
+  }, [searchResults, t])
+
   if (!searchResults) {
     return null
   }
@@ -82,7 +89,9 @@ const SearchModal = ({
       <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={{ flex: 1 }}>
         {query.length > 0 && (
           <>
-            <SearchCounter>{t('searchResultsCount', { count: searchResults.length })}</SearchCounter>
+            <SearchCounter accessibilityLiveRegion={searchResults.length === 0 ? 'assertive' : 'polite'}>
+              {t('searchResultsCount', { count: searchResults.length })}
+            </SearchCounter>
             <List
               items={searchResults}
               renderItem={renderItem}

From 896712aca73f6c07cee05c3002b78da2bf0c8e00 Mon Sep 17 00:00:00 2001
From: LeandraH <LeandraH@users.noreply.github.com>
Date: Mon, 2 Dec 2024 19:43:44 +0100
Subject: [PATCH 2/2] 2352: More announcements

---
 native/src/components/CitySelector.tsx | 15 ++++++++++++---
 web/src/components/CitySelector.tsx    |  4 +++-
 web/src/routes/SearchPage.tsx          |  4 +++-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/native/src/components/CitySelector.tsx b/native/src/components/CitySelector.tsx
index 9f70fd07b0..331ead743d 100644
--- a/native/src/components/CitySelector.tsx
+++ b/native/src/components/CitySelector.tsx
@@ -1,7 +1,7 @@
 import { groupBy, transform } from 'lodash'
-import React, { ReactElement, ReactNode, useState } from 'react'
+import React, { ReactElement, ReactNode, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { View } from 'react-native'
+import { AccessibilityInfo, Platform, View } from 'react-native'
 import styled from 'styled-components/native'
 
 import { filterSortCities } from 'shared'
@@ -43,6 +43,13 @@ const CitySelector = ({ cities, navigateToDashboard }: CitySelectorProps): React
 
   const resultCities = filterSortCities(cities, filterText, buildConfig().featureFlags.developerFriendly)
 
+  useEffect(() => {
+    // iOS doesn't have live regions to inform a user with a screenreader that there are no more search results
+    if (resultCities.length === 0 && Platform.OS === 'ios') {
+      AccessibilityInfo.announceForAccessibility(t('searchResultsCount', { count: 0 }))
+    }
+  }, [resultCities, t])
+
   const renderCity = (city: CityModel) => (
     <CityEntry key={city.code} city={city} query={filterText} navigateToDashboard={navigateToDashboard} />
   )
@@ -76,7 +83,9 @@ const CitySelector = ({ cities, navigateToDashboard }: CitySelectorProps): React
           <CityGroup>{t('nearbyCities')}</CityGroup>
           <NearbyCities cities={cities} navigateToDashboard={navigateToDashboard} filterText={filterText} />
         </CityGroupContainer>
-        <SearchCounter>{t('search:searchResultsCount', { count: resultCities.length })}</SearchCounter>
+        <SearchCounter accessibilityLiveRegion={resultCities.length === 0 ? 'assertive' : 'polite'}>
+          {t('search:searchResultsCount', { count: resultCities.length })}
+        </SearchCounter>
         {resultCities.length === 0 ? <NothingFound paddingTop /> : cityEntries}
       </View>
     </View>
diff --git a/web/src/components/CitySelector.tsx b/web/src/components/CitySelector.tsx
index 9a91146fa0..011aed85cd 100644
--- a/web/src/components/CitySelector.tsx
+++ b/web/src/components/CitySelector.tsx
@@ -61,7 +61,9 @@ const CitySelector = ({ cities, language }: CitySelectorProps): ReactElement =>
         placeholderText={t('searchCity')}
         spaceSearch={false}
         onStickyTopChanged={setStickyTop}>
-        <SearchCounter>{t('search:searchResultsCount', { count: resultCities.length })}</SearchCounter>
+        <SearchCounter aria-live={resultCities.length === 0 ? 'assertive' : 'polite'}>
+          {t('search:searchResultsCount', { count: resultCities.length })}
+        </SearchCounter>
         {resultCities.length === 0 ? <Failure errorMessage='search:nothingFound' /> : groups}
       </ScrollingSearchBox>
     </Container>
diff --git a/web/src/routes/SearchPage.tsx b/web/src/routes/SearchPage.tsx
index e145501fd0..b9b429916e 100644
--- a/web/src/routes/SearchPage.tsx
+++ b/web/src/routes/SearchPage.tsx
@@ -107,7 +107,9 @@ const SearchPage = ({ city, cityCode, languageCode, pathname }: CityRouteProps):
       {query.length > 0 && (
         <>
           <List>
-            <SearchCounter>{t('searchResultsCount', { count: results.length })}</SearchCounter>
+            <SearchCounter aria-live={results.length === 0 ? 'assertive' : 'polite'}>
+              {t('searchResultsCount', { count: results.length })}
+            </SearchCounter>
             {results.map(({ title, content, path, thumbnail }) => (
               <SearchListItem
                 title={title}