USWDS - Validation: Allow textareas to use validation (Enhancement) #5233

danbrady · 2023-04-13T13:02:21Z

Summary

Textarea components can use validation Now you can use validation on textareas, just like you do on inputs.

Breaking change

This is not a breaking change.

Related issue

Problem statement

Currently, validation can only be used on input elements. This solves most validation needs. However, textarea is a form element in which validation might be desired (e.g. not empty, minimal number of characters or words.)

Solution

Current selector for validation is input[data-validation-element]
Updated validation logic to include textarea[data-validation-element]

Testing and review

Share recommended methods for reviewing this change.

Added textarea to tests

Dependency updates

None.

amyleadem · 2023-04-13T14:18:58Z

Thanks for this submission! I have tagged this for review and we will take a look at our next available opportunity. If you have any questions in the meantime, please let us know!

mejiaj

@danbrady thanks for the contribution, but I'm not sure I understand the problem.

Based on this comment:

However, textarea is a form element in which validation might be desired (e.g. not empty, minimal number of characters or words.)

This could be solved by using character count. Could you provide a more specific use case?

danbrady · 2023-04-13T16:35:57Z

Good question, @mejiaj. Is it fair to think character count is validation for a single, specific requirement? (I.e. cannot be more than N characters.) From the docs:

Character count helps users know how much text they can enter when there is a limit on the number of characters.

(Admittedly, this is probably the most useful validation for a textarea.)

However, allowing textarea to use the validation package allows it to provide visual feedback for multiple validation requirements that a textarea could have. For example: must have a minimal number of characters/words.

The use cases are likely rare, but are not non-existent.

mejiaj

Looks good as far as extending the functionality to textarea. Just some comments below.

mejiaj · 2023-05-10T14:39:54Z

packages/usa-validation/src/usa-validation.twig

+		<label class="usa-label" for="comment">Comment</label>
+		<textarea class="usa-textarea" id="comment" name="comment" data-validate-empty="\S" data-validation-element="validate-comment"></textarea>
+		<input class="usa-button" type="submit" value="Submit comment">
+	</fieldset>


Can we separate these tests, one for input and another for text area?

mejiaj · 2023-05-10T14:44:17Z

packages/usa-validation/src/test/validator.spec.js

Should we add a test that mentions initialization on textarea?

Agreed. I'll separate textarea into separate story, test, etc. and add this to it instead of mixing it up with input. I'll update the PR...

danbrady · 2023-05-12T15:52:16Z

Ok, @mejiaj, I split textarea out. A few observations when looking at the tests on the original input validation:

uswds/packages/usa-validation/src/test/validator.spec.js

Line 10 in 18e6480

const VALIDATOR_LABEL = "[data-checklist-label]";

I don't see an element with that data-checklist-label selector in any template?

uswds/packages/usa-validation/src/test/validator.spec.js

Lines 47 to 53 in 18e6480

    
           describe("initialization", () => { 
        
             it("creates a hidden span element in each list item", () => { 
        
               validators.forEach((checkbox) => { 
        
                 assert.notStrictEqual(checkbox.queryElement(VALIDATOR_LABEL), null); 
        
               }); 
        
             }); 
        
           });

queryElement isn't a valid method (perhaps querySelector was intended?), however execution never makes it to that point to throw an error because the validators object is always empty...

uswds/packages/usa-validation/src/test/validator.spec.js

Line 13 in 18e6480

const inputSelector = () => document.querySelector(INPUT_SELECTOR);

uswds/packages/usa-validation/src/test/validator.spec.js

Lines 37 to 39 in 18e6480

    
           root = inputSelector(); 
        
           validated = inputSelector(); 
        
           validators = root.querySelectorAll(VALIDATORS);

