Replace react-aria-live with @react-aria/live-announcer

Author: cbeer

__tests__/src/components/SearchHit.test.js

@@ -82,6 +82,7 @@ describe('SearchHit', () => {
       wrapper.setProps({ selected: true });
       expect(announcer).toHaveBeenCalledWith(
         'pagination The Canvas Label The Annotation Label Light up the moose , and start the chai',
+        'polite',
       );
     });
 

__tests__/src/components/SearchResults.test.js

@@ -30,18 +30,16 @@ describe('SearchResults', () => {
   it('renders a SearchHit for each hit', () => {
     const selectContentSearchAnnotation = jest.fn();
     const wrapper = createWrapper({ selectContentSearchAnnotation });
-    const searchHits = wrapper.find('LiveMessenger').props().children({});
-
+    const searchHits = wrapper.find('Connect(WithStyles(WithPlugins(SearchHit)))');
     expect(searchHits.length).toEqual(1);
-    expect(searchHits[0].type.displayName).toEqual('Connect(WithStyles(WithPlugins(SearchHit)))');
-    expect(searchHits[0].props.index).toEqual(0);
+    expect(searchHits.first().props().index).toEqual(0);
   });
 
   it('can focus on a single item', () => {
     const wrapper = createWrapper({});
-    const searchHits = wrapper.find('LiveMessenger').props().children({});
+    const searchHits = wrapper.find('Connect(WithStyles(WithPlugins(SearchHit)))');
 
-    searchHits[0].props.showDetails();
+    searchHits.first().props().showDetails();
     expect(wrapper.state().focused).toEqual(true);
   });
 
@@ -54,28 +52,20 @@ describe('SearchResults', () => {
     expect(wrapper.state().focused).toEqual(false);
   });
 
-  it('passes announcePolite function to the SearchHits', () => {
-    const announcePolite = jest.fn();
-    const wrapper = createWrapper({});
-    const searchHits = wrapper.find('LiveMessenger').props().children({ announcePolite });
-
-    expect(searchHits[0].props.announcer).toEqual(announcePolite);
-  });
-
   describe('annotation-only search results', () => {
     it('renders a SearchHit for each annotation', () => {
       const wrapper = createWrapper({
         searchAnnotations: [{ id: 'x' }, { id: 'y' }],
         searchHits: [],
       });
 
-      const searchHits = wrapper.find('LiveMessenger').props().children({});
+      const searchHits = wrapper.find('Connect(WithStyles(WithPlugins(SearchHit)))');
       expect(searchHits.length).toEqual(2);
-      expect(searchHits[0].props.index).toEqual(0);
-      expect(searchHits[0].props.annotationId).toEqual('x');
+      expect(searchHits.get(0).props.index).toEqual(0);
+      expect(searchHits.get(0).props.annotationId).toEqual('x');
 
-      expect(searchHits[1].props.index).toEqual(1);
-      expect(searchHits[1].props.annotationId).toEqual('y');
+      expect(searchHits.get(1).props.index).toEqual(1);
+      expect(searchHits.get(1).props.annotationId).toEqual('y');
     });
   });
 

package.json

@@ -37,6 +37,7 @@
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.53",
+    "@react-aria/live-announcer": "^3.1.2",
     "classnames": "^2.2.6",
     "clsx": "^1.0.4",
     "deepmerge": "^4.2.2",
@@ -50,7 +51,6 @@
     "openseadragon": "^2.4.2 || ^3.0.0 || ^4.0.0",
     "prop-types": "^15.6.2",
     "re-reselect": "^4.0.0",
-    "react-aria-live": "^2.0.5",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dnd": "^10.0.2",
     "react-dnd-html5-backend": "^10.0.2",

src/components/AppProviders.js

@@ -2,7 +2,6 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 import { I18nextProvider } from 'react-i18next';
-import { LiveAnnouncer } from 'react-aria-live';
 import {
   ThemeProvider, StylesProvider, createTheme, jssPreset, createGenerateClassName,
 } from '@material-ui/core/styles';
@@ -115,20 +114,18 @@ export class AppProviders extends Component {
     return (
       <FullScreenShim>
         <I18nextProvider i18n={this.i18n}>
-          <LiveAnnouncer>
-            <ThemeProvider
-              theme={createTheme(theme)}
+          <ThemeProvider
+            theme={createTheme(theme)}
+          >
+            <StylesProvider
+              jss={create({ plugins: [...jssPreset().plugins, rtl()] })}
+              generateClassName={generateClassName}
             >
-              <StylesProvider
-                jss={create({ plugins: [...jssPreset().plugins, rtl()] })}
-                generateClassName={generateClassName}
-              >
-                <MaybeDndProvider dndManager={dndManager}>
-                  {children}
-                </MaybeDndProvider>
-              </StylesProvider>
-            </ThemeProvider>
-          </LiveAnnouncer>
+              <MaybeDndProvider dndManager={dndManager}>
+                {children}
+              </MaybeDndProvider>
+            </StylesProvider>
+          </ThemeProvider>
         </I18nextProvider>
       </FullScreenShim>
     );

src/components/SearchHit.js

@@ -55,17 +55,20 @@ export class SearchHit extends Component {
     const {
       annotation, annotationLabel, announcer, canvasLabel, hit, index, t, total,
     } = this.props;
-    if (!hit) return;
+    if (!hit || !announcer) return;
     const truncatedHit = new TruncatedHit(hit, annotation);
 
-    announcer([
-      t('pagination', { current: index + 1, total }),
-      canvasLabel,
-      annotationLabel,
-      truncatedHit.before,
-      truncatedHit.match,
-      truncatedHit.after,
-    ].join(' '));
+    announcer(
+      [
+        t('pagination', { current: index + 1, total }),
+        canvasLabel,
+        annotationLabel,
+        truncatedHit.before,
+        truncatedHit.match,
+        truncatedHit.after,
+      ].join(' '),
+      'polite',
+    );
   }
 
   /** */
@@ -157,7 +160,7 @@ SearchHit.propTypes = {
   }),
   annotationId: PropTypes.string,
   annotationLabel: PropTypes.string,
-  announcer: PropTypes.func.isRequired,
+  announcer: PropTypes.func,
   canvasLabel: PropTypes.string,
   classes: PropTypes.objectOf(PropTypes.string),
   companionWindowId: PropTypes.string,
@@ -186,6 +189,7 @@ SearchHit.defaultProps = {
   annotation: undefined,
   annotationId: undefined,
   annotationLabel: undefined,
+  announcer: undefined,
   canvasLabel: undefined,
   classes: {},
   companionWindowId: undefined,

src/components/SearchResults.js

@@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button';
 import List from '@material-ui/core/List';
 import Typography from '@material-ui/core/Typography';
 import BackIcon from '@material-ui/icons/ArrowBackSharp';
-import { LiveMessenger } from 'react-aria-live';
+import { announce } from '@react-aria/live-announcer';
 import SearchHit from '../containers/SearchHit';
 import { ScrollTo } from './ScrollTo';
 
@@ -32,7 +32,7 @@ export class SearchResults extends Component {
    * Return SearchHits for every hit in the response
    * Return SearchHits for every annotation in the response if there are no hits
    */
-  renderSearchHitsAndAnnotations(announcer) {
+  renderSearchHitsAndAnnotations() {
     const {
       companionWindowId,
       containerRef,
@@ -47,7 +47,7 @@ export class SearchResults extends Component {
     if (searchHits.length === 0 && searchAnnotations.length > 0) {
       return searchAnnotations.map((anno, index) => (
         <SearchHit
-          announcer={announcer}
+          announcer={announce}
           annotationId={anno.id}
           companionWindowId={companionWindowId}
           containerRef={containerRef}
@@ -63,7 +63,7 @@ export class SearchResults extends Component {
 
     return searchHits.map((hit, index) => (
       <SearchHit
-        announcer={announcer}
+        announcer={announce}
         containerRef={containerRef}
         companionWindowId={companionWindowId}
         key={hit.annotations[0]}
@@ -118,9 +118,7 @@ export class SearchResults extends Component {
           </Typography>
         )}
         <List disablePadding>
-          <LiveMessenger>
-            {({ announcePolite }) => this.renderSearchHitsAndAnnotations(announcePolite) }
-          </LiveMessenger>
+          { this.renderSearchHitsAndAnnotations() }
         </List>
         { nextSearch && (
           <Button