Make it so the search help link is translatable

Author: louise-davies

packages/datagateway-search/cypress/e2e/searchBoxContainer.cy.ts

@@ -18,7 +18,7 @@ describe('SearchBoxContainer Component', () => {
     cy.get('#search-entities-menu').should('exist');
 
     cy.get('[aria-label="Submit search"]').should('exist');
-    cy.get('[aria-label="Search options"]').should('exist');
+    cy.findByRole('button', { name: 'search options' }).should('exist');
 
     cy.get('#search-entities-menu').click();
     cy.get('[aria-label="Investigation checkbox"]').should('exist');
@@ -79,7 +79,7 @@ describe('SearchBoxContainer Component', () => {
   });
 
   it('should display advanced help dialogue when advanced button is clicked', () => {
-    cy.get('[aria-label="Search options"]').click();
+    cy.findByRole('button', { name: 'search options' }).click();
 
     cy.get('[aria-labelledby="advanced-search-dialog-title"')
       .contains('Advanced Search Tips')
@@ -92,7 +92,7 @@ describe('SearchBoxContainer Component', () => {
     );
 
     //Should be able to click on one of the links
-    cy.get('[aria-label="Search options"]').click();
+    cy.findByRole('button', { name: 'search options' }).click();
 
     cy.get('[aria-labelledby="advanced-search-dialog-title"').contains(
       'Advanced Search Tips'

packages/datagateway-search/public/res/default.json

@@ -299,7 +299,7 @@
     "show_less": "Show less"
   },
   "advanced_search_help": {
-    "search_options_arialabel": "Search options",
+    "search_help_label": "See all <2>search options</2>.",
     "close_button_arialabel": "Close",
     "title": "Advanced Search Tips",
     "description": "Searching the metadata catalogue using one or more words should be intuitive, with the most relevant matches appearing first. However, there is a powerful syntax that supports more advanced use cases, which are described below.",

packages/datagateway-search/src/search/advancedHelpDialogue.component.test.tsx

@@ -69,11 +69,7 @@ describe('Advanced help dialogue', () => {
 
     renderComponent({ initialState: state });
 
-    await user.click(
-      screen.getByRole('button', {
-        name: 'advanced_search_help.search_options_arialabel',
-      })
-    );
+    await user.click(screen.getByTestId('advanced-search-help-link'));
 
     expect(
       screen.getByRole('dialog', { name: 'advanced_search_help.title' })
@@ -108,11 +104,7 @@ describe('Advanced help dialogue', () => {
 
     renderComponent({ initialState: state });
 
-    await user.click(
-      screen.getByRole('button', {
-        name: 'advanced_search_help.search_options_arialabel',
-      })
-    );
+    await user.click(screen.getByTestId('advanced-search-help-link'));
 
     expect(
       screen.getByRole('dialog', { name: 'advanced_search_help.title' })

packages/datagateway-search/src/search/advancedHelpDialogue.component.tsx

@@ -58,20 +58,22 @@ const AdvancedHelpDialogue = (): React.ReactElement => {
 
   return (
     <React.Fragment>
-      See all{' '}
-      <Link
-        component="button"
-        sx={{
-          fontSize: '14px',
-          fontWeight: 'bold',
-          verticalAlign: 'baseline',
-        }}
-        aria-label={t('advanced_search_help.search_options_arialabel')}
-        onClick={handleClickOpen}
-      >
-        search options
-      </Link>
-      .
+      <Trans t={t} i18nKey="advanced_search_help.search_help_label">
+        See all{' '}
+        <Link
+          component="button"
+          sx={{
+            fontSize: '14px',
+            fontWeight: 'bold',
+            verticalAlign: 'baseline',
+          }}
+          data-testid="advanced-search-help-link"
+          onClick={handleClickOpen}
+        >
+          search options
+        </Link>
+        .
+      </Trans>
       <Dialog
         onClose={handleClose}
         aria-labelledby="advanced-search-dialog-title"
@@ -156,7 +158,6 @@ const AdvancedHelpDialogue = (): React.ReactElement => {
                 </TableContainer>
               </Section>
             )}
-
           <Section>
             <SectionTitle>{t('advanced_search_help.terms.title')}</SectionTitle>
             <SectionText>