dequelabs / dequelabs/cauldron

Bug: Tooltip for an input is not announced when the input is in an error state

Open
#1,874 2 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
127
Forks
31
Avg merge
2d 12h
Merged PRs (30d)
8

Description

### Steps to reproduce

1. Create a TextField with `error` and `fieldRef` props.
2. Add basic validation to the TextField to simulate a validation error.
3. Create a Tooltip and set its `target` property to the `fieldRef` value of the TextField.
4. Trigger a validation error on the TextField.

### Expected Behavior

The TextField input's `aria-describedby` value correctly includes both the tooltip and error message ids. Tooltip is announced by screen readers.

### Actual Behavior
The TextField input's `aria-describedby` value includes only the error message id. Tooltip is not announced by screen readers.

### Code example
```ts
import { Button, TextField, Tooltip, TooltipHead } from '@deque/cauldron-react';
import React, { useRef, useState } from 'react';

function Example() {
const [error, setError] = useState('');
const textFieldRef = useRef(null);

const onSubmit = (e: React.FormEvent) => {
e.preventDefault();
setError('Error');
};

return (


{textFieldRef && (

{'Tooltip'}

)}
Submit

);
}

export default Example;
```

### Version

6.14.0

### What browser(s) are you experiencing the problem on?

_No response_

### Relevant log output

```shell

```

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.