Skip to content

Commit 4fbbc8e

Browse files
authored
feat(live-region-element): update assertive announcements to no longer work with delayMs (#51)
* feat(live-region-element): update assertive announcements to no longer work with delayMs * chore: add changeset
1 parent 364ab7f commit 4fbbc8e

File tree

3 files changed

+33
-78
lines changed

3 files changed

+33
-78
lines changed

.changeset/nice-terms-develop.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/live-region-element": minor
3+
---
4+
5+
Update delayMs to only work with politeness="polite"

packages/live-region-element/src/__tests__/live-region-element.test.ts

+1-37
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ describe('live-region-element', () => {
105105
).toBe(Ordering.Greater)
106106
})
107107

108-
test('messages with different politeness, a scheduled at same time as b', () => {
108+
test('messages with different politeness', () => {
109109
const now = Date.now()
110110
expect(
111111
compareMessages(
@@ -122,41 +122,5 @@ describe('live-region-element', () => {
122122
),
123123
).toBe(Ordering.Less)
124124
})
125-
126-
test('messages with different politeness, a scheduled before b', () => {
127-
const now = Date.now()
128-
expect(
129-
compareMessages(
130-
{
131-
contents: 'test',
132-
politeness: 'assertive',
133-
scheduled: now,
134-
},
135-
{
136-
contents: 'test',
137-
politeness: 'polite',
138-
scheduled: now + 1000,
139-
},
140-
),
141-
).toBe(Ordering.Less)
142-
})
143-
144-
test('messages with different politeness, a scheduled after b', () => {
145-
const now = Date.now()
146-
expect(
147-
compareMessages(
148-
{
149-
contents: 'test',
150-
politeness: 'assertive',
151-
scheduled: now + 1000,
152-
},
153-
{
154-
contents: 'test',
155-
politeness: 'polite',
156-
scheduled: now,
157-
},
158-
),
159-
).toBe(Ordering.Greater)
160-
})
161125
})
162126
})

packages/live-region-element/src/live-region-element.ts

+27-41
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,29 @@ import {Ordering, type Order} from './order'
33

44
type Politeness = 'polite' | 'assertive'
55

6-
type AnnounceOptions = {
7-
/**
8-
* A delay in milliseconds to wait before announcing a message.
9-
*/
10-
delayMs?: number
11-
12-
/**
13-
* The politeness level for a message.
14-
*
15-
* Note: a politeness level of `assertive` should only be used for
16-
* time-sensistive or critical notifications that absolutely require the
17-
* user's immediate attention
18-
*
19-
* @see https://www.w3.org/TR/wai-aria/#aria-live
20-
* @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
21-
*/
22-
politeness?: Politeness
23-
}
6+
type AnnounceOptions =
7+
| {
8+
/**
9+
* The politeness level for a message.
10+
*
11+
* Note: a politeness level of `assertive` should only be used for
12+
* time-sensistive or critical notifications that absolutely require the
13+
* user's immediate attention
14+
*
15+
* @see https://www.w3.org/TR/wai-aria/#aria-live
16+
* @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
17+
*/
18+
politeness?: 'assertive'
19+
20+
/**
21+
* A delay in milliseconds to wait before announcing a message.
22+
*/
23+
delayMs?: never
24+
}
25+
| {
26+
politeness?: 'polite'
27+
delayMs?: number
28+
}
2429

2530
type Message = {
2631
contents: string
@@ -262,33 +267,14 @@ export function compareMessages(a: Message, b: Message): Order {
262267
return Ordering.Greater
263268
}
264269

265-
// Only prioritize assertive messages if they are scheduled at the same time,
266-
// or before
270+
// Assertive messages have no delay and should always have priority over
271+
// non-assertive messages
267272
if (a.politeness === 'assertive' && b.politeness !== 'assertive') {
268-
if (a.scheduled === b.scheduled) {
269-
return Ordering.Less
270-
}
271-
272-
if (a.scheduled < b.scheduled) {
273-
return Ordering.Less
274-
}
275-
276-
return Ordering.Greater
273+
return Ordering.Less
277274
}
278275

279276
if (a.politeness !== 'assertive' && b.politeness === 'assertive') {
280-
// Schedule a after b
281-
if (a.scheduled === b.scheduled) {
282-
return Ordering.Greater
283-
}
284-
285-
// Schedule a after b
286-
if (a.scheduled > b.scheduled) {
287-
return Ordering.Greater
288-
}
289-
290-
// Schedule a before b
291-
return Ordering.Less
277+
return Ordering.Greater
292278
}
293279

294280
return Ordering.Equal

0 commit comments

Comments
 (0)