vuetifyjs/vuetify

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

Open

Aperta il 19 dic 2024

Vedi su GitHub
 (2 commenti) (0 reazioni) (0 assegnatari)TypeScript (40.995 star) (7139 fork)batch import
C: VChipT: bughelp wantedplatform specific

Descrizione

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/#...

Guida contributor

Tech stack
vuetypescript
Dominio
frontend
Tipo issue
bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 hours
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
fresh
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
clear
Prerequisiti
Vue.jsVuetify componentsCSS focus stylesBrowser developer tools
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
80
Direzione di ricerca
Indaga il CSS per l'icona di chiusura nel componente v chip di Vuetify quando utilizzato all'interno di v autocomplete. In Safari, la proprietà `:focus visible` o `outline` potrebbe non essere applicata. Controlla il codice sorgente di Vuetify in packages/vuetify/src/components/VChip/ per vedere come sono definiti gli stili di focus. Assicurati che un indicatore di focus visibile (ad esempio, outline) venga applicato quando l'icona di chiusura riceve il focus da tastiera, considerando i problemi noti di Safari con `:focus visible`. Testa la correzione nel link di riproduzione fornito.