search

department-of-veterans-affairs / vets-design-system-documentation

Repository for design.va.gov website
https://design.va.gov
40 stars 61 forks source link

Focus indicator for `va-select` reverted to browser defaults #3282

Open briandeconinck opened 3 weeks ago

briandeconinck commented 3 weeks ago

Bug Report

What happened

The va-select component no longer seems to have a yellow focus indicator when in the :focus state. I'm not seeing any focus styles associated with the component except for the browser defaults.

Select component with browser default focus styles.

What I expected to happen

The va-select component should have the same yellow focus outline that other components on VA.gov have. See screenshot of previous behavior, via @jeana-adhoc.

Select component with yellow focus indicator.

Reproducing

Steps to reproduce:

  1. Navigate to the select component page.
  2. Press [tab] until focus moves to the select component example.
  3. Observe that the focus state does not match previous styles.

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

Noticed this while completing a staging review. This isn't blocking any work, but it's a degradation for anything using this component.

Details

caw310 commented 2 weeks ago

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rsmithadhoc

jamigibbs commented 1 week ago

The mixin import for focus is:

@import '../../mixins/focusable.css';