Skip to content

[@mantine/core] Textarea: Fix accessibility false positives for autosize (#8712)#8713

Open
dsuzener wants to merge 4 commits intomantinedev:masterfrom
dsuzener:fix/textarea-autosize-accessibility
Open

[@mantine/core] Textarea: Fix accessibility false positives for autosize (#8712)#8713
dsuzener wants to merge 4 commits intomantinedev:masterfrom
dsuzener:fix/textarea-autosize-accessibility

Conversation

@dsuzener
Copy link
Copy Markdown

The hidden mirror <textarea> used internally by react-textarea-autosize (when autosize is enabled) triggers the error “Form control does not have a corresponding label”

Although the mirror element has aria-hidden="true" and tabindex="-1" and is not interactive or visible to users, tools like WAVE still flag it because it lacks an accessible name.

Solution

This PR adds a runtime patch that detects the hidden mirror <textarea> based on aria-hidden="true, tabindex="-1", and some styles. Then, it adds role="presentation" and aria-label="autosize measurement mirror textarea".

The patch runs only when autosize is enabled and does not affect other textareas.

Notes

  • This is a workaround until react-textarea-autosize includes proper accessibility attributes on the mirror element.
  • Screen readers and real user accessibility are not impacted.
  • The change eliminates WAVE false positives on the Textarea documentation page.

…ize (mantinedev#8712)

The change only runs when autosize is enabled and acts as a temporary workaround until upstream dependency (react-textarea-autosize) adds proper accessibility attributes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant