Replace withTranslation HOC with hooks.

__tests__/src/components/AccessTokenSender.test.js

@@ -7,7 +7,6 @@ import { AccessTokenSender } from '../../../src/components/AccessTokenSender';
 function createWrapper(props) {
   return render(
     <AccessTokenSender
-      t={key => key}
       handleAccessTokenMessage={() => {}}
       {...props}
     />,

__tests__/src/components/AnnotationSettings.test.js

@@ -8,7 +8,6 @@ function createWrapper(props) {
     <AnnotationSettings
       displayAll={false}
       displayAllDisabled={false}
-      t={k => k}
       toggleAnnotationDisplay={() => {}}
       windowId="abc123"
       {...props}

__tests__/src/components/AnnotationsOverlay.test.js

@@ -25,7 +25,6 @@ const createWrapper = (props) => {
       windowId="base"
       config={{}}
       updateViewport={jest.fn()}
-      t={k => k}
       canvasWorld={new CanvasWorld(canvases)}
       {...props}
     />

__tests__/src/components/AttributionPanel.test.js

@@ -12,7 +12,6 @@ function createWrapper(props) {
   return render(
     <AttributionPanel
       id="xyz"
-      t={str => str}
       windowId="window"
       {...props}
     />,
@@ -34,14 +33,14 @@ describe('AttributionPanel', () => {
   it('renders the rights statement', () => {
     createWrapper({ rights: ['http://example.com', 'http://stanford.edu'] });
 
-    expect(screen.getByText('rights')).toBeInTheDocument();
+    expect(screen.getByText('License')).toBeInTheDocument();
     expect(screen.getByRole('link', { name: 'http://example.com' })).toHaveAttribute('href', 'http://example.com');
     expect(screen.getByRole('link', { name: 'http://stanford.edu' })).toHaveAttribute('href', 'http://stanford.edu');
   });
 
   it('does not render the rights statement if it is empty', () => {
     createWrapper({ rights: [] });
-    expect(screen.queryByText('rights')).not.toBeInTheDocument();
+    expect(screen.queryByText('License')).not.toBeInTheDocument();
   });
 
   // Requires canvas to handle img loading.

__tests__/src/components/Branding.test.js

@@ -12,7 +12,7 @@ describe('Branding', () => {
   it('renders additional items for the wide variant', () => {
     render(<Branding variant="wide" />);
 
-    expect(screen.getByText('mirador')).toBeInTheDocument();
+    expect(screen.getByText('Mirador')).toBeInTheDocument();
     expect(screen.getByRole('link')).toBeInTheDocument();
   });
 });

__tests__/src/components/CanvasAnnotations.test.js

@@ -1,6 +1,5 @@
 import { render, screen } from 'test-utils';
 import userEvent from '@testing-library/user-event';
-import { t } from 'i18next';
 
 import { CanvasAnnotations } from '../../../src/components/CanvasAnnotations';
 import { ScrollTo } from '../../../src/components/ScrollTo';
@@ -15,7 +14,6 @@ function createWrapper(props) {
       index={0}
       label="A Canvas Label"
       selectAnnotation={() => {}}
-      t={t}
       totalSize={1}
       windowId="abc"
       {...props}

__tests__/src/components/CanvasInfo.test.js

@@ -15,13 +15,12 @@ describe('CanvasInfo', () => {
           canvasDescription="The Canvas Description"
           canvasMetadata={metadata}
           id="xyz"
-          t={str => str}
         />,
       );
     });
 
     it('renders the content in a CollapsibleSection', async () => {
-      expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('currentItem');
+      expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Current item');
       expect(screen.getByRole('heading', { level: 5 })).toHaveTextContent(/The Canvas Label/);
 
       await user.click(screen.getByRole('button'));

__tests__/src/components/CanvasLayers.test.js

@@ -14,7 +14,6 @@ function createWrapper(props) {
       label="A Canvas Label"
       layerMetadata={{}}
       layers={[]}
-      t={t => t}
       totalSize={1}
       updateLayers={() => {}}
       windowId="abc"
@@ -28,7 +27,7 @@ describe('CanvasLayers', () => {
     it('displays the canvas label', () => {
       createWrapper({ totalSize: 2 });
 
-      expect(screen.getByText('annotationCanvasLabel', { container: '.MuiTypography-overline' })).toBeInTheDocument();
+      expect(screen.getByText('Left: [A Canvas Label]', { container: '.MuiTypography-overline' })).toBeInTheDocument();
     });
   });
 
@@ -44,9 +43,9 @@ describe('CanvasLayers', () => {
     expect(screen.getAllByRole('listitem')[0]).toHaveTextContent('1');
     expect(screen.getAllByRole('listitem')[1]).toHaveTextContent('2');
 
-    expect(screen.getAllByRole('button', { name: 'layer_hide' }).length).toEqual(2);
-    expect(screen.getAllByRole('button', { name: 'layer_moveToTop' }).length).toEqual(2);
-    expect(screen.getAllByRole('spinbutton', { name: 'layer_opacity' }).length).toEqual(2);
+    expect(screen.getAllByRole('button', { name: 'Hide layer' }).length).toEqual(2);
+    expect(screen.getAllByRole('button', { name: 'Move layer to top' }).length).toEqual(2);
+    expect(screen.getAllByRole('spinbutton', { name: 'Layer opacity' }).length).toEqual(2);
   });
 
   it('handles drag + drop of layers', async () => {
@@ -99,7 +98,7 @@ describe('CanvasLayers', () => {
     });
 
     it('has a button for moving a layer to the top', async () => {
-      await user.click(screen.getAllByLabelText('layer_moveToTop')[1]);
+      await user.click(screen.getAllByLabelText('Move layer to top')[1]);
 
       expect(updateLayers).toHaveBeenCalledWith('abc', 'https://prtd.app/hamilton/canvas/p1.json', {
         'https://prtd.app/image/iiif/2/hamilton%2fHL_524_1r_00_PSC/full/862,1024/0/default.jpg': {
@@ -112,7 +111,7 @@ describe('CanvasLayers', () => {
     });
 
     it('has a button for toggling visibility', async () => {
-      await user.click(screen.getAllByLabelText('layer_hide')[1]);
+      await user.click(screen.getAllByLabelText('Hide layer')[1]);
 
       expect(updateLayers).toHaveBeenCalledWith('abc', 'https://prtd.app/hamilton/canvas/p1.json', {
         'https://prtd.app/image/iiif/2/hamilton%2fHL_524_1r_00_TS_Blue/full/862,1024/0/default.png': {

__tests__/src/components/ChangeThemeDialog.test.js

@@ -12,7 +12,6 @@ function createWrapper(props) {
       handleClose={() => {}}
       open
       setSelectedTheme={() => {}}
-      t={t => (t)}
       selectedTheme="light"
       themeIds={['light', 'dark']}
       {...props}
@@ -37,16 +36,16 @@ describe('ChangeThemeDialog', () => {
     const menuItems = screen.queryAllByRole('menuitem');
 
     expect(menuItems.length).toBe(2);
-    expect(menuItems[0]).toHaveTextContent('light');
-    expect(menuItems[1]).toHaveTextContent('dark');
+    expect(menuItems[0]).toHaveTextContent('Light theme');
+    expect(menuItems[1]).toHaveTextContent('Dark theme');
   });
 
   it('shows up theme selection properly', async () => {
     const user = userEvent.setup();
     const setSelectedTheme = jest.fn();
 
     createWrapper({ setSelectedTheme });
-    const menuItem = screen.getByRole('menuitem', { name: 'light' });
+    const menuItem = screen.getByRole('menuitem', { name: 'Light theme' });
     expect(menuItem).toBeInTheDocument();
 
     await user.click(menuItem);
@@ -58,7 +57,7 @@ describe('ChangeThemeDialog', () => {
     it('focuses the selected item', () => {
       createWrapper({ selectedTheme: 'light' });
 
-      const menuItem = screen.getByRole('menuitem', { name: 'light' });
+      const menuItem = screen.getByRole('menuitem', { name: 'Light theme' });
       expect(menuItem).toHaveFocus();
     });
   });

__tests__/src/components/CollapsibleSection.test.js

@@ -11,7 +11,6 @@ function createWrapper(props) {
       classes={{}}
       id="abc123"
       label="The Section Label"
-      t={k => k}
       {...props}
     >
       <span data-testid="child">Child content</span>
@@ -29,9 +28,9 @@ describe('CollapsibleSection', () => {
   });
 
   it('renders the appropriate i18n label based on open state', async () => {
-    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'collapseSection');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Collapse "The Section Label" section');
     await userEvent.click(screen.getByRole('button'));
-    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'expandSection');
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Expand "The Section Label" section');
   });
 
   it('displays children based on the open state', async () => {

__tests__/src/components/CollectionDialog.test.js

@@ -17,7 +17,6 @@ function createWrapper(props) {
       classes={{}}
       ready
       manifest={manifest}
-      t={(key) => key}
       windowId="window"
       {...props}
     />,
@@ -45,7 +44,7 @@ describe('CollectionDialog', () => {
     const hideCollectionDialog = jest.fn();
     createWrapper({ hideCollectionDialog });
 
-    await user.click(screen.getByRole('button', { name: 'close' }));
+    await user.click(screen.getByRole('button', { name: 'Close' }));
     expect(hideCollectionDialog).toHaveBeenCalled();
   });
 });

__tests__/src/components/CollectionInfo.test.js

@@ -19,12 +19,12 @@ describe('CollectionInfo', () => {
     const user = userEvent.setup();
     createWrapper();
 
-    expect(screen.getByRole('heading', { name: 'collection' })).toBeVisible();
-    expect(screen.getByRole('button', { name: 'showCollection' })).toBeVisible();
+    expect(screen.getByRole('heading', { name: 'Collection' })).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Show collection' })).toBeVisible();
 
-    await user.click(screen.getByRole('button', { name: 'collapseSection' }));
+    await user.click(screen.getByRole('button', { name: 'Collapse "Collection" section' }));
 
-    expect(screen.queryByRole('button', { name: 'showCollection' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Show collection' })).not.toBeInTheDocument();
   });
   it('without a collectionPath, renders nothing', () => {
     const wrapper = createWrapper({ collectionPath: [] });
@@ -36,7 +36,7 @@ describe('CollectionInfo', () => {
 
     createWrapper({ showCollectionDialog });
 
-    await user.click(screen.getByRole('button', { name: 'showCollection' }));
+    await user.click(screen.getByRole('button', { name: 'Show collection' }));
     expect(showCollectionDialog).toHaveBeenCalled();
   });
 });

__tests__/src/components/CompanionArea.test.js

@@ -13,7 +13,6 @@ function createWrapper(props) {
       position="right"
       companionAreaOpen
       companionWindowIds={['foo', 'baz']}
-      t={key => key}
       {...props}
     />,
     { preloadedState: { companionWindows: { baz: { content: 'attribution' }, foo: { content: 'info' } } } },
@@ -36,8 +35,8 @@ describe('CompanionArea', () => {
   it('renders the appropriate <CompanionWindow> components', () => {
     createWrapper();
 
-    expect(screen.getByRole('heading', { name: 'aboutThisItem' })).toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: 'attributionTitle' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'About this item' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Rights' })).toBeInTheDocument();
   });
 
   it('has a toggle to show the companion area window in the left position', async () => {
@@ -51,10 +50,10 @@ describe('CompanionArea', () => {
       sideBarOpen: true,
     });
 
-    expect(screen.getByRole('button', { name: 'expandSidePanel' })).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.getByRole('button', { name: 'Expand sidebar' })).toHaveAttribute('aria-expanded', 'false');
     expect(screen.queryByRole('complementary')).not.toBeInTheDocument();
 
-    await user.click(screen.getByRole('button', { name: 'expandSidePanel' }));
+    await user.click(screen.getByRole('button', { name: 'Expand sidebar' }));
 
     expect(setCompanionAreaOpen).toHaveBeenCalledWith('abc123', true);
   });
@@ -70,8 +69,8 @@ describe('CompanionArea', () => {
       sideBarOpen: true,
     });
 
-    expect(screen.getByRole('button', { name: 'collapseSidePanel' })).toHaveAttribute('aria-expanded', 'true');
-    await user.click(screen.getByRole('button', { name: 'collapseSidePanel' }));
+    expect(screen.getByRole('button', { name: 'Collapse sidebar' })).toHaveAttribute('aria-expanded', 'true');
+    await user.click(screen.getByRole('button', { name: 'Collapse sidebar' }));
 
     expect(setCompanionAreaOpen).toHaveBeenCalledWith('abc123', false);
   });
@@ -84,7 +83,7 @@ describe('CompanionArea', () => {
       sideBarOpen: false,
     });
 
-    expect(screen.queryByRole('button', { name: 'collapseSidePanel' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Collapse sidebar' })).not.toBeInTheDocument();
   });
 
   it('does not show a toggle in other positions', () => {
@@ -95,6 +94,6 @@ describe('CompanionArea', () => {
       sideBarOpen: true,
     });
 
-    expect(screen.queryByRole('button', { name: 'collapseSidePanel' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Collapse sidebar' })).not.toBeInTheDocument();
   });
 });

__tests__/src/components/CompanionWindow.test.js

@@ -42,7 +42,7 @@ describe('CompanionWindow', () => {
         updateCompanionWindow,
       });
 
-      await user.click(screen.getByRole('button', { name: 'openInCompanionWindow' }));
+      await user.click(screen.getByRole('button', { name: 'Open in separate panel' }));
 
       expect(updateCompanionWindow).toHaveBeenCalledWith({ position: 'right' });
     });
@@ -57,7 +57,7 @@ describe('CompanionWindow', () => {
         onCloseClick: removeCompanionWindowEvent,
       });
 
-      await user.click(screen.getByRole('button', { name: 'closeCompanionWindow' }));
+      await user.click(screen.getByRole('button', { name: 'Close panel' }));
 
       expect(removeCompanionWindowEvent).toHaveBeenCalledTimes(1);
     });
@@ -97,7 +97,7 @@ describe('CompanionWindow', () => {
 
       expect(screen.getByRole('complementary')).toHaveClass('mirador-companion-window-right');
 
-      await user.click(screen.getByRole('button', { name: 'moveCompanionWindowToBottom' }));
+      await user.click(screen.getByRole('button', { name: 'Move to bottom' }));
 
       expect(updateCompanionWindow).toHaveBeenCalledWith({ position: 'bottom' });
     });
@@ -115,7 +115,7 @@ describe('CompanionWindow', () => {
 
       expect(screen.getByRole('complementary')).toHaveClass('mirador-companion-window-bottom ');
 
-      await user.click(screen.getByRole('button', { name: 'moveCompanionWindowToRight' }));
+      await user.click(screen.getByRole('button', { name: 'Move to right' }));
 
       expect(updateCompanionWindow).toHaveBeenCalledWith({ position: 'right' });
     });

__tests__/src/components/CompanionWindowFactory.test.js

@@ -22,7 +22,7 @@ describe('CompanionWindowFactory', () => {
         content: 'info',
       });
 
-      expect(screen.getByRole('heading', { level: 3 })).toHaveAccessibleName('aboutThisItem');
+      expect(screen.getByRole('heading', { level: 3 })).toHaveAccessibleName('About this item');
     });
   });
 
@@ -32,7 +32,7 @@ describe('CompanionWindowFactory', () => {
         content: 'canvas',
       });
 
-      expect(screen.getByRole('heading', { level: 3 })).toHaveAccessibleName('canvasIndex');
+      expect(screen.getByRole('heading', { level: 3 })).toHaveAccessibleName('Index');
     });
   });
 
@@ -42,7 +42,7 @@ describe('CompanionWindowFactory', () => {
         content: 'annotations',
       });
 
-      expect(screen.getByRole('heading', { level: 3 })).toHaveAccessibleName('annotations');
+      expect(screen.getByRole('heading', { level: 3 })).toHaveAccessibleName('Annotations');
     });
   });
 
@@ -52,7 +52,7 @@ describe('CompanionWindowFactory', () => {
         content: 'attribution',
       });
 
-      expect(screen.getByRole('heading', { level: 3 })).toHaveAccessibleName('attributionTitle');
+      expect(screen.getByRole('heading', { level: 3 })).toHaveAccessibleName('Rights');
     });
   });
 
@@ -62,7 +62,7 @@ describe('CompanionWindowFactory', () => {
         content: 'thumbnailNavigation',
       });
 
-      expect(screen.getByRole('grid')).toHaveAccessibleName('thumbnailNavigation');
+      expect(screen.getByRole('grid')).toHaveAccessibleName('Thumbnails');
     });
   });
 
@@ -72,7 +72,7 @@ describe('CompanionWindowFactory', () => {
         content: 'search',
       });
 
-      expect(screen.getByRole('heading', { level: 3 })).toHaveAccessibleName('searchTitle');
+      expect(screen.getByRole('heading', { level: 3 })).toHaveAccessibleName('Search');
     });
   });
 
@@ -82,7 +82,7 @@ describe('CompanionWindowFactory', () => {
         content: 'layers',
       });
 
-      expect(screen.getByRole('heading', { level: 3 })).toHaveAccessibleName('layers');
+      expect(screen.getByRole('heading', { level: 3 })).toHaveAccessibleName('Layers');
     });
   });
 });