vuetifyjs/vuetify

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

Open

#20,792 创建于 2024年12月19日

在 GitHub 查看
 (2 评论) (0 反应) (0 负责人)TypeScript (40,995 star) (7,139 fork)batch import
C: VChipT: bughelp wantedplatform specific

描述

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

贡献者指南

技术栈
vuetypescript
领域
frontend
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
fresh
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
Vue.jsVuetify componentsCSS focus stylesBrowser developer tools
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
80
研究方向
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.