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

[KEYBOARD] 508-defect-1: VAOS appointment tabs MUST be keyboard accessible #15015

Closed 1Copenut closed 4 years ago

1Copenut commented 4 years ago

508-defect-1 :exclamation: Launchblocker

Feedback framework

Point of Contact

VFS Point of Contact: Trevor

User Story or Problem Statement

As a keyboard user, I want to be able to press TAB and have the appointment tablist receive keyboard focus so I can review my upcoming, past, and Express Care appointments.

Details

The appointments tablist links all have a tabindex="-1" on first page load. This means the first (Upcoming) tab cannot receive keyboard focus when users press TAB, and makes the Past and Express Care tabs unavailable to keyboard users and other keyboard-like devices. Animated GIF attached below.

Acceptance Criteria

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.

Environment

Solution (if known)

<a
  aria-current="page"
  class="vaos-appts__tab vads-u-text-align--center vads-u-color--gray-dark vaos-appts__tab--current"
  id="tabupcoming"
  aria-selected="false"
  role="tab"
- tabindex="-1"
  href="/health-care/schedule-view-va-appointments/appointments/"
>Upcoming</a>

WCAG or Vendor Guidance (optional)

Screenshots or Trace Logs

tabindex-error-appointments

jbalboni commented 4 years ago

@1Copenut This should be on staging this afternoon for retesting, if that's necessary.

1Copenut commented 4 years ago

@jbalboni I'm confident in the fix. I tested it when your PR branch was opened, so we should be 💯