Input Description / Error Text

[scurker]

TextField should accept a new optional description property that is displayed immediately below the label text. When description is present, the associated input field should have aria-describedby with an idref pointing to the associated description.

[!NOTE] When both description and error are set, the aria-describedby property should reference the description idref first, followed by the error idref.

Related Components

• https://github.com/dequelabs/cauldron/issues/1656
• https://github.com/dequelabs/cauldron/issues/1658
• https://github.com/dequelabs/cauldron/issues/1657

Designs

When the "label text" overflows with the "required" label, the label should wrap onto a new line without interfering with the placement or sizing of required.

Interface

interface TextFieldProps {
  // ...other props
  description?: React.ReactNode
}

Additional Changes

With this change, the placement of the error message should also be visually located immediately above the input field with the addition of a caution icon preceding the error text.

The Required text should not have any font styles applied and have italics removed.

[shawnsharpDQ]

Description and Error updates for the input / Select / Combobox

Description added to a group of radio components

[amberfrontend]

I have a fix for this, but I'm not sure I have permission to push up a PR.

[scurker]

Hey @amberfrontend 👋

I believe you should have permissions to create a PR, but it might need to be from a fork. If that doesn't work let me know and I can double check the contributor settings.

[amberfrontend]

Hi @scurker I'm sorry for the delay. I was busy and then sick for a bit. I'm unable to submit a PR with a fork, either. Do you have a bit more detail about your contributing process (permissions, SSR or HTTPS, etc)? I'd love to contribute to Cauldron.

[scurker]

@amberfrontend I'd like to help but I'm not sure I know how to help. We've had outside contributors contribute from a fork before (such as this one: https://github.com/dequelabs/cauldron/pull/1464). I checked our contributor settings and it should still allow for outside contributors. Are there any errors or issues that you are seeing that you can share?

[scurker]

@ezirlingerDQ What's the expected scenario when the label text needs to wrap?

[Amandeque]

Team Drums Estimation: 3 Drum Points

[Keerthi-Penukonda]

@DanylAksonov , could you please provide test notes for this ticket.

[DanylAksonov]

@DanylAksonov , could you please provide test notes for this ticket.

@Keerthi-Penukonda, I think you can check the TextField component documentation and verify the following points: • The description displays correctly according to the ticket requirements (color, size, position). • The 'Required' label for the select field is not italic. • The error message for the TextField displays correctly (color, size, position).

[Keerthi-Penukonda]

@DanylAksonov , could you please check below scenarios? We don't have few fields in Cauldron to validate.

TextField should accept a new optional description property that is displayed immediately below the label text. When description is present, the associated input field should have aria-describedby with an idref pointing to the associated description.

Working fine

When the "label text" overflows with the "required" label, the label should wrap onto a new line without interfering with the placement or sizing of required.

Working fine - However required text is not aligned properly

This should match the description text that is current present on RadioGroup

Text is different - I'm unsure about this

When both description and error are set, the aria-describedby property should reference the description idref first, followed by the error idref.

There is no such field to validate(With both description and error)

With this change, the placement of the error message should also be visually located immediately above the input field with the addition of a caution icon preceding the error text.

There is no such field to validate(With both description and error)

The Required text should not have any font styles applied and have italics removed.

There is no such field to validate(With both description and required)

Multi-line with description

We don't have such field to validate

Environment

Label	Value
Server	https://axe.dequelabs.com/
Server Version	4.157.3
Tested Browser	Chrome Version 138.0.7204.50 (Official Build) (64-bit)
OS	Windows 10

[Keerthi-Penukonda]

Thanks @DanylAksonov , for sharing screenshosts.