search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.9k stars 6.97k forks source link

[Bug Report][3.3.13] v-tooltip is blank string in accessibility even when not shown #18086

Closed ShoryuKyzan closed 8 months ago

ShoryuKyzan commented 1 year ago

Environment

Vuetify Version: 3.3.13 Vue Version: 3.3.4 Browsers: Chrome 115.0.0.0 OS: Windows 10

Steps to reproduce

Existing sample from documentation shows this. The blank tooltip is shortly after the button when it isn't even shown.

  1. Use any v-tooltip.

Expected Behavior

Tooltip shouldnt be present in the accessibility tree when not shown. And a screenreader will not see it and waste time reading it.

Actual Behavior

A blank string tooltip is always present at the highest level of the DOM, and is seen in the accessibility tree. Screenreader sees this and reads "Blank" for each tooltip.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Semi-Workaround: use the contained prop and a ref activator, and have the tooltip outside of the element that activates it. When using the contained prop, I can't really put the tooltip inside of the element that activates it because it messes up it's styles.

The blank tooltip will still be in the DOM, but at least it appears adjacent to its relevant DOM node.

ShoryuKyzan commented 1 year ago

retested, and found that latest version does not fix this.