Updates based on PR feedback to noTitle instead of hideTitle

Author: lindseywild

README.md

@@ -80,7 +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`                      |
-| `hideTitle`    | `hide-title`     | `boolean \| null`                                                                           | -                                |
+| `noTitle`      | `no-title`       | `boolean \| null`                                                                           | -                                |
 
 <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'`.
 
@@ -269,9 +269,9 @@ 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`.
 
-##### hideTitle (`boolean`, default: `undefined`)
+##### noTitle (`boolean`, default: `undefined`)
 
-Passing in `hide-title="true"` will remove the `title` attribute from the `<relative-time>` element. The `title` attribute is inaccessible to screen reader and keyboard users, so hiding the title allows a user to create a custom accessible version of a tooltip if one is desired.
+Passing in `no-title="true"` will remove the `title` attribute from the `<relative-time>` element. The `title` attribute is inaccessible to screen reader and keyboard users, so no adding a title attribute allows a user to create a custom, accessible tooltip if one is desired.
 
 ## Browser Support
 

examples/index.html

@@ -23,7 +23,8 @@ <h3>Format DateTime</h3>
 
   <p>
     Hide title attribute:
-    <relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" hour="numeric" minute="2-digit" second="2-digit" hide-title="true">
+    <relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" hour="numeric" minute="2-digit" second="2-digit"
+      no-title="true">
       Jan 1 1970
     </relative-time>
   </p>
@@ -192,8 +193,8 @@ <h2>Localised Dates</h2>
     </relative-time>
   </p>
 
-  <!-- <script type="module" src="../dist/index.js"></script> -->
-  <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script>
+  <script type="module" src="../dist/index.js"></script>
+  <!-- <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script> -->
   <script>
     document.body.addEventListener('relative-time-updated', event => {
       console.log('event from', event.target, event)

src/relative-time-element.ts

@@ -107,7 +107,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       'precision',
       'format',
       'format-style',
-      'hide-title',
+      'no-title',
       'datetime',
       'lang',
       'title',
@@ -383,8 +383,8 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
     this.setAttribute('format-style', value)
   }
 
-  get hideTitle(): boolean {
-    return this.getAttribute('hide-title') === 'true'
+  get noTitle(): boolean {
+    return this.hasAttribute('no-title') && this.getAttribute('no-title') === 'true'
   }
 
   get datetime() {
@@ -436,7 +436,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       return
     }
     const now = Date.now()
-    if (!this.#customTitle && !this.hideTitle) {
+    if (!this.#customTitle && !this.noTitle) {
       newTitle = this.#getFormattedTitle(date) || ''
       if (newTitle) this.setAttribute('title', newTitle)
     }

test/relative-time.js

@@ -83,18 +83,18 @@ suite('relative-time', function () {
     assert.equal(el.getAttribute('title'), text)
   })
 
-  test('does not set title if hide-title=true', async () => {
+  test('does not set title if no-title=true', async () => {
     const el = document.createElement('relative-time')
     el.setAttribute('datetime', new Date().toISOString())
-    el.setAttribute('hide-title', true)
+    el.setAttribute('no-title', true)
     await Promise.resolve()
     assert.equal(el.getAttribute('title'), null)
   })
 
-  test('sets title if hide-title=false', async () => {
+  test('sets title if no-title=false', async () => {
     const el = document.createElement('relative-time')
     el.setAttribute('datetime', new Date().toISOString())
-    el.setAttribute('hide-title', false)
+    el.setAttribute('no-title', false)
     await Promise.resolve()
     assert.ok(el.getAttribute('title'))
   })