From a255f328e30bae5b11018d7a51112d26d22df5a4 Mon Sep 17 00:00:00 2001 From: Robin Garrison Date: Wed, 16 Aug 2023 11:15:46 -0500 Subject: [PATCH] Fix error span id & add tests --- packages/web-components/assets/arrow-both.svg | 1 + packages/web-components/assets/check.svg | 1 + .../web-components/assets/green-check.svg | 11 +++++++ .../web-components/assets/icon-dot-gov.svg | 1 + packages/web-components/assets/icon-https.svg | 1 + packages/web-components/assets/minus.svg | 2 ++ packages/web-components/assets/plus.svg | 2 ++ .../web-components/assets/sort-arrow-down.svg | 11 +++++++ .../web-components/assets/sort-arrow-up.svg | 12 +++++++ packages/web-components/assets/sprite.svg | 1 + packages/web-components/src/components.d.ts | 4 +-- .../va-text-input/test/va-text-input.e2e.ts | 2 ++ .../va-textarea/test/va-textarea.e2e.ts | 12 ++++--- .../components/va-textarea/va-textarea.tsx | 33 ++++++++++--------- 14 files changed, 72 insertions(+), 22 deletions(-) create mode 100644 packages/web-components/assets/arrow-both.svg create mode 100644 packages/web-components/assets/check.svg create mode 100644 packages/web-components/assets/green-check.svg create mode 100644 packages/web-components/assets/icon-dot-gov.svg create mode 100644 packages/web-components/assets/icon-https.svg create mode 100644 packages/web-components/assets/minus.svg create mode 100644 packages/web-components/assets/plus.svg create mode 100644 packages/web-components/assets/sort-arrow-down.svg create mode 100644 packages/web-components/assets/sort-arrow-up.svg create mode 100644 packages/web-components/assets/sprite.svg diff --git a/packages/web-components/assets/arrow-both.svg b/packages/web-components/assets/arrow-both.svg new file mode 100644 index 000000000..4c7af72ab --- /dev/null +++ b/packages/web-components/assets/arrow-both.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-components/assets/check.svg b/packages/web-components/assets/check.svg new file mode 100644 index 000000000..a2af827b1 --- /dev/null +++ b/packages/web-components/assets/check.svg @@ -0,0 +1 @@ + diff --git a/packages/web-components/assets/green-check.svg b/packages/web-components/assets/green-check.svg new file mode 100644 index 000000000..c3f09e98b --- /dev/null +++ b/packages/web-components/assets/green-check.svg @@ -0,0 +1,11 @@ + + + Icons / Font Awesome / fa-check + + + + + + + + \ No newline at end of file diff --git a/packages/web-components/assets/icon-dot-gov.svg b/packages/web-components/assets/icon-dot-gov.svg new file mode 100644 index 000000000..3bf047894 --- /dev/null +++ b/packages/web-components/assets/icon-dot-gov.svg @@ -0,0 +1 @@ +icon-dot-gov \ No newline at end of file diff --git a/packages/web-components/assets/icon-https.svg b/packages/web-components/assets/icon-https.svg new file mode 100644 index 000000000..c728d5b18 --- /dev/null +++ b/packages/web-components/assets/icon-https.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-components/assets/minus.svg b/packages/web-components/assets/minus.svg new file mode 100644 index 000000000..3bc50a769 --- /dev/null +++ b/packages/web-components/assets/minus.svg @@ -0,0 +1,2 @@ + +minus \ No newline at end of file diff --git a/packages/web-components/assets/plus.svg b/packages/web-components/assets/plus.svg new file mode 100644 index 000000000..33c379801 --- /dev/null +++ b/packages/web-components/assets/plus.svg @@ -0,0 +1,2 @@ + +plus \ No newline at end of file diff --git a/packages/web-components/assets/sort-arrow-down.svg b/packages/web-components/assets/sort-arrow-down.svg new file mode 100644 index 000000000..25063b6a3 --- /dev/null +++ b/packages/web-components/assets/sort-arrow-down.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/packages/web-components/assets/sort-arrow-up.svg b/packages/web-components/assets/sort-arrow-up.svg new file mode 100644 index 000000000..44ed4ded0 --- /dev/null +++ b/packages/web-components/assets/sort-arrow-up.svg @@ -0,0 +1,12 @@ + + + + + diff --git a/packages/web-components/assets/sprite.svg b/packages/web-components/assets/sprite.svg new file mode 100644 index 000000000..1920d9adf --- /dev/null +++ b/packages/web-components/assets/sprite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts index 93afe23f5..90ce0d607 100644 --- a/packages/web-components/src/components.d.ts +++ b/packages/web-components/src/components.d.ts @@ -1155,7 +1155,7 @@ export namespace Components { } interface VaTextarea { /** - * Whether the component should show a character count message. Has no effect without uswds and maxlength being set. + * Whether the component should show a character count message. Has no effect without uswds and maxlength being set. */ "charcount"?: boolean; /** @@ -3018,7 +3018,7 @@ declare namespace LocalJSX { } interface VaTextarea { /** - * Whether the component should show a character count message. Has no effect without uswds and maxlength being set. + * Whether the component should show a character count message. Has no effect without uswds and maxlength being set. */ "charcount"?: boolean; /** diff --git a/packages/web-components/src/components/va-text-input/test/va-text-input.e2e.ts b/packages/web-components/src/components/va-text-input/test/va-text-input.e2e.ts index a78ef0438..c7582c73a 100644 --- a/packages/web-components/src/components/va-text-input/test/va-text-input.e2e.ts +++ b/packages/web-components/src/components/va-text-input/test/va-text-input.e2e.ts @@ -59,6 +59,7 @@ describe('va-text-input', () => { const input = await page.find('va-text-input >>> input'); expect(error.innerText).toContain('This is a mistake'); expect(input.getAttribute('aria-invalid')).toEqual('true'); + expect(input.getAttribute('aria-describedby')).toContain('input-error-message'); }); it('sets aria-invalid based on invalid prop', async () => { @@ -385,6 +386,7 @@ describe('va-text-input', () => { const input = await page.find('va-text-input >>> input'); expect(error.innerText).toContain('This is a mistake'); expect(input.getAttribute('aria-invalid')).toEqual('true'); + expect(input.getAttribute('aria-describedby')).toContain('input-error-message'); }); it('uswds sets aria-invalid based on invalid prop', async () => { diff --git a/packages/web-components/src/components/va-textarea/test/va-textarea.e2e.ts b/packages/web-components/src/components/va-textarea/test/va-textarea.e2e.ts index 26adde2da..a59a5e4e3 100644 --- a/packages/web-components/src/components/va-textarea/test/va-textarea.e2e.ts +++ b/packages/web-components/src/components/va-textarea/test/va-textarea.e2e.ts @@ -15,7 +15,7 @@ describe('va-textarea', () => { - + @@ -27,7 +27,7 @@ describe('va-textarea', () => { await page.setContent(''); // Render the error message text - const error = await page.find('va-textarea >>> span#error-message'); + const error = await page.find('va-textarea >>> span#input-error-message'); const textarea = await page.find('va-textarea >>> textarea'); expect(error.innerText).toContain('This is a mistake'); expect(textarea.getAttribute('aria-invalid')).toEqual('true'); @@ -48,8 +48,9 @@ describe('va-textarea', () => { // Render the error message text const textareaEl = await page.find('va-textarea >>> textarea '); + expect(textareaEl.getAttribute('aria-invalid')).toEqual('true'); expect(textareaEl.getAttribute('aria-describedby')).toContain( - 'error-message', + 'input-error-message', ); }); @@ -230,6 +231,9 @@ describe('va-textarea', () => { const textarea = await page.find('va-textarea >>> textarea'); expect(error.innerText).toContain('This is a mistake'); expect(textarea.getAttribute('aria-invalid')).toEqual('true'); + expect(textarea.getAttribute('aria-describedby')).toContain( + 'input-error-message', + ); }); it('uswds v3 renders hint text', async () => { @@ -248,7 +252,7 @@ describe('va-textarea', () => { // Render the error message text const textareaEl = await page.find('va-textarea >>> textarea '); expect(textareaEl.getAttribute('aria-describedby')).toContain( - 'error-message', + 'input-error-message', ); }); diff --git a/packages/web-components/src/components/va-textarea/va-textarea.tsx b/packages/web-components/src/components/va-textarea/va-textarea.tsx index 2cea8f9a0..03950f79a 100644 --- a/packages/web-components/src/components/va-textarea/va-textarea.tsx +++ b/packages/web-components/src/components/va-textarea/va-textarea.tsx @@ -95,7 +95,7 @@ export class VaTextarea { @Prop() uswds?: boolean = false; /** - * Whether the component should show a character count message. + * Whether the component should show a character count message. * Has no effect without uswds and maxlength being set. */ @Prop() charcount?: boolean = false; @@ -154,22 +154,23 @@ export class VaTextarea { } render() { - const { - label, - error, - placeholder, - name, - required, - value, - hint, - uswds, - charcount, - messageAriaDescribedby + const { + label, + error, + placeholder, + name, + required, + value, + hint, + uswds, + charcount, + messageAriaDescribedby } = this; const maxlength = this.getMaxlength(); - const ariaDescribedbyIds = `${messageAriaDescribedby ? 'input-message' : ''} ${error ? 'error-message' : ''} - ${charcount && maxlength ? 'charcount-message' : ''}`.trim() || null; + const ariaDescribedbyIds = `${error ? 'input-error-message' : ''} ${ + charcount && maxlength ? 'charcount-message' : ''} ${ + messageAriaDescribedby ? 'input-message' : ''}`.trim() || null; if (uswds) { const charCountTooHigh = charcount && (value?.length > maxlength); @@ -239,7 +240,7 @@ export class VaTextarea { )} ); - } else { + } else { return ( - + {error && ( {i18next.t('error')} {error}