feat(Announce): add support for computing text equivalence

packages/react/src/live-region/Announce.features.stories.tsx

@@ -2,6 +2,7 @@ import type {StoryObj} from '@storybook/react'
 import React, {useEffect, useState} from 'react'
 import {Announce} from './Announce'
 import {VisuallyHidden} from '../VisuallyHidden'
+import RelativeTime from '../RelativeTime'
 
 export default {
   title: 'Experimental/Components/Announce/Features',
@@ -36,3 +37,11 @@ export const WithDelay = () => {
 
   return <Announce delayMs={1000}>{message}</Announce>
 }
+
+export const WithCustomElement = () => {
+  return (
+    <Announce>
+      <RelativeTime date={new Date('2020-01-01T00:00:00Z')} noTitle={true} />
+    </Announce>
+  )
+}

packages/react/src/live-region/Announce.tsx

@@ -66,7 +66,7 @@ export function Announce({
       return
     }
 
-    const textContent = getTextContent(element)
+    const textContent = computeTextEquivalent(element)
     if (textContent === previousAnnouncementText) {
       return
     }
@@ -132,12 +132,110 @@ export function Announce({
   )
 }
 
-function getTextContent(element: HTMLElement): string {
-  let value = ''
-  if (element.hasAttribute('aria-label')) {
-    value = element.getAttribute('aria-label')!
-  } else if (element.textContent) {
-    value = element.textContent
+type TextEquivalentOptions = {
+  allowHidden: boolean
+}
+
+const defaultOptions: TextEquivalentOptions = {
+  allowHidden: false,
+}
+
+/**
+ * Simplified version of the algorithm to compute the text equivalent of an
+ * element.
+ *
+ * @see https://www.w3.org/TR/accname-1.2/#computation-steps
+ */
+function computeTextEquivalent(
+  elementOrText: HTMLElement | Text,
+  options: TextEquivalentOptions = defaultOptions,
+): string {
+  if (elementOrText instanceof HTMLElement && elementOrText.shadowRoot) {
+    return Array.from(elementOrText.shadowRoot.childNodes)
+      .map(node => {
+        if (node instanceof Text) {
+          return computeTextEquivalent(node, options)
+        }
+
+        if (node instanceof HTMLElement) {
+          return computeTextEquivalent(node, options)
+        }
+
+        return null
+      })
+      .filter(Boolean)
+      .join(' ')
+  }
+
+  if (elementOrText instanceof Text) {
+    return elementOrText.textContent?.trim() ?? ''
+  }
+
+  const style = window.getComputedStyle(elementOrText)
+  if (style.display === 'none' || style.visibility === 'hidden') {
+    return ''
+  }
+
+  if (options.allowHidden === false && elementOrText.getAttribute('aria-hidden') === 'true') {
+    return ''
+  }
+
+  if (elementOrText.hasAttribute('aria-labelledby')) {
+    const idrefs = elementOrText.getAttribute('aria-labelledby')!
+    return idrefs
+      .split(' ')
+      .map(idref => {
+        const item = document.getElementById(idref)
+        if (item) {
+          return computeTextEquivalent(item, {allowHidden: true})
+        }
+        return null
+      })
+      .filter(Boolean)
+      .join(' ')
+  }
+
+  const role = elementOrText.getAttribute('role')
+
+  if (role === 'combobox' || role === 'listbox') {
+    const options = elementOrText.querySelectorAll('option[aria-selected="true"]')
+    return Array.from(options)
+      .map(option => {
+        if (option instanceof HTMLOptionElement) {
+          return option.value.trim()
+        }
+        return null
+      })
+      .filter(Boolean)
+      .join(', ')
   }
-  return value ? value.trim() : ''
+
+  if (role === 'range') {
+    if (elementOrText.hasAttribute('aria-valuetext')) {
+      return elementOrText.getAttribute('aria-valuetext')!.trim()
+    }
+
+    if (elementOrText.hasAttribute('aria-valuenow')) {
+      return elementOrText.getAttribute('aria-valuenow')!.trim()
+    }
+    return elementOrText.textContent?.trim() ?? ''
+  }
+
+  if (elementOrText.hasAttribute('aria-label')) {
+    return elementOrText.getAttribute('aria-label')!.trim()
+  }
+
+  if (elementOrText.childNodes.length > 0) {
+    return Array.from(elementOrText.childNodes)
+      .map(node => {
+        if (node instanceof Text || node instanceof HTMLElement) {
+          return computeTextEquivalent(node, options)
+        }
+        return null
+      })
+      .filter(Boolean)
+      .join(' ')
+  }
+
+  return elementOrText.textContent?.trim() ?? ''
 }