Content string appearing below input field

louise-crooks commented 1 year ago

Current behaviour

The following line of text appears beneath an input field in the live Accounting Individual free product: Input contains a character counter

I've never seen this before. Highlighted on screenshot.

Expected behaviour

The text 'Input contains a character counter' should not be visible in the UI.

CodeSandbox or Storybook URL

https://app.sbc.sage.com/accounts/banking

JIRA Ticket (Sage Only)

No response

Carbon Version

117.6.1

Design Tokens Version

No response

What browsers are you seeing the problem on?

Chrome

What Operating System are you seeing the problem on?

Windows

Anything else we should know?

No response

Confidentiality

[X] I confirm there is no confidential or commercially sensitive information included.

ljemmo commented 1 year ago

@nicktitchmarsh any chance one of your devs could triage this. Looks like a random string is being injected above the hint text by accident.

Also the character counter needs updating to the following position and content updating:

Screenshot 2023-05-11 at 15 15 08

nicktitchmarsh commented 1 year ago

No this is not a random string, this was an accessibility improvement requested by @tempertemper. Screen readers should announce before an input if there is a character limit, otherwise screen reader user's won't be notified until after the input has been read out.

tempertemper commented 1 year ago

Feels weird to have two hint texts though 🤔 I wonder if it should be overridable but only on the proviso that the "Input contains a character counter" message is incorporated in the replacement hint text somehow.

It might not be as literally, maybe just a message about how many characters are allowed in the box; that way the user knows how many characters (or whatever) are allowed, and if they're using a screen reader they also understand why they're being read a character count after each pause in typing.

louise-crooks commented 1 year ago

@tempertemper @nicktitchmarsh Yes agree that 2 hint texts are strange and I think it's confusing. We already have the characters remaining underneath the text input box which is a pattern Gov uses. Our character remaining text should be left aligned and underneath the input text box as @ljemmo posted above - it's current;y right aligned in the screenshot I shared so it's not obvious that it relates to the text input.

Do we need to include the character input in the hint text if we have the remaining characters underneath?

OR do we have the text for screenreaders as a non-visual label so that it doesn't appear in the UI but is read out by screenreaders before the hint text?

tempertemper commented 1 year ago

Our character remaining text should be left aligned and underneath the input text box

↑👍

Do we need to include the character input in the hint text if we have the remaining characters underneath?

I guess the issue is that, visually, the count text appears after the input, meaning the user might not see it until they've already exceeded the limit if it sits outside of the viewport. But this is one that I wouldn't push too hard: pragmatism could trump purism in some cases, so if the user understands what's required of them it's safe to run with the counter on its own as it'll meet 3.3.2 Labels or Instructions.

do we have the text for screenreaders as a non-visual label so that it doesn't appear in the UI but is read out by screenreaders before the hint text?

I'd always err on the side of providing the same experience for everyone, but sometimes that's not possible, so a bit of extra non-visual help can be the right approach. Here, the issue isn't for screen reader users as the character count is programmatically associated with the <textarea> so it's read to them as they pause/stop typing; it's the visual thing where the user hasn't quite scrolled enough to reveal the count text here.

louise-crooks commented 1 year ago

@nicktitchmarsh @ljemmo @tempertemper

So as I see it:

The character counter under the text input needs to be left-aligned as it's currently right-aligned.
The 'Input contains a character counter' line needs to be removed.
The hint text instruction will be reviewed by content designers to see if we should include a reference to the character count. Any updated content will be managed through Phrase.

Martin - Please let me know if you disagree with this approach.

Nick - do you need me to raise another ticket for the left alignment and the removal of the input string? Or can you reopen this one?

Thanks

ljemmo commented 1 year ago

Reopening this as it looks like we need @tempertemper to reply to the above from louise. I agree that 'input text contains a character counter' should be injected into the pre-existing hint text and not be a standalone thing.

As for the alignment of the character counter on text area and text editor, do we want to fix those on other issues / tickets @nicktitchmarsh ?

nicktitchmarsh commented 1 year ago

FE-6004

edleeks87 commented 10 months ago

This has been implemented and released https://github.com/Sage/carbon/pull/6231#issuecomment-1750386067

Sage / carbon