Merge pull request #283 from github/lw/optional-title

Adds flag to optionally hide title attribute

Author: lindseywild

README.md

@@ -80,6 +80,7 @@ So, a relative date phrase is used for up to a month and then the actual date is
 | `month`        | `month`          | `'numeric'\|'2-digit'\|'short'\|'long'\|'narrow'\|undefined`                                | <sup>***</sup>                   |
 | `year`         | `year`           | `'numeric'\|'2-digit'\|undefined`                                                           | <sup>****</sup>                  |
 | `timeZoneName` | `time-zone-name` | `'long'\|'short'\|'shortOffset'\|'longOffset'` `\|'shortGeneric'\|'longGeneric'\|undefined` | `undefined`                      |
+| `noTitle`      | `no-title`       | `-`                                                                                         | `-`                              |
 
 <sup>*</sup>: If unspecified, `formatStyle` will return `'narrow'` if `format` is `'elapsed'` or `'micro'`, `'short'` if the format is `'relative'` or `'datetime'`, otherwise it will be `'long'`.
 
@@ -268,6 +269,10 @@ For dates outside of the specified `threshold`, the formatting of the date can b
 
 Lang is a [built-in global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang). Relative Time will use this to provide an applicable language to the `Intl` APIs. If the individual element does not have a `lang` attribute then it will traverse upwards in the tree to find the closest element that does, or default the lang to `en`.
 
+##### noTitle
+
+Adding the `no-title` attribute will remove the `title` attribute from the `<relative-time>` element. The `title` attribute is inaccessible to screen reader and keyboard users, so not adding a title attribute allows a user to create a custom, accessible tooltip if one is desired.
+
 ## Browser Support
 
 Browsers without native [custom element support][support] require a [polyfill][ce-polyfill].

examples/index.html

@@ -21,6 +21,14 @@ <h3>Format DateTime</h3>
     </relative-time>
   </p>
 
+  <p>
+    No title attribute:
+    <relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" hour="numeric" minute="2-digit" second="2-digit"
+      no-title>
+      Jan 1 1970
+    </relative-time>
+  </p>
+
   <p>
     Customised options:
     <relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" weekday="narrow" year="2-digit" month="narrow" day="numeric" hour="numeric" minute="2-digit" second="2-digit">

src/relative-time-element.ts

@@ -107,6 +107,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       'precision',
       'format',
       'format-style',
+      'no-title',
       'datetime',
       'lang',
       'title',
@@ -382,6 +383,14 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
     this.setAttribute('format-style', value)
   }
 
+  get noTitle(): boolean {
+    return this.hasAttribute('no-title')
+  }
+
+  set noTitle(value: boolean | undefined) {
+    this.toggleAttribute('no-title', value)
+  }
+
   get datetime() {
     return this.getAttribute('datetime') || ''
   }
@@ -431,7 +440,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       return
     }
     const now = Date.now()
-    if (!this.#customTitle) {
+    if (!this.#customTitle && !this.noTitle) {
       newTitle = this.#getFormattedTitle(date) || ''
       if (newTitle) this.setAttribute('title', newTitle)
     }

test/relative-time.js

@@ -83,6 +83,14 @@ suite('relative-time', function () {
     assert.equal(el.getAttribute('title'), text)
   })
 
+  test('does not set title if no-title attribute is present', async () => {
+    const el = document.createElement('relative-time')
+    el.setAttribute('datetime', new Date().toISOString())
+    el.setAttribute('no-title', '')
+    await Promise.resolve()
+    assert.equal(el.getAttribute('title'), null)
+  })
+
   test('shadowDOM reflects textContent with invalid date', async () => {
     const el = document.createElement('relative-time')
     el.textContent = 'A date string'