[lexical-react] Feature: Add aria-errormessage and aria-invalid support to LexicalContentEditable

[ejhammond]

Description

Adds the ability to set aria-errormessage and aria-invalid attributes on the Lexical contenteditable div. This allows us to signal that the text input is in an invalid state and to associate it with another element containing an error message.

Impl

Runtime

LexicalContentEditableElement.tsx already spreads all props that are passed to it, so passing aria-errormessage or aria-invalid already works at runtime, but it also explicitly supports camelCase version of aria attributes (e.g. ariaDescribedBy) so we need to add support for ariaErrorMessage and ariaInvalid.

Types

The TS type already implicitly included all HTML attrs via React.AllHTMLAttributes<HTMLDivElement>, but Flow doesn't have a nice type like that, so we allowlist certain attrs. So we update the Flow type to include aria-errormessage and aria-invalid.

I also noticed that we missed aria-describedby, so I added that as well.

And I also noticed that we misspelled aria-labelledby, but fixing that might technically be a breaking change since it could cause a Flow error. So I skipped that for now, but it will not work correctly until we fix the spelling issue, so that's something to consider for the future.

Test plan

Added ariaErrorMessage and ariaInvalid attrs to the LexicalContentEditable in the Lexical Playground and confirmed that the props flowed through to the DOM.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 18, 2024 8:27pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 18, 2024 8:27pm

[github-actions]

size-limit report 📦

Path	Size
lexical - cjs	29.94 KB (0%)
lexical - esm	29.78 KB (0%)
@lexical/rich-text - cjs	38.51 KB (0%)
@lexical/rich-text - esm	31.58 KB (0%)
@lexical/plain-text - cjs	37.16 KB (0%)
@lexical/plain-text - esm	29 KB (0%)
@lexical/react - cjs	40.29 KB (0%)
@lexical/react - esm	33 KB (0%)

[zurfyx]

Thank you for the PR, I think this is fine as we discussed but these should be backward compatible, by adding these properties anyone's who's passing them aria-errormessage or invalid now would get those as undefined

[ejhammond]

Good catch! Do you want me to fix the other attrs while I'm in there? Or just stick to aria-errormessage/aria-invalid so that we're strictly backwards compatible? (Fixing the other attrs would technically not be backwards compatible since the kebab-case versions are all getting voided out today)

[zurfyx]

Good catch! Do you want me to fix the other attrs while I'm in there? Or just stick to aria-errormessage/aria-invalid so that we're strictly backwards compatible? (Fixing the other attrs would technically not be backwards compatible since the kebab-case versions are all getting voided out today)

IMO let's just do these new ones for now. Ideally, we'd get rid of these properties altogether and use the DOM provided ones. We can look into bundling this into a minor patch