Accessibilty issue when Monaco Editor is in a Spectrum Dialog
- 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
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