NgbTypeahead keyboard accessibility: scrolling by keyboard takes focus out of view

Open
#4,789 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
angular, bootstrap, typescript
Domain
accessibility, frontend

Research direction

Start with the StackBlitz reproduction, especially src/app/typeahead-basic.html and the styling for NgbTypeaheadWindow in index.html. Compare the Simple Typeahead example with the component's keyboard navigation and highlight handling. Done means the highlighted result remains visible while moving with the arrow keys in a constrained, scrollable result list.

Written by the indexing model from the issue text.

Description

component: typeahead type: accessibility type: feature
Bug description:

This may be considered to be outside the purpose for which it was intended, but for my project we're using NgbTypeahead to return all matching entries while limiting the height of the NgbTypeaheadWindow and displaying a vertical scrollbar on it. This works fine for a mouse and a screenreader, but not for a sighted keyboard user because the control doesn't scroll the continents to keep the highlighted item within the container viewport. Maybe calling scrollIntoView() on the element receiving the highlight would make this work?

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/angular-bwbfv3rd?file=src%2Fapp%2Ftypeahead-basic.html

This is forked from https://ng-bootstrap.github.io/#/components/typeahead/examples, which is the code behind the Simple Typeahead example in the documentation at https://ng-bootstrap.github.io/#/components/typeahead/examples. It adds styling to the ngb-typeahead-window in index.html to constrain the height of the box to 6.5rem, enough to display three entries.

To observe the problem, type "ar" into the input field. More than three entries are returned for the query, so a scrollbar appears next to the first three results. Scrolling the list by mouse works as expected. But pressing the Down-arrow key causes the highlight to move out of view, even though the navigation is happening, as can be demonstrated by pressing the Up-arrow key as many times as the Down-arrow key was pressed and observing that the highlight comes back into view.

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 18.0.7

ng-bootstrap: 17.0.1

Bootstrap: not explicitly included in package.json, don't know

Dominant language
TypeScript
Stars
8.2k
Forks
1.6k
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ng-bootstrap/ng-bootstrap

All issues in ng-bootstrap/ng-bootstrap

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.