(It's looking for the validators within the input and not the validation checklist.)

Amazingly, all the test pass! You can even change all the asserts to anything and it still passes. 😄

I addressed all these in the textarea tests. Please let me know if I'm on the right track with them? And if I am, should I update the tests for input as part of this PR? Thanks!

mejiaj · 2023-11-24T18:14:49Z

Thanks for making these changes and apologies for the late reply.

Data checklist label

I don't see an element with that data-checklist-label selector in any template?

Looks like a regression. This was introduced in #4914. Looks like in rework it was removed in commit c284450, but the test wasn't updated. Thanks for catching.

Unit tests

Validation list items

queryElement isn't a valid method (perhaps querySelector was intended?), however execution never makes it to that point to throw an error because the validators object is always empty...

Yes, that looks incorrect.

Incorrect validators

uswds/packages/usa-validation/src/test/validator.spec.js

Line 13 in 18e6480

const inputSelector = () => document.querySelector(INPUT_SELECTOR);

uswds/packages/usa-validation/src/test/validator.spec.js

Lines 37 to 39 in 18e6480

root = inputSelector();

validated = inputSelector();

validators = root.querySelectorAll(VALIDATORS);

(It's looking for the validators within the input and not the validation checklist.)

This should fix this. Validators are set in list items and should be checked there.

It's also a good callout for improving our testing, thank you.

@thisisdano @amyleadem I've removed data from this PR and set that in the original issue instead. Because of the additional work involved, we should move this to 3.8.0.

mejiaj · 2024-02-01T15:48:06Z

Created issue for the additional work #5756.

Todo

Remove unused data attributes
Remove unused references in unit tests

mahoneycm

Component, stories, and tests look good! Left two comments for potential future enhancements for the team.

CC: @amyleadem @mejiaj

mahoneycm · 2024-02-05T22:16:29Z

packages/usa-validation/src/index.js

+const VALIDATE_INPUT =
+  "input[data-validation-element],textarea[data-validation-element]";


Validate input selector

Curious if there is a slightly cleaner way to define this selector. Probably not a blocker because this works well but may be room for a future enhancement in the future 🤔

mahoneycm · 2024-02-05T22:23:02Z

packages/usa-validation/src/test/template-textarea.html

Validation Alert: Defined width (future enhancement)

Currently, the validation alert matches the size of the input it's tied to. With text area, users can resize the text box using the corner of the input and it causes the alert to grow with it.

I'm curious if it'd be a good idea to set a max width on the alert or to limit the text area to only extend vertically. Flagging for consideration!

Kapture.2024-02-05.at.17.21.47.webm

I don't mind this behavior, actually, but that might just be personal preference. Happy to discuss this as a possible future change if desired. I don't think it needs to be a blocker for this PR.

amyleadem

Looks good to me!

Here is what I tested:

Confirm that the validation component works with textarea elements
Confirm that a new story for the textarea variant exists and works as expected
Confirm unit tests work as expected

thisisdano

LGTM

aduth · 2024-03-01T13:32:33Z

It looks like the changes here may have introduced an accessibility build failure which is causing other pull requests to fail.

Edit: See fix at #5795

  1) Components/Validation
       Textarea Validation:
     Detected the following accessibility violations!

     1. label (Form elements must have labels)

        For more info, visit https://dequeuniversity.com/rules/axe/4.8/label?application=axeAPI.

        Check these nodes:

        - html: <textarea class="usa-textarea" id="comment" name="comment" data-validate-empty="\S" data-validation-element="validate-comment"></textarea>
          summary: Fix any of the following:
                     Form element does not have an implicit (wrapped) <label>
                     Form element does not have an explicit <label>
                     aria-label attribute does not exist or is empty
                     aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
                     Element has no title attribute
                     Element has no placeholder attribute
                     Element's default semantics were not overridden with role="none" or role="presentation"

amyleadem requested review from mejiaj, amyleadem and mahoneycm April 13, 2023 14:16

mejiaj reviewed Apr 13, 2023

View reviewed changes

danbrady force-pushed the db-textarea-validation branch from aafc952 to 68f29da Compare April 13, 2023 16:55

mejiaj suggested changes May 10, 2023

View reviewed changes

danbrady force-pushed the db-textarea-validation branch 6 times, most recently from 73aad4b to 5ed5f75 Compare May 12, 2023 14:27

Update validation to support textarea

0b4aa55

danbrady force-pushed the db-textarea-validation branch from ccdd95d to 0b4aa55 Compare May 12, 2023 15:04

amyleadem added this to the uswds 3.7.1 milestone Sep 15, 2023

amyleadem added Package: Validation Type: Enhancement labels Sep 15, 2023

mejiaj removed this from the uswds 3.7.1 milestone Nov 24, 2023

mejiaj mentioned this pull request Feb 1, 2024

USWDS - Validation: Remove unused references #5756

Closed

2 tasks

mejiaj approved these changes Feb 1, 2024

View reviewed changes

mahoneycm mentioned this pull request Feb 1, 2024

USWDS-Site: Documentation updates for release 3.8.0 uswds/uswds-site#2477

Closed

5 tasks

mahoneycm reviewed Feb 5, 2024

View reviewed changes

mejiaj pushed a commit to uswds/uswds-site that referenced this pull request Feb 20, 2024

Create changelog entry for uswds/uswds#5233

6030468

mejiaj mentioned this pull request Feb 20, 2024

USWDS-Site - Changelog: Add entry for validation & text input uswds/uswds-site#2497

Merged

amyleadem approved these changes Feb 22, 2024

View reviewed changes

amyleadem requested a review from thisisdano February 22, 2024 23:05

thisisdano approved these changes Feb 26, 2024

View reviewed changes

thisisdano merged commit 88c579c into uswds:develop Feb 26, 2024

amyleadem mentioned this pull request Feb 28, 2024

USWDS-Site: Documentation updates for release 3.8.0 uswds/uswds-site#2509

Merged

This was referenced Mar 1, 2024

USWDS - Core: Replace receptor behavior with custom optimized implementation #5793

Closed

USWDS - Validation: Fix build failure for textarea validation #5795

Merged

amyleadem mentioned this pull request Mar 1, 2024

USWDS: Release 3.8.0 tasks #5797

Closed

8 tasks

thisisdano mentioned this pull request Mar 11, 2024

USWDS 3.8.0 #5812

Merged

SherfeyInv mentioned this pull request Jun 7, 2024

[Snyk] Upgrade @uswds/uswds from 3.7.1 to 3.8.0 SherfeyInv/digitalgov.gov#4

Closed

lane-formio mentioned this pull request Jun 22, 2024

[Snyk] Upgrade @uswds/uswds from 3.8.0 to 3.8.1 formio/uswds-viewer#21

Closed

sennhann29 mentioned this pull request Jul 26, 2024

[Snyk] Upgrade @uswds/uswds from 3.4.1 to 3.8.1 sennhann29/digitalgov.gov#4

Open

lane-formio mentioned this pull request Aug 31, 2024

[Snyk] Upgrade @uswds/uswds from 3.8.0 to 3.8.2 formio/uswds-viewer#25

Merged

FuhuXia mentioned this pull request Sep 26, 2024

[Snyk] Upgrade @uswds/uswds from 3.8.0 to 3.8.2 GSA/datagov-harvester#101

Merged

		const VALIDATE_INPUT =
		"input[data-validation-element],textarea[data-validation-element]";

USWDS - Validation: Allow textareas to use validation (Enhancement) #5233

USWDS - Validation: Allow textareas to use validation (Enhancement) #5233

Uh oh!

Conversation

danbrady commented Apr 13, 2023

Summary

Breaking change

Related issue

Problem statement

Solution

Testing and review

Dependency updates

Uh oh!

amyleadem commented Apr 13, 2023

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

danbrady commented Apr 13, 2023

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

mejiaj May 10, 2023

Choose a reason for hiding this comment

Uh oh!

mejiaj May 10, 2023

Choose a reason for hiding this comment

Uh oh!

danbrady May 11, 2023

Choose a reason for hiding this comment

Uh oh!

danbrady commented May 12, 2023

Uh oh!

mejiaj commented Nov 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Data checklist label

Unit tests

Validation list items

Incorrect validators

Uh oh!

mejiaj commented Feb 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Todo

Uh oh!

mahoneycm left a comment

Choose a reason for hiding this comment

Uh oh!

mahoneycm Feb 5, 2024

Choose a reason for hiding this comment

Validate input selector

Uh oh!

mahoneycm Feb 5, 2024

Choose a reason for hiding this comment

Validation Alert: Defined width (future enhancement)

Uh oh!

amyleadem Feb 22, 2024

Choose a reason for hiding this comment

Uh oh!

amyleadem left a comment

Choose a reason for hiding this comment

Uh oh!

thisisdano left a comment

Choose a reason for hiding this comment

Uh oh!

aduth commented Mar 1, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

mejiaj commented Nov 24, 2023 •

edited

Loading

mejiaj commented Feb 1, 2024 •

edited

Loading

aduth commented Mar 1, 2024 •

edited

Loading