adobe / adobe/react-spectrum

Accessibilty issue when Monaco Editor is in a Spectrum Dialog

Open
#6,774 2 comments 0 reactions 0 assignees View on GitHub
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

We are currently using the Monaco Editor in a Spectrum Dialog and have encountered an **accessibility** issue.
When using the tab toggle functionality (pressing ctrl+m (Windows) or ctrl+shift+m(Mac)) to switch between spaces and the next focusable element, the screen reader does not provide alerts about that when the Editor is inside a DialogContainer. However, it works correctly outside of the DialogContainer.

### 🤔 Expected Behavior?

Screen readers should alert users like this: "Pressing tab will now insert a tab character/focus on the next focusable element."

### 😯 Current Behavior

The screen reader does not provide alerts about that when the Editor is inside a DialogContainer.

### 💁 Possible Solution

In our case `monaco-aria-container` being `aria-hidden` when the dialog opens is the cause.

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

**Problem:**
When inside the editor area, pressing ctrl+m (Windows) or ctrl+shift+m(Mac) changes the tab functionality to either insert spaces or move to the next focusable element. Screen readers should alert users by saying something like this: "Pressing tab will now insert a tab character/focus on the next focusable element.", however this alert is not occurring when the editor (in code: Calculation component) is inside the dialog.

Please check out App.tsx and the comments.
There is:

- Calculation Component without Dialog: Uncommented and active.
- Calculation Component with Dialog: Currently commented out.

Feel free to switch between those and test accordingly.

1. In UI, click on the light-aquamarine-bordered area to activate the input field, that is our Editor.
3. Turn on the screen reader for accessibility testing.
4. Press Tab and use Ctrl+Shift+M (Mac) to toggle between inserting spaces or moving to the next focusable element.

Note:

- When the calculation component is inside the dialog, the screen reader doesn't alert about the tab functionality toggle.
- When the calculation component is outside the dialog, the screen reader alert functions correctly, we can hear the alert.

[Draft prototype in CodeSandbox](https://codesandbox.io/p/devbox/formula-monaco-editor-q32yym?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%2522clz0lpf1i00063b6knb4ur03m%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%2522clz0lpf1i00023b6kzhbxpy2k%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%2522clz0lpf1i00043b6k5clczbih%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%2522clz0lpf1i00053b6kpkkjr2hh%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B54.35981223855496%252C45.64018776144504%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clz0lpf1i00023b6kzhbxpy2k%2522%253A%257B%2522id%2522%253A%2522clz0lpf1i00023b6kzhbxpy2k%2522%252C%2522activeTabId%2522%253A%2522clz0lvo1c00nq3b6ky5qgupjn%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clz0lpf1i00013b6kuhtmxtt9%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fpackage.json%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252FFormulaEditorState.tsx%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A12%252C%2522startColumn%2522%253A2%252C%2522endLineNumber%2522%253A12%252C%2522endColumn%2522%253A2%257D%255D%252C%2522id%2522%253A%2522clz0lvo1c00nq3b6ky5qgupjn%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252FFormulaEditor.tsx%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A10%252C%2522endLineNumber%2522%253A10%252C%2522startColumn%2522%253A3%252C%2522endColumn%2522%253A3%257D%255D%252C%2522id%2522%253A%2522clz0lzp6300rt3b6k3e37bmp8%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.tsx%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A4%252C%2522endLineNumber%2522%253A4%252C%2522startColumn%2522%253A7%252C%2522endColumn%2522%253A7%257D%255D%252C%2522id%2522%253A%2522clz0mdm6x011p3b6kjqneb9oy%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fnode_modules%252F%2540adobe%252Freact-spectrum-workflow%252Fdist%252FUserAdmin.js%2522%252C%2522id%2522%253A%2522clz1xz7vo014h3b6kgitejv2w%2522%252C%2522mode%2522%253A%2522temporary%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clz1yi4yb00023b6jhrnczz4b%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A122%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A127%252C%2522endColumn%2522%253A15%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FCalculation.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%257D%252C%2522clz0lpf1i00053b6kpkkjr2hh%2522%253A%257B%2522id%2522%253A%2522clz0lpf1i00053b6kpkkjr2hh%2522%252C%2522activeTabId%2522%253A%2522clz2ozyyv00073b6jofrqopjj%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522DOCS%2522%252C%2522path%2522%253A%2522%252Feditors%252Fweb%252Fvscode-web%2522%252C%2522id%2522%253A%2522clz2ozyyv00063b6jppruukl3%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522DOCS%2522%252C%2522path%2522%253A%2522%252Feditors%252Fweb%252Fvscode-web%2522%252C%2522id%2522%253A%2522clz2ozyyv00073b6jofrqopjj%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522clz0lpf1i00043b6k5clczbih%2522%253A%257B%2522id%2522%253A%2522clz0lpf1i00043b6k5clczbih%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clz1xy9wk010t3b6kso4cpacb%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clz1xya1g002xdhf8gsl80ego%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clz1xy9wk010t3b6kso4cpacb%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)

### Version

3.30.0

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

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

MacOS

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with App.tsx and the commented and active Calculation component variants in the linked CodeSandbox, then inspect Calculation.tsx and the Monaco aria container while reproducing the dialog and non-dialog cases. Confirm the expected screen-reader announcement for Ctrl+M/Ctrl+Shift+M in Chrome on macOS; done means the announcement is present when the editor is inside DialogContainer as well as outside it.

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
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.