fix: move from react-aria-live to @react-aria/live-announcer (#868)

Author: wwalser

.changeset/tender-timers-vanish.md

@@ -0,0 +1,6 @@
+---
+'@sajari/react-search-ui': patch
+'sajari-sdk-docs': patch
+---
+
+fix: move from react-aria-live to @react-aria/live-announcer

packages/search-ui/package.json

@@ -26,14 +26,14 @@
     "react-dom": ">=17"
   },
   "dependencies": {
+    "@react-aria/live-announcer": "^3.1.1",
     "@react-aria/utils": "3.5.0",
     "@sajari/react-components": "^2.0.0",
     "@sajari/react-hooks": "^4.0.1",
     "@sajari/react-sdk-utils": "^2.0.0",
     "dayjs": "^1.10.5",
     "i18next": "19.8.7",
     "i18next-browser-languagedetector": "^6.0.1",
-    "react-aria-live": "^2.0.5",
     "react-error-boundary": "^3.1.3",
     "react-i18next": "^11.8.5",
     "tempura": "^0.4.0"

packages/search-ui/src/ContextProvider/index.tsx

@@ -1,7 +1,6 @@
 import { SearchProvider } from '@sajari/react-hooks';
 import { createContext, getSearchParams, ThemeProvider } from '@sajari/react-sdk-utils';
 import React, { useEffect, useState } from 'react';
-import { LiveAnnouncer } from 'react-aria-live';
 import { I18nextProvider } from 'react-i18next';
 
 import i18n from '../i18n';
@@ -84,13 +83,11 @@ const ContextProvider: React.FC<ContextProviderValues> = ({
             : syncURLState
         }
       >
-        <LiveAnnouncer>
-          <I18nextProvider i18n={i18n}>
-            <ThemeProvider theme={theme} importantStyles={importantStyles}>
-              {children}
-            </ThemeProvider>
-          </I18nextProvider>
-        </LiveAnnouncer>
+        <I18nextProvider i18n={i18n}>
+          <ThemeProvider theme={theme} importantStyles={importantStyles}>
+            {children}
+          </ThemeProvider>
+        </I18nextProvider>
       </SearchProvider>
     </Provider>
   );

packages/search-ui/src/Summary/index.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable react/jsx-one-expression-per-line */
+import { announce } from '@react-aria/live-announcer';
 import { Box, Button, Text } from '@sajari/react-components';
 import { useAutocomplete, useSearchContext } from '@sajari/react-hooks';
 import { escapeHTML, pluralize } from '@sajari/react-sdk-utils';
 import * as React from 'react';
-import { LiveMessage } from 'react-aria-live';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import tw from 'twin.macro';
 
@@ -18,28 +19,27 @@ const Summary = (props: SummaryProps) => {
   const { completion } = useAutocomplete();
   const { t } = useTranslation(['common', 'summary']);
 
+  useEffect(() => {
+    announce(
+      query === ''
+        ? t('summary:noQueryResults', {
+            count: totalResults,
+            object: pluralize(totalResults, t('common:item'), t('common:items')),
+          })
+        : t('summary:results', {
+            count: totalResults,
+            object: pluralize(totalResults, t('common:result'), t('common:results')),
+            query,
+          }),
+    );
+  }, [queryValues?.get('q')]);
+
   if (!searched) {
     return null;
   }
 
   return (
     <React.Fragment>
-      <LiveMessage
-        message={
-          query === ''
-            ? t('summary:noQueryResults', {
-                count: totalResults,
-                object: pluralize(totalResults, t('common:item'), t('common:items')),
-              })
-            : t('summary:results', {
-                count: totalResults,
-                object: pluralize(totalResults, t('common:result'), t('common:results')),
-                query,
-              })
-        }
-        aria-live="polite"
-      />
-
       <Text {...rest} disableDefaultStyles={disableDefaultStyles}>
         <Box
           as="span"

yarn.lock

@@ -4788,6 +4788,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-aria/live-announcer@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "@react-aria/live-announcer@npm:3.1.1"
+  dependencies:
+    "@babel/runtime": ^7.6.2
+  checksum: feb02fe339ed1ce005b3fc6f07366ea100fbdfc3e42688f52d4e6704f6e09724b37f4e6b0c121578081940af11004421aab1b1a91f99c7193c4c2945ff43f92c
+  languageName: node
+  linkType: hard
+
 "@react-aria/progress@npm:^3.1.1":
   version: 3.1.1
   resolution: "@react-aria/progress@npm:3.1.1"
@@ -5299,6 +5308,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@sajari/react-search-ui@workspace:packages/search-ui"
   dependencies:
+    "@react-aria/live-announcer": ^3.1.1
     "@react-aria/utils": 3.5.0
     "@sajari/react-components": ^2.0.0
     "@sajari/react-hooks": ^4.0.1
@@ -5309,7 +5319,6 @@ __metadata:
     i18next: 19.8.7
     i18next-browser-languagedetector: ^6.0.1
     jest: ^26.6.3
-    react-aria-live: ^2.0.5
     react-error-boundary: ^3.1.3
     react-i18next: ^11.8.5
     tempura: ^0.4.0
@@ -16148,17 +16157,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-aria-live@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "react-aria-live@npm:2.0.5"
-  dependencies:
-    uuid: ^3.2.1
-  peerDependencies:
-    react: ^16.3.x
-  checksum: 9b3761292464cedd38a409257f09c679b67720832a024666da285fe46861cb4ff55e1f1aa8df6e71148567f840e9c69c0f821639d79b7be9a0bf12bc96f2f3b2
-  languageName: node
-  linkType: hard
-
 "react-clientside-effect@npm:^1.2.2":
   version: 1.2.2
   resolution: "react-clientside-effect@npm:1.2.2"
@@ -19509,7 +19507,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uuid@npm:^3.2.1, uuid@npm:^3.3.2":
+"uuid@npm:^3.3.2":
   version: 3.4.0
   resolution: "uuid@npm:3.4.0"
   bin: