1Copenut commented 4 years ago

508-defect-1 :exclamation: Launchblocker

Feedback framework

❗️ Must for if the feedback must be applied
⚠️ Should if the feedback is best practice
✔️ Consider for suggestions/enhancements

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

[ ] Current tab link does not have a tabindex attribute, or a tabindex="0" attribute
[ ] Current tab will receive keyboard focus. This can be verified by a console document.activeElement and/or the yellow focus halo.
[ ] Arrow keys continue to behave as they do currently (no regression in behavior)

Definition of done

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

Environment

https://staging.va.gov/health-care/schedule-view-va-appointments/appointments/

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)

Keyboard: Understanding SC 2.1.1

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.