vuetifyjs/vuetify

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

Open

#20.792 aberto em 19 de dez. de 2024

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

Guia do colaborador

Pilha de tecnologia
vuetypescript
Domain
frontend
Tipo Issue
bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 hours
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
fresh
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
clear
Prerequisites
Vue.jsVuetify componentsCSS focus stylesBrowser developer tools
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
80
Direção de pesquisa
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.