Screen reader does not announce tooltip text for trigger element when placed inside Modal

[joonass-visma]

Provide a general summary of the issue here

Screen reader does not announce tooltip text for trigger element when placed inside Modal.

🤔 Expected Behavior?

Tooltip text should be announced no matter where the tooltip trigger element is placed.

😯 Current Behavior

Tooltip text is not announced for tooltip trigger element when placed inside Modal.

💁 Possible Solution

When tooltip overlay element gets added to DOM, it gets inert attribute because Modal has set up MutationObserver to hide dynamically added elements. This inert is probably preventing aria-describedby from working correctly because it now refers to tooltip element inside inert overlay element. If this is the cause, then adding some kind of exception to the hiding logic should fix it.

🔦 Context

No response

🖥️ Steps to Reproduce

1. Set up a Modal with tooltip inside

import {Button, Dialog, DialogTrigger, Modal, OverlayArrow, Tooltip, TooltipTrigger} from 'react-aria-components';
import {Edit} from 'lucide-react';

<DialogTrigger>
  <Button>Open modal</Button>
  <Modal>
    <Dialog>
      <TooltipTrigger>
        <Button>
          <Edit size={18} />
        </Button>
        <Tooltip>
          <OverlayArrow>
            <svg width={8} height={8} viewBox="0 0 8 8">
              <path d="M0 0 L4 4 L8 0" />
            </svg>
          </OverlayArrow>
          Edit
        </Tooltip>
      </TooltipTrigger>
    </Dialog>
  </Modal>
</DialogTrigger>

2. Open a screen reader (e.g. NVDA, VoiceOver)
3. Tab the focus to the button inside modal
4. Screen reader does not announce the tooltip text.

Version

react-aria-components 1.12.2

What browsers are you seeing the problem on?

Chrome, Firefox, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

Windows 11, NVDA, Narrator

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Looks like this is a browser+screen reader bug. I see the behaviour you describe in Chrome but not in Safari 26.
What version of Safari are you in?

I can also see in the accessibility tree in chrome that it is linked with the describedby attribute correctly.

Safari correctly reading "Tooltip Tooltip content, button"
First "Tooltip" being the button label, "Tooltip content" being the content of the tooltip.

Chrome Accessibility tree:

[joonass-visma]

@snowystinger My mistake. Seems to work fine on Safari+VoiceOver. Updated the description. Happens at least on Chrome/Firefox/Edge + NVDA/Narrator.

[snowystinger]

Thanks, we'll have to see if there are any alternatives. It would be helpful to understand why this is happening, so if we can reproduce it outside of React Spectrum/React Aria Components that will help a lot.

Otherwise I'm inclined to close this as the attributes are all linked correctly.