Merge branch 'main' into 1994-memdt-custom-validation-bug

department-of-veterans-affairs · Aug 15, 2023 · 66abb50 · 66abb50
2 parents 0272bf1 + 4b3db64
commit 66abb50
Show file tree

Hide file tree

Showing 17 changed files with 151 additions and 26 deletions.
diff --git a/packages/storybook/stories/va-number-input-uswds.stories.jsx b/packages/storybook/stories/va-number-input-uswds.stories.jsx
@@ -177,6 +177,7 @@ ValidRange.args = {
   ...defaultArgs,
   min: 0,
   max: 4,
+  hint: "The valid range is 0 to 4",
 };
 
 export const Internationalization = I18nTemplate.bind(null);

diff --git a/packages/storybook/stories/va-number-input.stories.jsx b/packages/storybook/stories/va-number-input.stories.jsx
@@ -34,6 +34,7 @@ const defaultArgs = {
   'max': undefined,
   hint: null,
   'currency': false,
+  'message-aria-describedby': 'Optional description text for screen readers',
 };
 
 const vaNumberInput = args => {
@@ -49,6 +50,7 @@ const vaNumberInput = args => {
     max,
     hint,
     currency,
+    'message-aria-describedby': messageAriaDescribedby,
     ...rest
   } = args;
   return (
@@ -66,6 +68,7 @@ const vaNumberInput = args => {
       onInput={e => console.log('input event value:', e.target.value)}
       onBlur={e => console.log('blur event', e)}
       currency={currency}
+      message-aria-describedby={messageAriaDescribedby}
     />
   )
 }
@@ -169,6 +172,7 @@ ValidRange.args = {
   ...defaultArgs,
   min: 0,
   max: 4,
+  hint: "The valid range is 0 to 4",
 };
 
 export const Internationalization = I18nTemplate.bind(null);

diff --git a/packages/storybook/stories/va-text-input-uswds.stories.jsx b/packages/storybook/stories/va-text-input-uswds.stories.jsx
@@ -229,13 +229,13 @@ export const Internationalization = I18nTemplate.bind(null);
 Internationalization.args = {
   ...defaultArgs,
   required: true,
-  maxlength: '16',
+  maxlength: '6',
 };
 
 export const MaxLength = Template.bind(null);
 MaxLength.args = {
   ...defaultArgs,
-  maxlength: '16',
+  maxlength: '6',
 };
 
 export const Pattern = Template.bind(null);

diff --git a/packages/storybook/stories/va-text-input.stories.jsx b/packages/storybook/stories/va-text-input.stories.jsx
@@ -210,13 +210,13 @@ export const Internationalization = I18nTemplate.bind(null);
 Internationalization.args = {
   ...defaultArgs,
   required: true,
-  maxlength: '16',
+  maxlength: '6',
 };
 
 export const MaxLength = Template.bind(null);
 MaxLength.args = {
   ...defaultArgs,
-  maxlength: '16',
+  maxlength: '6',
 };
 
 export const MinLength = Template.bind(null);

diff --git a/packages/storybook/stories/va-textarea-uswds.stories.jsx b/packages/storybook/stories/va-textarea-uswds.stories.jsx
@@ -26,7 +26,8 @@ const defaultArgs = {
   'placeholder': '',
   'uswds': true,
   'hint': null,
-  'charcount': false
+  'charcount': false,
+  'message-aria-describedby': 'Optional description text for screen readers',
 };
 
 const Template = ({
@@ -40,7 +41,8 @@ const Template = ({
   placeholder,
   uswds,
   hint,
-  charcount
+  charcount,
+  'message-aria-describedby': messageAriaDescribedby,
 }) => {
   return (
     <va-textarea
@@ -57,6 +59,7 @@ const Template = ({
       onBlur={e => console.log('blur event', e)}
       onInput={e => console.log('input event value', e.target.value)}
       charcount={charcount}
+      message-aria-describedby={messageAriaDescribedby}
     />
   );
 };

diff --git a/packages/storybook/stories/va-textarea.stories.jsx b/packages/storybook/stories/va-textarea.stories.jsx
@@ -25,6 +25,7 @@ const defaultArgs = {
   'value': undefined,
   'placeholder': '',
   hint: null,
+  'message-aria-describedby': 'Optional description text for screen readers',
 };
 
 const Template = ({
@@ -37,6 +38,7 @@ const Template = ({
   value,
   placeholder,
   hint,
+  'message-aria-describedby': messageAriaDescribedby,
 }) => {
   return (
     <va-textarea
@@ -51,6 +53,7 @@ const Template = ({
       placeholder={placeholder}
       onBlur={e => console.log('blur event', e)}
       onInput={e => console.log('input event value', e.target.value)}
+      message-aria-describedby={messageAriaDescribedby}
     />
   );
 };

diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
@@ -690,6 +690,10 @@ export namespace Components {
           * Maximum number value The max attribute specifies the maximum value for an input element.
          */
         "max": number | string;
+        /**
+          * An optional message that will be read by screen readers when the input is focused.
+         */
+        "messageAriaDescribedby"?: string;
         /**
           * Minimum number value The min attribute specifies the minimum value for an input element.
          */
@@ -1174,6 +1178,10 @@ export namespace Components {
           * The maximum number of characters allowed in the input. Negative and zero values will be ignored.
          */
         "maxlength"?: number;
+        /**
+          * An optional message that will be read by screen readers when the input is focused.
+         */
+        "messageAriaDescribedby"?: string;
         /**
           * The name for the input.
          */
@@ -2465,6 +2473,10 @@ declare namespace LocalJSX {
           * Maximum number value The max attribute specifies the maximum value for an input element.
          */
         "max"?: number | string;
+        /**
+          * An optional message that will be read by screen readers when the input is focused.
+         */
+        "messageAriaDescribedby"?: string;
         /**
           * Minimum number value The min attribute specifies the minimum value for an input element.
          */
@@ -3029,6 +3041,10 @@ declare namespace LocalJSX {
           * The maximum number of characters allowed in the input. Negative and zero values will be ignored.
          */
         "maxlength"?: number;
+        /**
+          * An optional message that will be read by screen readers when the input is focused.
+         */
+        "messageAriaDescribedby"?: string;
         /**
           * The name for the input.
          */

diff --git a/packages/web-components/src/components/va-notification/test/va-notification.e2e.ts b/packages/web-components/src/components/va-notification/test/va-notification.e2e.ts
@@ -81,7 +81,7 @@ describe('va-notification', () => {
     expect(closeSpy).toHaveReceivedEventTimes(1);
   });
 
-  it('fires a single analytics event when va-link is clicked', async () => {
+  it.skip('fires a single analytics event when va-link is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(
       `<va-notification 

diff --git a/packages/web-components/src/components/va-number-input/test/va-number-input.e2e.ts b/packages/web-components/src/components/va-number-input/test/va-number-input.e2e.ts
@@ -176,6 +176,24 @@ describe('va-number-input', () => {
     expect(currencyTextElement.innerText).toContain('$');
   });
 
+  it('adds aria-describedby input-message id', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<va-number-input message-aria-describedby="example message" />');
+    const el = await page.find('va-number-input');
+    const inputEl = await page.find('va-number-input >>> input');
+
+    // Render the example message aria-describedby id.
+    expect(inputEl.getAttribute('aria-describedby')).not.toBeNull();
+    expect(inputEl.getAttribute('aria-describedby')).toContain('input-message');
+
+    // If an error and aria-describedby-message is set, id's exist in aria-describedby.
+    el.setProperty('error', 'Testing Error');
+    await page.waitForChanges();
+    expect(inputEl.getAttribute('aria-describedby')).not.toBeNull();
+    expect(inputEl.getAttribute('aria-describedby')).toContain('error-message');
+    expect(inputEl.getAttribute('aria-describedby')).toContain('input-message');
+  });
+
   // Begin USWDS tests
 
   it('uswds renders', async () => {
@@ -210,7 +228,7 @@ describe('va-number-input', () => {
 
   it('uswds renders hint text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-number-input hint="This is hint text" uswds />');
+    await page.setContent('<va-number-input label="Hello world" hint="This is hint text" uswds />');
 
     // Render the hint text
     const hintTextElement = await page.find('va-number-input >>> span.usa-hint');
@@ -342,4 +360,23 @@ describe('va-number-input', () => {
       expect(inputEl.getAttribute('inputmode')).toBe(inputMode);
     }
   });
+
+  it('uswds adds aria-describedby input-message id', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<va-number-input message-aria-describedby="example message" uswds />');
+    const el = await page.find('va-number-input');
+    const inputEl = await page.find('va-number-input >>> input');
+
+    // Render the example message aria-describedby id.
+    expect(inputEl.getAttribute('aria-describedby')).not.toBeNull();
+    expect(inputEl.getAttribute('aria-describedby')).toContain('input-message');
+
+    // If an error and aria-describedby-message is set, id's exist in aria-describedby.
+    el.setProperty('error', 'Testing Error');
+    await page.waitForChanges();
+    expect(inputEl.getAttribute('aria-describedby')).not.toBeNull();
+    expect(inputEl.getAttribute('aria-describedby')).toContain('error-message');
+    expect(inputEl.getAttribute('aria-describedby')).toContain('input-message');
+  });
+
 });
diff --git a/packages/web-components/src/components/va-number-input/va-number-input.scss b/packages/web-components/src/components/va-number-input/va-number-input.scss
@@ -1,5 +1,9 @@
 @import '../va-text-input/va-text-input.scss';
 
+.usa-hint {
+  display: block;
+}
+
 /** Original Component Style **/
 
 @import '../../mixins/form-field-error.css';

diff --git a/packages/web-components/src/components/va-number-input/va-number-input.tsx b/packages/web-components/src/components/va-number-input/va-number-input.tsx
@@ -78,6 +78,11 @@ export class VaNumberInput {
    */
   @Prop() hint?: string;
 
+  /**
+   * An optional message that will be read by screen readers when the input is focused.
+   */
+  @Prop() messageAriaDescribedby?: string;
+
   /**
    * The value for the input.
    */
@@ -154,8 +159,12 @@ export class VaNumberInput {
       handleBlur,
       handleInput,
       width,
+      messageAriaDescribedby,
     } = this;
 
+    const ariaDescribedbyIds = `${messageAriaDescribedby ? 'input-message' : ''} ${error ? 'input-error-message' : ''}`
+    .trim() || null; // Null so we don't add the attribute if we have an empty string
+
     if (uswds) {
       const labelClasses = classnames({
         'usa-label': true,
@@ -177,9 +186,9 @@ export class VaNumberInput {
                   {i18next.t('required')}
                 </span>
               )}
+              {hint && <span class="usa-hint">{hint}</span>}
             </label>
           )}
-          {hint && <span class="usa-hint">{hint}</span>}
           <span id="input-error-message" role="alert">
             {error && (
               <Fragment>
@@ -190,7 +199,7 @@ export class VaNumberInput {
           </span>
           <input
             class={inputClasses}
-            aria-describedby={error ? 'input-error-message' : undefined}
+            aria-describedby={ariaDescribedbyIds}
             aria-invalid={error ? 'true' : 'false'}
             id="inputField"
             type="number"
@@ -203,6 +212,11 @@ export class VaNumberInput {
             onInput={handleInput}
             onBlur={handleBlur}
             />
+            {messageAriaDescribedby && (
+              <span id="input-message" class="sr-only">
+                {messageAriaDescribedby}
+              </span>
+            )}
         </Host>
       );
     } else {
@@ -215,8 +229,8 @@ export class VaNumberInput {
           <label htmlFor="inputField">
             {label}{' '}
             {required && <span class="required">{i18next.t('required')}</span>}
+            {hint && <span class="hint-text">{hint}</span>}
           </label>
-          {hint && <span class="hint-text">{hint}</span>}
           <span id="error-message" role="alert">
             {error && (
               <Fragment>
@@ -230,7 +244,7 @@ export class VaNumberInput {
             <input
               class={inputClass}
               aria-labelledby={currency ? 'inputField symbol' : undefined}
-              aria-describedby={error ? 'error-message' : undefined}
+              aria-describedby={ariaDescribedbyIds}
               aria-invalid={error ? 'true' : 'false'}
               id="inputField"
               type="number"
@@ -243,6 +257,11 @@ export class VaNumberInput {
               onInput={handleInput}
               onBlur={handleBlur}
               />
+              {messageAriaDescribedby && (
+                <span id="input-message" class="sr-only">
+                  {messageAriaDescribedby}
+                </span>
+              )}
             </div>
         </Host>
       );

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
@@ -131,7 +131,7 @@ describe('va-text-input', () => {
 
   it('renders hint text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input hint="This is hint text" />');
+    await page.setContent('<va-text-input hint="This is hint text" label="Hello world" />');
 
     // Render the hint text
     const hintTextElement = await page.find('va-text-input >>> span.hint-text');
@@ -446,7 +446,7 @@ describe('va-text-input', () => {
 
   it('uswds renders hint text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input hint="This is hint text" uswds />');
+    await page.setContent('<va-text-input hint="This is hint text" label="hello, world" uswds />');
 
     // Render the hint text
     const hintTextElement = await page.find('va-text-input >>> .usa-hint');

diff --git a/packages/web-components/src/components/va-text-input/va-text-input.scss b/packages/web-components/src/components/va-text-input/va-text-input.scss
@@ -37,6 +37,10 @@ input.usa-input {
   color: var(--color-base);
 }
 
+.usa-hint {
+  display: block;
+}
+
 /** Original Component Style **/
 @import '../../mixins/accessibility.css';
 @import '../../mixins/form-field-error.css';