Accessibilty issue when Monaco Editor is in a Spectrum Dialog

[gayane-1]

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.
2. Turn on the screen reader for accessibility testing.
3. 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

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

[majornista]

In React-Aria, we use the [data-live-announcer] or [data-react-aria-top-layer] attribute to identify elements that should not be hidden from the accessibility tree when ariaHideOutside executes.

I was able to fix the CodeSandbox example you shared by adding the following to the useLayoutEffect callback method within MonacoEditorReact at line 89:

      const ariaContainer = document.querySelector(".monaco-aria-container");
      if (ariaContainer) {
        ariaContainer.dataset.liveAnnouncer = true;
      }

[snowystinger]

@majornista First, thanks for the workaround.

We should discuss possible API's to make this easier. I'm still worried that there may be other cases where this isn't as easy. I think it'd be good to be able to register other live announcer regions for the ariaHideOutside to avoid/omit.