refactor(live-region-element): update message order for assertive mes…

…sages (#45)

* refactor(live-region-element): update message order for assertive messages

* chore: add changeset

* Update pink-cups-battle.md

.changeset/pink-cups-battle.md

@@ -0,0 +1,5 @@
+---
+"@primer/live-region-element": patch
+---
+
+Update ordering of announcements to prioritize assertive announcements over polite if they are scheduled before or at the same time

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

@@ -1,5 +1,6 @@
 import {afterEach, beforeEach, describe, test, expect} from 'vitest'
-import {LiveRegionElement} from '../live-region-element'
+import {LiveRegionElement, compareMessages} from '../live-region-element'
+import {Ordering} from '../order'
 import '../define'
 
 describe('live-region-element', () => {
@@ -48,4 +49,114 @@ describe('live-region-element', () => {
     expect(liveRegion.getMessage('polite')).toBe('')
     expect(liveRegion.getMessage('assertive')).toBe('test')
   })
+
+  describe('compareMessages', () => {
+    test('messages with same politeness, a scheduled at same time as b', () => {
+      const now = Date.now()
+      expect(
+        compareMessages(
+          {
+            contents: 'test',
+            politeness: 'polite',
+            scheduled: now,
+          },
+          {
+            contents: 'test',
+            politeness: 'polite',
+            scheduled: now,
+          },
+        ),
+      ).toBe(Ordering.Equal)
+    })
+
+    test('messages with same politeness, a scheduled before b', () => {
+      const now = Date.now()
+      expect(
+        compareMessages(
+          {
+            contents: 'test',
+            politeness: 'polite',
+            scheduled: now,
+          },
+          {
+            contents: 'test',
+            politeness: 'polite',
+            scheduled: now + 1000,
+          },
+        ),
+      ).toBe(Ordering.Less)
+    })
+
+    test('messages with same politeness, a scheduled after b', () => {
+      const now = Date.now()
+      expect(
+        compareMessages(
+          {
+            contents: 'test',
+            politeness: 'polite',
+            scheduled: now + 1000,
+          },
+          {
+            contents: 'test',
+            politeness: 'polite',
+            scheduled: now,
+          },
+        ),
+      ).toBe(Ordering.Greater)
+    })
+
+    test('messages with different politeness, a scheduled at same time as b', () => {
+      const now = Date.now()
+      expect(
+        compareMessages(
+          {
+            contents: 'test',
+            politeness: 'assertive',
+            scheduled: now,
+          },
+          {
+            contents: 'test',
+            politeness: 'polite',
+            scheduled: now,
+          },
+        ),
+      ).toBe(Ordering.Less)
+    })
+
+    test('messages with different politeness, a scheduled before b', () => {
+      const now = Date.now()
+      expect(
+        compareMessages(
+          {
+            contents: 'test',
+            politeness: 'assertive',
+            scheduled: now,
+          },
+          {
+            contents: 'test',
+            politeness: 'polite',
+            scheduled: now + 1000,
+          },
+        ),
+      ).toBe(Ordering.Less)
+    })
+
+    test('messages with different politeness, a scheduled after b', () => {
+      const now = Date.now()
+      expect(
+        compareMessages(
+          {
+            contents: 'test',
+            politeness: 'assertive',
+            scheduled: now + 1000,
+          },
+          {
+            contents: 'test',
+            politeness: 'polite',
+            scheduled: now,
+          },
+        ),
+      ).toBe(Ordering.Greater)
+    })
+  })
 })

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

@@ -247,18 +247,51 @@ function getTemplate() {
   return template
 }
 
-function compareMessages(a: Message, b: Message): Order {
-  if (a.scheduled === b.scheduled) {
-    return Ordering.Equal
+export function compareMessages(a: Message, b: Message): Order {
+  if (a.politeness === b.politeness) {
+    if (a.scheduled === b.scheduled) {
+      return Ordering.Equal
+    }
+
+    // Schedule a before b
+    if (a.scheduled < b.scheduled) {
+      return Ordering.Less
+    }
+
+    // Schedule a after b
+    return Ordering.Greater
+  }
+
+  // Only prioritize assertive messages if they are scheduled at the same time,
+  // or before
+  if (a.politeness === 'assertive' && b.politeness !== 'assertive') {
+    if (a.scheduled === b.scheduled) {
+      return Ordering.Less
+    }
+
+    if (a.scheduled < b.scheduled) {
+      return Ordering.Less
+    }
+
+    return Ordering.Greater
   }
 
-  // Schedule a before b
-  if (a.scheduled < b.scheduled) {
+  if (a.politeness !== 'assertive' && b.politeness === 'assertive') {
+    // Schedule a after b
+    if (a.scheduled === b.scheduled) {
+      return Ordering.Greater
+    }
+
+    // Schedule a after b
+    if (a.scheduled > b.scheduled) {
+      return Ordering.Greater
+    }
+
+    // Schedule a before b
     return Ordering.Less
   }
 
-  // Schedule a after b
-  return Ordering.Greater
+  return Ordering.Equal
 }
 
 function noop() {}