ng-bootstrap / ng-bootstrap/ng-bootstrap
Accessibility: ngbDropdownToggle does not collapse when losing focus in mobile
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 8.2k
- Forks
- 1.6k
- PR merge metrics
- No merged PRs in 30d
Description
We see all kinds of issues related to mobile accessibility in ng-bootstrap (voiceover and talkback). Is there any any effort to make ng-bootstrap components accessible on mobile?
To test this, open this basic example on desktop. With tab navigation, the dropdown will close when losing focus.
Open on mobile device (android or ios). Enable voiceover/talkback and swipe through the page. The dropdown will not collapse upon losing focus.
Here is a basic example of the dropdown
https://stackblitz.com/edit/angular-zteyj1?embed=1&file=app/dropdown-basic.html
Angular: Current
ng-bootstrap: Current
Bootstrap: Current
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz basic dropdown example and reproduce the behavior on Android or iOS using TalkBack or VoiceOver, then compare it with desktop tab navigation. Trace the ngbDropdownToggle focus behavior and verify that the dropdown collapses after swiping focus away on mobile without breaking desktop behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, bootstrap, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100