vuetifyjs / vuetifyjs/vuetify

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

Open
#20,792 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

C: VChip help wanted platform specific T: bug
Dominant language
TypeScript
Stars
41k
Forks
7.1k
Avg merge
1d 21h
Merged PRs (30d)
11

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked reproduction and the v-autocomplete closable-chip keyboard interaction in Safari, comparing its focus behavior with Firefox and Chrome. Done means the close icon retains a visible focus indicator in Safari while remaining focusable and unchanged in the other listed browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.