Skip to content

USWDS - Bug: Date picker - mouse hover preventing keyboard interaction on high zoom magnification #5752

Description

@amycole501

Describe the bug

When testing the date picker for zoom magnification functionality, I found that at 400% and using a keyboard to select a date I was unable to use the arrow keys to move off a date. I was "stuck" on a date because my mouse was called over to that date automatically.

In essence, the mouse was jumping to focus on a date and wouldn't allow the keyboard to take control of functionality.

I was using Chrome on a PC.

Steps to reproduce the bug

  1. Go to https://designsystem.digital.gov/components/date-picker/
  2. Zoom into 400% magnification
  3. Try tabbing into the date picker calendar icon; tab into a date to select
  4. Then try using keyboard arrow keys to move around inside the calendar. Inconsistently it works; but sometimes if the mouse is anywhere inside the browser it'll "call" the cursor over to the date and create a keyboard trap.

Expected Behavior

Tabbing into the calendar icon and navigating using a keyboard only should never trap the keyboard focus on a date even at a high magnification like 400%

Caution

This is a AA level failure
The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to scale content to 400%, it reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary. 1

Screenshots

No response

System setup

PC, Chrome

Additional context

This type of keyboard trap inside the calendar is an issue because some low vision users use a high level of magnification and a keyboard to navigate inside components.

Code of Conduct

Footnotes

  1. WCAG Reflow (Level AA) requirement

Metadata

Metadata

Assignees

Type

No type

Fields

No fields configured for issues without a type.

Projects

Status
Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions