diff --git a/README.md b/README.md index 34bbe20..50704e2 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ If the browser's JavaScript is disabled, the default text served in the cached m Available on [npm](https://www.npmjs.com/) as [**@github/relative-time-element**](https://www.npmjs.com/package/@github/relative-time-element). ``` -$ npm install @github/relative-time-element +npm install @github/relative-time-element ``` This element uses the `Intl.DateTimeFormat` & `Intl.RelativeTimeFormat` APIs, which are supported by all modern JS engines. If you need to support an older browser, you may need to introduce a polyfill for `Intl.DateTimeFormat` & `Intl.RelativeTimeFormat`. @@ -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` | *** | | `year` | `year` | `'numeric'\|'2-digit'\|undefined` | **** | | `timeZoneName` | `time-zone-name` | `'long'\|'short'\|'shortOffset'\|'longOffset'` `\|'shortGeneric'\|'longGeneric'\|undefined` | `undefined` | +| `noTitle` | `no-title` | `-` | `-` | *: 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 `` 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]. diff --git a/examples/index.html b/examples/index.html index 2dfeee8..d671479 100644 --- a/examples/index.html +++ b/examples/index.html @@ -21,6 +21,14 @@

Format DateTime

+

+ No title attribute: + + Jan 1 1970 + +

+

Customised options: diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts index f379e54..660b169 100644 --- a/src/relative-time-element.ts +++ b/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') || '' } @@ -433,7 +442,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor const now = Date.now() if (!this.#customTitle) { newTitle = this.#getFormattedTitle(date) || '' - if (newTitle) this.setAttribute('title', newTitle) + if (newTitle && !this.noTitle) this.setAttribute('title', newTitle) } const duration = elapsedTime(date, this.precision, now) diff --git a/test/relative-time.js b/test/relative-time.js index df73e56..bd3cb32 100644 --- a/test/relative-time.js +++ b/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'