search

github / relative-time-element

Web component extensions to the standard <time> element.
https://github.github.io/relative-time-element/examples/
MIT License
3.57k stars 170 forks source link

Attribute to control which attribute is set for `title` #256

Open silverwind opened 1 year ago

silverwind commented 1 year ago

Currently the element always sets the title attribute, but to implement a custom tooltip solution, it would be nice for it to set a different HTML attribute. How about a property titleAttribute="title", that could for example be set to aria-label?

keithamus commented 1 year ago

We explored aria-label in https://github.com/github/relative-time-element/pull/243 but it’s not the correct behaviour for this element, as it isn’t a focusable or otherwise interactive element. title isn’t necessarily correct either but right now it seems to be the least worst way of handling this.

I’m hesitant to introduce an attribute to customise this for two reasons:

  1. The element should always just do the correct thing. If title is wrong we should fix it to be correct.
  2. We should prevent users from doing the accidentally incorrect thing. Being able to set the attribute to something like aria-label which seems to be worse for accessibility (based on our testing) should not be possible.
silverwind commented 1 year ago

One particular use of non-title tooltips is that they can allow the interactive selection of the value, which I find useful for referencing a date. Hover the time element, move mouse into tooltip, select and copy. Such interaction is not possible with title.

Currently I've implemented this via a one-time attribute value swap at page load and a MutationObserver to catch newly added elements, but it feels suboptimal.