vuetifyjs/vuetify

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

Open

#20 792 ouverte le 19 déc. 2024

Voir sur GitHub
 (2 commentaires) (0 réactions) (0 assignés)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/#...

Guide contributeur

Stack technique
vuetypescript
Domaine
frontend
Type d'issue
bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 hours
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
fresh
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
clear
Prérequis
Vue.jsVuetify componentsCSS focus stylesBrowser developer tools
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
80
Direction de recherche
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.