Updates to hasAttribute

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`                      |
-| `noTitle`      | `no-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`.
 
-##### noTitle (`boolean`, default: `undefined`)
+##### noTitle
 
-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 not adding a title attribute allows a user to create a custom, accessible tooltip if one is desired.
+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
 

examples/index.html

@@ -24,7 +24,7 @@ <h3>Format DateTime</h3>
   <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="true">
+      no-title>
       Jan 1 1970
     </relative-time>
   </p>

src/relative-time-element.ts

@@ -384,7 +384,11 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
   }
 
   get noTitle(): boolean {
-    return this.hasAttribute('no-title') && this.getAttribute('no-title') === 'true'
+    return this.hasAttribute('no-title')
+  }
+
+  set noTitle(value: boolean | null) {
+    this.setAttribute('no-title', value?.toString() || '')
   }
 
   get datetime() {

test/relative-time.js

@@ -86,19 +86,11 @@ suite('relative-time', function () {
   test('does not set title if no-title=true', async () => {
     const el = document.createElement('relative-time')
     el.setAttribute('datetime', new Date().toISOString())
-    el.setAttribute('no-title', true)
+    el.setAttribute('no-title', '')
     await Promise.resolve()
     assert.equal(el.getAttribute('title'), null)
   })
 
-  test('sets title if no-title=false', async () => {
-    const el = document.createElement('relative-time')
-    el.setAttribute('datetime', new Date().toISOString())
-    el.setAttribute('no-title', false)
-    await Promise.resolve()
-    assert.ok(el.getAttribute('title'))
-  })
-
   test('shadowDOM reflects textContent with invalid date', async () => {
     const el = document.createElement('relative-time')
     el.textContent = 'A date string'