vuetifyjs/vuetify

[Bug Report][3.7.6] No focus indicator for closable chips inside v-autocomplete in Safari

Open

#20792 opened on Dec 19, 2024

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (40,995 stars) (7,139 forks)batch import
C: VChipT: bughelp wantedplatform specific

Description

Environment

Vuetify Version: 3.7.6 Vue Version: 3.5.13 Browsers: Safari, Mozilla Firefox, Google Chrome OS: Mac OS 10.15.7

Steps to reproduce

  1. Navigate via keyboard to a closable chip inside a v-autocomplete.

Expected Behavior

Close icon is focusable and a focus indicator is shown.

Actual Behavior

Firefox/Chrome: Close Icon is focusable and focus indicator is shown. 

Safari: Close Icon has focus but no focus indicator is shown.

Reproduction Link

https://play.vuetifyjs.com/#...

Contributor guide

Tech stack
vuetypescript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Vue.jsVuetify componentsCSS focus stylesBrowser developer tools
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
Investigate the CSS for the close icon in Vuetify's v chip component when used inside v autocomplete. In Safari, the `:focus visible` or `outline` property may not be applied. Check the Vuetify source code at packages/vuetify/src/components/VChip/ to see how focus styles are defined. Ensure that a visible focus indicator (e.g., outline) is applied when the close icon receives keyboard focus, considering Safari's known issues with `:focus visible`. Test the fix in the provided reproduction link.