algolia / algolia/autocomplete

Focus not trapped in detached mode

Open
#588 2 comments 4 reactions 0 assignees View on GitHub
Scope: Accessibility Scope: Detached mode Status: PR welcome Type: Enhancement
Dominant language
TypeScript
Stars
5.3k
Forks
341
Avg merge
3d 1h
Merged PRs (30d)
5

Description

## Description

when in detached mode (fullscreen or modal), focus should be trapped.

## Reproduction

**Steps**

1. Go to https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete/
2. Reduce viewport width to 500px to switch to detached mode.
3. Click on the first autocomplete.
4. Press Tab a couple of times (or Shift+Tab)
5. Some hidden element is focused, and modal can't be closed with Esc anymore

## Expected behavior

focus should be trapped.

## Environment

- OS: [e.g. Windows / Linux / macOS / iOS / Android]
- Browser: [e.g. Chrome, Safari] Firefox 88
- Autocomplete version: [e.g. 1.0.0] 1.0.1

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue at the linked Autocomplete documentation page by reducing the viewport to 500px and opening the first autocomplete. Start by tracing the detached-mode focus handling; done means Tab and Shift+Tab keep focus within the modal and Escape can still close it.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.