dequelabs / dequelabs/cauldron
Bug: Tooltip for an input is not announced when the input is in an error state
- 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
Assessment
This issue has not been assessed yet.