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-1 [KEYBOARD, SCREENREADER]: VAOS - Medical Center/Clinic select radio group are not navigatable with arrow keys #18695

Closed noahgelman closed 3 years ago

noahgelman commented 3 years ago

508-defect-1

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/va-facility-2 Choosing Medical Center/Clinic option

Details

All the radio buttons have different names. I'm sure there is a technical reason for this from a programming standpoint but it's a very large accessibility issues. Radios in the same group need the same name for keyboard navigation as well as accurate screen reader

Acceptance Criteria

Environment

Steps to Recreate

Proposed Solution (if known)

WCAG or Vendor Guidance (optional)

https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html

Screenshots or Trace Logs

jbalboni commented 3 years ago

@vbahinwillit If you need an example of how this should be coded, https://github.com/department-of-veterans-affairs/vets-website/blob/master/src/applications/vaos/new-appointment/components/VAFacilityPage/SystemsRadioWidget.jsx handles it correctly. I think the issue with the flat facility page is partly a copy and paste issue, when we created the other widget.