adobe / adobe/react-spectrum

Accessibility: text under picker placed in a table is not read by VoiceOver

Open
#6,085 2 comments 0 reactions 0 assignees View on GitHub
accessibility TableView
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

Any `text` placed under a `picker` (or a `combo box`) which is placed inside a `TableView/row` is not read by VoiceOver

### 🤔 Expected Behavior?

The text should be readable.

### 😯 Current Behavior

The text is not readable by navigating the content inside the table.

### 💁 Possible Solution

Unknown

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

We have an existing table with rows that have Pickers and Combo Boxes inside. We are tasked with adding a line of text under one of these.

I am aware of the `HelpText` for the Picker/Combo Box ([1](https://react-spectrum.adobe.com/react-spectrum/Picker.html#help-text)), however, our text is informational for the entire cell, not just for the Picker or Combo Box. Thus, we have opted to place the text as its own component.

---

- [Sandbox example](https://codesandbox.io/p/sandbox/react-spectrum-template-syueo?file=%2Fsrc%2FApp.js%3A8%2C7-8%2C52&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clu14hvt100062e66rne22lna%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clu14hvt100022e66fdqj0e5b%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clu14hvt100032e66pduyssck%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clu14hvt100052e66rx9ozxx3%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clu14hvt100022e66fdqj0e5b%2522%253A%257B%2522id%2522%253A%2522clu14hvt100022e66fdqj0e5b%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clu14t2z8005o2e66zo3kmn66%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A8%252C%2522startColumn%2522%253A7%252C%2522endLineNumber%2522%253A8%252C%2522endColumn%2522%253A52%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clu14t2z8005o2e66zo3kmn66%2522%257D%252C%2522clu14hvt100052e66rx9ozxx3%2522%253A%257B%2522id%2522%253A%2522clu14hvt100052e66rx9ozxx3%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clu14hvt100042e66o5im2bm5%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clu14hvt100042e66o5im2bm5%2522%257D%252C%2522clu14hvt100032e66pduyssck%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clu14hvt100032e66pduyssck%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)
- Rendered example: https://k73zx8.csb.app/

I can be reached via the internal Adobe Slack (`@conte`).

### Version

3.31.0

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

Firefox, Chrome

### If other, please specify.

_No response_

### What operating system are you using?

MacOs 13.2

### 🧢 Your Company/Team

Adobe/Admin Console

### 🕷 Tracking Issue

n/a

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox and reproduce the VoiceOver behavior using the TableView row containing a Picker or combo box and separate text. Read the relevant TableView, row, Picker, and combo box entry points; done means the cell's informational text is announced when navigating the table.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.