XKit-Rewritten icon indicating copy to clipboard operation
XKit-Rewritten copied to clipboard

Control button util: Implement control button tooltips

Open marcustyphoon opened this issue 2 years ago • 5 comments

Description

Adds aria-labels to our control buttons and duplicates Tumblr's on-hover tooltips.

Resolves #973.

Testing steps

Enable Quick Tags and/or Trim Reblogs. Mouse over the control buttons with the viewport width both greater and less than 990px and with touchscreen emulation turned on and off.

marcustyphoon avatar Aug 21 '23 22:08 marcustyphoon

Right now this is an exact clone of Tumblr's DOM structure and CSS, which could probably be simplified. More importantly, though, it doesn't allow tooltips to be wider than about one word.

Things to figure out include:

  • One word tooltips or multiple word?
  • If multiple, should the words be on one line (and thus be wider than the native tooltips) or wrapped (looks bad)?
  • Should we mark that these are XKit-added in some way?

marcustyphoon avatar Aug 21 '23 22:08 marcustyphoon

Current commit screenshot, with graphics I stole from #1064/#1065:

marcustyphoon avatar Aug 21 '23 22:08 marcustyphoon

I think an X inside a rounded rectangle, especially a white X on a black background, means something very different now.

The purple is the only thing the addon icon has going for it.

AprilSylph avatar Aug 21 '23 22:08 AprilSylph

Ah. Well... shit.

marcustyphoon avatar Aug 21 '23 22:08 marcustyphoon

Question is, should these be active in the ≤990px width mobile view? Tumblr's are not.

marcustyphoon avatar Sep 08 '23 10:09 marcustyphoon

Hmm, I don't really like custom tooltips in general. Simplest thing would just be to add aria-label and title.

AprilSylph avatar Feb 20 '24 22:02 AprilSylph

Sure: #1404.

marcustyphoon avatar Feb 21 '24 02:02 marcustyphoon