adobe / adobe/react-spectrum

(react-aria-components) Dropzone with FileTrigger has an unnecessary tab stop for keyboard users

Open
#5,394 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 5h
Merged PRs (30d)
58

Description

### Provide a general summary of the issue here

The Dropzone with Filetrigger has an extra non-functional tabstop.
https://react-spectrum.adobe.com/react-aria/DropZone.html#filetrigger

### 🤔 Expected Behavior?

When navigating with the keyboard, Dropzone with FileTrigger should have one tabstop, which when 'pressed' with the keyboard opens the "Open File" dialog.

### 😯 Current Behavior

When navigating with the keyboard, Dropzone with Filetrigger has a tabstop an outer button, which is focused but has no functionality - pressing the button does nothing. This is confusing to keyboard users.

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

Click just before the Dropzone with Filetrigger at https://react-spectrum.adobe.com/react-aria/DropZone.html#filetrigger
Press tab. Dropzone is focused & highlighted but has no press functionality.
Press tab again. "Select File" button is focused. This button has press functionality.

### Version

react-aria-components version used on https://react-spectrum.adobe.com

### What browsers are you seeing the problem on?

Microsoft Edge

### If other, please specify.

_No response_

### What operating system are you using?

Windows

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the DropZone FileTrigger example at the linked DropZone documentation entry point and inspect the keyboard focus behavior of the Dropzone and its “Select File” button. Done means keyboard navigation reaches one tab stop for the Dropzone/FileTrigger interaction, and pressing it opens the file dialog without an extra non-functional stop.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.