adobe/react-spectrum

Disable entire ListBox without needing to set disabledKeys

Open

#5,837 opened on Feb 8, 2024

View on GitHub
 (3 comments) (0 reactions) (0 assignees)TypeScript (1,500 forks)auto 404
ListBoxaccessibilityenhancementhelp wanted

Repository metrics

Stars
 (15,634 stars)
PR merge metrics
 (PR metrics pending)

Description

Provide a general summary of the feature here

Hey folks,

I have a ListBox which is displayed inline (aka not popped out by a trigger) inside a component which can be disabled. I'd like to be able to disable a ListBox component entirely without needing to know ahead of time what the items are within the ListBox. Adding aria-disabled would make sense I think too.

🤔 Expected Behavior?

<ListBox items={...} isDisabled> should disable interaction with all items in the ListBox, and possibly set aria-disabled on the ListBox outermost element.

😯 Current Behavior

Currently it's not possible to disable a ListBox, you have to provide a disabledKeys prop with the id of all the items. This is problematic if you don't know what the items are ahead of time, or just error prone if the list is manually created.

💁 Possible Solution

No response

🔦 Context

I have an area of my page which is enabled or disabled based on state, the ListBox is inside an area which should be disabled.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Contributor guide

Research direction
Examine the ListBox component in the react spectrum source code. Understand how disabledKeys works and how each item receives the disabled state. Implement an isDisabled prop that overrides all items. Ensure accessibility by adding aria disabled to the root element.
Tech stack
typescriptreact
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
React
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75