search

department-of-veterans-affairs / va-forms-system-core

VA Forms System Core will be a React library hosted in NPM that will allow engineers and designers to easily interact with Forms inside of vets-website.
https://department-of-veterans-affairs.github.io/va-forms-system-core/
6 stars 4 forks source link

L2: Error messages must be announced when tabbing through fields #250

Closed taylorkaren closed 2 years ago

taylorkaren commented 2 years ago

ORIGINAL TICKET: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/414

@joshkimux commented on Wed Mar 31 2021

Bug Report

This is related to handling IE11 + JAWS reading errors twice in #314

What happened

Errors are currently not announced to screen reader users while in forms mode (navigating by tab). This is because they aren't programmatically linked to their respective fields (either by including them in the

Originally documented in #22298 along with a recommended solution.

What I expected to happen

Proposed fix

Current

<div class="schemaform-field-template usa-input-error ">
  <!-- Label -->
  <label id="root_email-label" class="usa-input-error-label schemaform-label" for="root_email">
    Email address<span class="schemaform-required-span">(*Required)</span>
  </label>
  <!-- Error message -->
  <span class="usa-input-error-message" role="alert" id="root_email-error-message">
    <span class="sr-only">Error</span> 
      Please enter a valid email address
  </span>
  <!-- Field -->
  <div class="schemaform-widget-wrapper">
    <input type="email" id="root_email" name="root_email" value="pdf" >
  </div>
<div>

Suggested

<div class="schemaform-field-template usa-input-error ">
  <!-- Label -->
  <label id="root_email-label" class="usa-input-error-label schemaform-label" for="root_email">
    Email address<span class="schemaform-required-span">(*Required)</span>
    <!-- Error message is now within the label -->
    <span class="usa-input-error-message" role="alert" id="root_email-error-message">
    <span class="sr-only">Error</span> 
      Please enter a valid email address
    </span>
  </label>
  <!-- Field now has aria-invalid="true" -->
  <div class="schemaform-widget-wrapper">
    <input aria-invalid="true" type="email" id="root_email" name="root_email" value="pdf">
  </div>
<div>

Reproducing

Steps to reproduce:

  1. Enter https://staging.va.gov/health-care/covid-19-vaccine/stay-informed/form#content in browser
  2. Start screenreading device
  3. Create errors in all fields (e.g. enter abc into phone)
  4. Attempt to continue
  5. Tab through all fields again and confirm none of the errors are read out

https://user-images.githubusercontent.com/14154792/112867965-83bc3100-9089-11eb-866f-7c313a02b93c.mov

@joshkimux commented on Wed Mar 31 2021

@1Copenut for awareness

@1Copenut commented on Wed Mar 31 2021

Thank you @joshkimux!

@noahgelman commented on Mon Aug 30 2021

This is in PR https://github.com/department-of-veterans-affairs/vets-website/pull/18430

@noahgelman commented on Tue Oct 26 2021

Waiting on approval. Build is currently failing due to a failure in the VAFacilityPage component.

@k80bowman commented on Thu Jan 13 2022

@noahgelman just checking in. Is this something you might be able to get back to soon?

@noahgelman commented on Fri Jan 14 2022

Yes, I was just looking at it yesterday.

On Thu, Jan 13, 2022 at 3:30 PM Katy Bowman @.***> wrote:

@noahgelman https://github.com/noahgelman just checking in. Is this something you might be able to get back to soon?

— Reply to this email directly, view it on GitHub https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/414#issuecomment-1012492280, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHQJPBJUTDB6HFNAIPCEDLUV4Y6PANCNFSM42EWQR6A . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android

https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: <department-of-veterans-affairs/vets-design-system-documentation/issues/414/1012492280 @github.com>

@noahgelman commented on Mon Jan 24 2022

@ddzz Can you review this PR? https://github.com/department-of-veterans-affairs/vets-website/pull/19085/files

taylorkaren commented 2 years ago

Two PRs on this issue:

obliviga commented 2 years ago

@taylorkaren @nickjg231, I started work on this yesterday and just made a draft PR for it: https://github.com/department-of-veterans-affairs/vets-website/pull/21504

I remember assigning myself this ticket, moving it to In Progress, and setting the sprint. However, Zenhub must have been lagging for me at the time, and none of my changes were set.

taylorkaren commented 2 years ago

Anish is reaching out to Robin Garrison for assistance with this ticket.

obliviga commented 2 years ago

Hey @micahchiang, I think my PR may be failing due to tests that are not related to the code I updated. What would be next steps here? Link to PR

obliviga commented 2 years ago

Error messages are now announced when tabbing through fields: image.png

http://56a7dfa1c196ce59617f94d3d0858a2b.review.vetsgov-internal/health-care/apply/application/veteran-information/veteran-address

One feature that was not added is the aria-invalid attribute on the input field. Adding this feature to the current forms library is a major effort, as the TextWidget component is tied with so many other components. I propose that we do not retrofit this feature into the current forms library, but instead add the feature to the new VFSC.

The new ticket has been created here: https://app.zenhub.com/workspaces/forms-library---platform-spike-team-61b0ae1f2cd3c30014e8a5b0/issues/department-of-veterans-affairs/va-forms-system-core/476

cc @micahchiang @taylorkaren @joshkimux

KT Addendum: Add aria-invalid to most form components is being handled on ticket department-of-veterans-affairs/component-library#489, not the ticket referenced above.