Text Area - fix accessibility when hasLabel is false

[thrbnhrtmnn]

Description / User story

Description / User Story

The following incomplete test is thrown by the storybook accessibility addon and should be fixed, if possible:

• Incomplete: Elements must have sufficient color contrast (hasLabel=false & hasError=true /hasLabel=false & readonly=true)

The error occurs, when hasLabel = false. The same error also appeared in the past in other circumstances and was fixed with #777

The error occurs in all sizes and in dark and light mode.

Requirements / Prerequisites

• none

Acceptance Criteria

• [ ] All errors and incomplete tests thrown by the accessibility addon are resolved:
  • [ ] Incomplete: Elements must have sufficient color contrast (hasLabel=false & hasError=true /hasLabel=false & readonly=true)

Additional information

• The issue is similar to #777
• This issue might be similar to #776 and is just an issue of the a11y addon, though it is appearing in all sizes

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[ashk1996]

1. Removing the display property for the textarea-input-control class solved the issue but created an extra space between the containers.
2. Removing the background colour for the same class solves the issue as well, however this would not be the final solution.

Hence further investigation needs to be done

[ashk1996]

Potential solution below has been pushed that solves the accessibility error.

• Wrapped the text area with a new div giving it a background colour.

Next steps - Testing needs to be done to check if all elements and states work as before.

[thrbnhrtmnn]

Hey @ashk1996 , here are the findings from my review:

• In all states (dark and light mode) except the focus state, the background of the input field is overflowing the border radius, which you can see by changing the background to black:
• In readonly & error state (dark and light mode), it seems the new background color is applied to a different div, instead of the new color replacing the old, this leads again to the incomplete accessibility flag. The background color in disabled state behaves the same, but does not cause the incomplete accessibility flag, we should still handle the background colors consistently.

More findings, but not part of this scope:

• We should change the default for "rows" to 3, to be aligned with design OR we might even want to replace the rows with a min-height property, which uses the token from design.
• The placeholder color in all states except error seems to be off a bit. It should be #454A54.
• Resize icon should not be shown in readonly and disabled state

[thrbnhrtmnn]

Hey @ashk1996 , I only managed to have a short look, but I think there is still an issue:

• The textarea is not filling up the blr-text-wrapper div, which also makes the resize icon look misplaced. Can you check this again?
• Also I saw with this, that the resize icon is not the same as in Figma, in Figma we have 3 strokes, but in code we have 2. This however is a separate issue and not part of this tickets scope.

[ashk1996]

Hi @thrbnhrtmnn

Could you please retest this branch. I have fixed the issue addressed.

Thank you

[thrbnhrtmnn]

Hey @ashk1996 , here are my findings:

• The input / value color in dark mode is wrong in most states (except for error state), which leads to new a11y errors. I think on the current develop we are using the correct colors. I also don't know if this error was already there in the last version I reviewed.

Apart from this, this already looks really nice!

EDIT: Here are some screenshots: light mode with correct color:

dark mode with wrong color:

dark mode with wrong color (value / input selected):

[ashk1996]

Hi @thrbnhrtmnn The issue has been fixed :) Thank you

[thrbnhrtmnn]

Hi @ashk1996 , it looks good for all states except the disabled state.

Please make sure, that you are always using the correct tokens in each state. We have the following tokens in design and should use all in code:

• sem/forms/inputfield/userinput/textcolor/default/rest
• sem/forms/inputfield/userinput/textcolor/default/hover
• sem/forms/inputfield/userinput/textcolor/default/pressed
• sem/forms/inputfield/userinput/textcolor/default/focus
• sem/forms/inputfield/userinput/textcolor/default/disabled
• sem/forms/inputfield/userinput/textcolor/default/readonly

[ashk1996]

Hi @thrbnhrtmnn The tokens have been added correctly to each state in the new commit. Could you please review it. Thank you

[thrbnhrtmnn]

Hi @ashk1996 , thanks for adding the correct tokens, this loos great now!

Unfortunately I found something new during the review:

• It seems like the hover state is overwriting the focus state when hasError = true, this is not the case if hasError is not true, this happens in dark and light mode