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 @@
+
+
\ 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 @@
+
\ 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 @@
+
+
\ 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 @@
+
+
\ 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}