Screen reader does not announce tooltip text for trigger element when placed inside Modal
- 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
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
```javascript
import {Button, Dialog, DialogTrigger, Modal, OverlayArrow, Tooltip, TooltipTrigger} from 'react-aria-components';
import {Edit} from 'lucide-react';
Open modal
Edit
```
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_
Contributor guide
Assessment
This issue has not been assessed yet.