search

department-of-veterans-affairs / va.gov-team

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:
https://depo-platform-documentation.scrollhelp.site/index.html
282 stars 203 forks source link

508-defect-3 [SCREENREADER]: VAOS - Loading spinner for checking if you can make an appointment is not announced #18697

Closed noahgelman closed 3 years ago

noahgelman commented 3 years ago

508-defect-3

Feedback framework

Definition of done

  1. Review and acknowledge feedback.
  2. Fix and/or document decisions made.
  3. Accessibility specialist will close ticket after reviewing documented decisions / validating fix.

Point of Contact

VFS Point of Contact: Noah Gelman

User Story or Problem Statement

"Not seeing the type of care you need?" heading and related content box is not reachable when navigating forward by keyboard, only when navigating backwards.

https://staging.va.gov/health-care/schedule-view-va-appointments/appointments/new-appointment/preferred-date

Details

When picking a date and the app checks if you can make an appointment. The loading spinner that pops up is not announced to a user. The page needs to announce to the user that something is happening.

Acceptance Criteria

Environment

Steps to Recreate

Proposed Solution (if known)

WCAG or Vendor Guidance (optional)

Screenshots or Trace Logs

jbalboni commented 3 years ago

Hi @noahgelman, we're using the LoadingIndicator component from the design system for these spinners, which have a role of progressbar already. I think if that needs to be changed, it would be your team and/or the design system team making that change.

noahgelman commented 3 years ago

@jbalboni Read the following page on usage for progress bar to make sure you have all the related aria labels added: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role

jbalboni commented 3 years ago

@noahgelman Sorry, does that comment mean that the progressbar role is fine for this component, but there are some missing attributes?

I'm trying to clarify this because I can probably have our team make a simple change to add the valuemin and valuemax aria attributes, but if there are broader questions about the role being used, I can't really make that decision for a global component used by lots of other apps.

jbalboni commented 3 years ago

Based on the conversation in this Slack thread, it appears that I should do some focus handling around the loading indicator on this page, and leave changes to the indicator itself to the VSP design system team.

noahgelman commented 3 years ago

@jbalboni

Sorry for the delay in response.

Loading spinners should have have a progress bar role. Those are for static items.

Use the role="status" instead and include some text inside that says "Loading" which can be hidden.

jbalboni commented 3 years ago

@noahgelman Changes for this should be up on staging. Since the role issue isn't resolved for the LoadingSpinner component, I just set focus to the loading spinner when it's visible and set focus back to an appropriate spot after loading is finished.