vuetifyjs/vuetify

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

Open

#20.792 geöffnet am 19. Dez. 2024

Auf GitHub ansehen
 (2 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)TypeScript (40.995 Stars) (7.139 Forks)batch import
C: VChipT: bughelp wantedplatform specific

Beschreibung

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
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 hours
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
fresh
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
Vue.jsVuetify componentsCSS focus stylesBrowser developer tools
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
80
Research-Richtung
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.