Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2352: Announce number of search results to a screen reader #3006

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

LeandraH
Copy link
Contributor

Short description

This announces the number of search results to screen readers.

Proposed changes

I had to do quite some research for this PR so if you want to follow along, I'll add some sources.

  • The best practices for announcing the number of search results is to only tell a user how many results there are if they haven't interacted with the app in a bit, unless there are no results; if there are no results, we want to tell the user immediately so they don't waste energy typing (https://www.scottohara.me/blog/2022/02/05/dynamic-results.html)
  • There is a wonderful parameter in React Native called accessibilityLiveRegion that does exactly that. In Android.
  • The iOS development of the parameter isn't going anywhere (adding iOS support for accessibilityLiveRegion facebook/react-native#35432).
  • A random person on StackOverflow suggested using an effect for it.
  • I decided to go with the built-in accessibilityLiveRegion for Android.
  • For iOS, I implemented the effect to only announce if there are no more results to save the user typing. The wait until a user hasn't interacted with the app for a little while is too fuzzy for a hard implementation.

Side effects

  • Hopefully none

Testing

To test on an iOS device (it has to be a real device, VoiceOver doesn't work on emulators):

  1. Go into the device settings, search for VoiceOver and enable it.
  2. Open Integreat
  3. Go to search
  4. Start typing until there are no more results

To test on an Android device:

  1. If you don't have TalkBack installed, install the Android Accessibility Suite from the Play Store.
  2. Open the device settings, search for TalkBack, enable it.
  3. Open Integreat
  4. Go to search
  5. Start typing

Resolved issues

Fixes: #2352


@bahaaTuffaha
Copy link
Contributor

Suggestions:

  • I think this need like a debounce function just to delay the announcing for number of pages after I finish typing.
  • Does the location search input needs the same functionality?

@LeandraH
Copy link
Contributor Author

LeandraH commented Dec 2, 2024

Suggestions:

* I think this need like a debounce function just to delay the announcing for number of pages after I finish typing.

There are two situations here:

  • One is that there are no more search results. In that case, the feedback should be immediate, so that the user doesn't waste time entering more characters when we already can't find anything with the supplied ones.
  • One is that there are still some search results. In that case, the number of results should indeed only be announced after a slight delay. The ideal slight delay is different for each and every person, which is why I decided to go with the built-in one for Android and nothing for iOS.

So, all in all, I would say that a manual debounce function wouldn't help in this case.

* Does the location search input needs the same functionality?

Good idea, I'll open a design ticket for it. We currently don't show the number of results there at all 😅

@LeandraH
Copy link
Contributor Author

LeandraH commented Dec 2, 2024

* Does the location search input needs the same functionality?

Good idea, I'll open a design ticket for it. We currently don't show the number of results there at all 😅

Turns out we do show the number of results there, it's just not on production yet. I'll add the feedback for screen readers in this ticket then.

Copy link
Member

@steffenkleinle steffenkleinle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on android emulator for both the native app and web. Works nicely, well done.
Sadly I was not able to get the project running on ios/mac.

@@ -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'}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ I did not experience any difference between assertive and polite, both was immediately read after the currently typed letter. 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting. I thought I did but I might have been imagining it. According to https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/LiveRegionMode, the main difference is that an assertive live region should also interrupt ongoing speech and a polite one shouldn't. Maybe it's because there was no ongoing speech at the moment? Nothing reading out the key that you had tapped or something?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

IGAPP-886: Announce number of search results in screen reader
3 participants