8000 Updates to hasAttribute · github/relative-time-element@519d915 · GitHub
[go: up one dir, main page]
Skip to content

Commit 519d915

Browse files
lindseywildlindseywild
committed
Updates to hasAttribute
1 parent e281a47 commit 519d915

File tree

4 files changed

+10
-14
lines changed

4 files changed

+10
-14
lines changed

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ So, a relative date phrase is used for up to a month and then the actual date is
8080
| `month` | `month` | `'numeric'\|'2-digit'\|'short'\|'long'\|'narrow'\|undefined` | <sup>***</sup> |
8181
| `year` | `year` | `'numeric'\|'2-digit'\|undefined` | <sup>****</sup> |
8282
| `timeZoneName` | `time-zone-name` | `'long'\|'short'\|'shortOffset'\|'longOffset'` `\|'shortGeneric'\|'longGeneric'\|undefined` | `undefined` |
83-
| `noTitle` | `no-title` | `boolean \| null` | - |
83+
| `noTitle` | `no-title` | `'boolean \| null'` | - |
8484

8585
<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'`.
8686

@@ -269,9 +269,9 @@ For dates outside of the specified `threshold`, the formatting of the date can b
269269

270270
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`.
271271

272-
##### noTitle (`boolean`, default: `undefined`)
272+
##### noTitle
273273

274-
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.
274+
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.
275275

276276
## Browser Support
277277

‎examples/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ <h3>Format DateTime</h3>
2424
<p>
2525
No title attribute:
2626
<relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" hour="numeric" minute="2-digit" second="2-digit"
27-
no-title="true">
27+
no-title>
2828
Jan 1 1970
2929
</relative-time>
3030
</p>

‎src/relative-time-element.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -384,7 +384,11 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
384384
}
385385

386386
get noTitle(): boolean {
387-
return this.hasAttribute('no-title') && this.getAttribute('no-title') === 'true'
387+
return this.hasAttribute('no-title')
388+
}
389+
390+
set noTitle(value: boolean | null) {
391+
this.setAttribute('no-title', value?.toString() || '')
388392
}
389393

390394
get datetime() {

‎test/relative-time.js

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -86,19 +86,11 @@ suite('relative-time', function () {
8686
test('does not set title if no-title=true', async () => {
8787
const el = document.createElement('relative-time')
8888
el.setAttribute('datetime', new Date().toISOString())
89-
el.setAttribute('no-title', true)
89+
el.setAttribute('no-title', '')
9090
await Promise.resolve()
9191
assert.equal(el.getAttribute('title'), null)
9292
})
9393

94-
test('sets title if no-title=false', async () => {
95-
const el = document.createElement('relative-time')
96-
el.setAttribute('datetime', new Date().toISOString())
97-
el.setAttribute('no-title', false)
98-
await Promise.resolve()
99-
assert.ok(el.getAttribute('title'))
100-
})
101-
10294
test('shadowDOM reflects textContent with invalid date', async () => {
10395
const el = document.createElement('relative-time')
10496
el.textContent = 'A date string'

0 commit comments

Comments
 (0)
0