fix: improve sd-textarea a11y [skip chromatic]

[paulovareiro29]

Description:

Closes #1492

Goals:

• [x] Implement aria-invalid attribute on textarea when the field is invalid.
• [x] Implement invalid-message on aria-describedby

Definition of Reviewable:

• [x] E2E tests (features, a11y, bug fixes) are created/updated
• [x] Stories (features, a11y) are created/updated
• [x] relevant tickets are linked

[github-actions[bot]]

🚀 Storybook has been deployed for branch fix_improve-sd-textarea-a11y

• View Storybook

[paulovareiro29]

Some fields are invalid even when not touched, e.g. required or min-length fields are invalid when not touched, since it is empty, but in this cases the aria-invalid should not show, since the user might still be working to fill in the field.

Now aria-invalid="true" only shows when the field in is also a visual invalid state. This is controlled by showInvalidStyle attribute.

[paulovareiro29]

The previous change broke the tests I had done, just pushed a change to fix the tests... It is rather annoying that the tests quality gate is always falling.

[MartaPintoTeixeira]

the margin between the help-text and the text area and the margin between the error message and the text area is not consistent. will create a ticket to solve this issue in both figma and dev

[MartaPintoTeixeira]

Where it says: Related templates: Tooltip

change it to: Related templates: Textarea with Tooltip

[MartaPintoTeixeira]

for the invalid sample instead of "Error message" lets have "Error text" as in figma

[MartaPintoTeixeira]

for the disabled section the content inside the textarea should be neutral-500 and is neutral-700. let me know if this is an issue in the component. if so please open a ticket to fix it and align with figma.

[paulovareiro29]

@MartaPintoTeixeira Issue has been created to address the disabled text color #1661