adobe / adobe/react-spectrum

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

Open
#8,915 3 comments 0 reactions 0 assignees View on GitHub
browser bug
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.