Review and reassess the design for these v3 components: text-input, textarea, number input

[caw310]

Description

Some concerns came up in as slack thread about the min length/max length appearing below input fields that make them not accessible.

https://dsva.slack.com/archives/C01DBGX4P45/p1686752111076939

Tasks

• [ ] Review the design of the v3 components
• [ ] Make updates to the Sketch file to address a11y issues
• [ ] Review with Matt and DST designers

Acceptance Criteria

• [ ] Sketch file is update with approved design for v3 components: text-input, textarea, number input

[caw310]

Older issue for reference from Robin. https://github.com/department-of-veterans-affairs/va.gov-team/issues/38775

[rhasselle-oddball]

Notes from this slack thread: https://dsva.slack.com/archives/C01DBGX4P45/p1688575091616669

• Matt mentions we don't want the behavior of minlength on by default for v3 components. (displaying the message)
• This requires a change in the component library.
• You are able to reproduce this by going to https://design.va.gov/storybook/?path=/docs/uswds-va-text-input--default, setting min length, then typing into the input field and also deleting characters.
• Note that consumers are seeing the message even without typing into the input box, when minlength is initially passed to the component.
• Note consumers often use minlength validation, so we would want to be able to not display that message by default.

[humancompanion-usds]

@jeana-adhoc and I reassessed and it seems like some v3 MVP work did not get done that needs to be addressed to align with USWDS. USWDS separates out Character count as a distinct component but, the functionality would be implemented in text-input and textarea. That should get done and we should align our design and implementation with the US System.

Here are the details:

• Remove the <small> wrapper around the min and max length hint text. The font-size should be the same as other hint text.
• Use the hint-text gray from the US System (#757575).
• Use the content that the UWDS uses: "N characters allowed" which changes to "N characters over limit" once the user types in more than the max allowed.
• Follow the implementation of the USWDS and immediately display the max length in characters and change the text once the user types in more than the number in the maxlength attribute.
• The USWDS does not use nor support minlength thus we should drop that prop as well.
• We should use aria-describedby in the same was as the USWDS so that the character count is read out to screenreaders.

[humancompanion-usds]

Assigning to Carol, Andrew, and I so we can discuss who to assign this to and to ensure it is dealt with in the next sprint.

[babsdenney]

@humancompanion-usds @LillyBoot This is ready for review.

• V3 text area
• V3 text input
• MVP text area
• MVP text input

[humancompanion-usds]

Approved! Thanks for getting to this so quickly. On to engineering.

[it-harrison]

This will carryover due to need to look into how these changes affect va-memorable-date component, which makes uses of va-text-input

[it-harrison]

@babsdenney @humancompanion-usds just to verify: for v3 text-input do we want to ever allow the minlength attribute, that is even if we are not doing character count?

Put another way, which of the following stories do we retain:

• minlenth
• range
• maxlength

[it-harrison]

@babsdenney @humancompanion-usds one more question: the ticket's title talks about va-number-input but the uswds website doesn't use character count for their version. I assume we want to follow their lead on this?

[humancompanion-usds]

@it-harrison

• Drop minlength & range. These are superseded by Character count.
• We need to keep maxlength to enable Character count I would expect, correct? I don't think we need a distinct story for however. It's just an aspect of character count.
• We have a range today on Number input and thus may have a need for Character count. You could do a quick audit of the code base to see if anyone is using it.

[it-harrison]

PR is here

[it-harrison]

Hi @briandeconinck - quick a11y question on this ticket. I have a web component that on page load looks like: The question is, do we need the text in the red box? Having the text in blue and red boxes seems redundant for screen readers but that is how USWDS implemented their version of this component. Thanks much!

[briandeconinck]

@it-harrison Yeah, this seems unnecessary. Looking at the line just above line 1 that you highlighted, I feel like all three of those could be simplified and combined. "You can enter up to 5 characters" seems unnecessary, and there's no reason for the visible character count status to have an aria-hidden and then for there to also be different than the aria-live character count status for screen reader users.

Maybe it's important to announce to screen readers both the initial constraint and the number of characters remaining? But it feels like weird unnecessary handholding to give screen reader users that extra message that's not given to sighted users. I think @jeana-adhoc and @joshkimux were looking at this component in the USWDS at some point too, tagging them in case they have thoughts on it.

Also, this might already be on your list but since we're looking at it --- The "and this is the hint" hint text should be associated with the input using aria-describedby too, just like the charcount-message. As currently coded, a screen reader user won't hear the hint text when they tab into the input.

[it-harrison]

updated for a11y. ready to review.