downshift-js / downshift-js/downshift

Activating the toggle menu button while the listbox popup is expanded doesn't collapse the list using TalkBack on Mobile Chrome

Open
#1,492 4 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.3k
Forks
936
PR merge metrics
No merged PRs in 30d

Description

- `downshift` version: 6.1.7
- `node` version: 14.20.0
- `npm` (or `yarn`) version: 6.14.17

**Environment**:
Browser(s): Mobile Chrome;
OS: Android 12;
Device(s): Redmi 10C;
Screen Reader(s): TalkBack;

**What you did**:
I'm currently working on a project that uses the `useCombobox` and `useMultipleSelection` hooks from this library to create a combobox/autocomplete dropdown menu.

**What happened**:
I've encountered a problem with the accessibility of the combobox/autocomplete dropdown menu when activating the menu toggle button while the listbox popup is expanded doesn't collapse the list using TalkBack on Mobile Chrome. Unfortunately, this issue also appears in the examples provided in the library documentation. To illustrate the issue, I've included a video below demonstrating how this issue manifests in an example from the documentation (the same behavior is present in the component on my side). In addition, I've also included a video of the correct behavior on iOS devices.

Android | Chrome | TalkBack:
https://user-images.githubusercontent.com/110240086/227996701-706cf002-099a-45f0-8709-de342cd23107.mov

iOS | Safari | VoiceOver:
https://user-images.githubusercontent.com/110240086/227997091-81a0b145-494e-4690-ae3e-4f168411dd5d.mov

**Reproduction repository**:

Unfortunately, I'm unable to provide a reproduction repo at this point.

**Problem description**:
In an autocomplete/combobox dropdown menu when using Talkback in mobile Chrome, pressing the toggle menu button while the listbox is expanding does not collapse the listbox. If the text field is empty, pressing the toggle menu button opens the listbox and moves the focus to the input field. However, after that, the user cannot close the list menu by pressing the toggle menu button again.

This problem is reproduced not only in the project component I am working on but also appears in the examples provided in the library's documentation. Specifically, this issue is only present on Android devices when using the TalkBack screen reader. In contrast, everything works correctly on iOS devices when using the VoiceOver screen reader.

As this is a critical accessibility issue, I would like to report it and get feedback from the developers. I assume this problem is related to the library hooks, as it is not only present in my project but also in the examples provided in the documentation. Perhaps there are options in the hooks that can help fix this problem on my end, so I'd appreciate it if you could tell me about them.

**Suggested solution**:
The toggle menu button should expand and collapse the list popup using TalkBack on Mobile Chrome.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.