CCM-8859: Update accessibility text for logo link (#420)

Author: nicki-nhs

frontend/src/__tests__/components/molecules/Header.test.tsx

@@ -12,11 +12,21 @@ jest.mocked(useAuthenticator).mockReturnValue(
 );
 
 describe('Header component', () => {
-  it('renders component correctly', () => {
+  it('should contain the logo', () => {
     render(<NHSNotifyHeader />);
 
-    expect(screen.getByTestId('page-header')).toBeInTheDocument();
     expect(screen.getByTestId('page-header-logo')).toBeInTheDocument();
+  });
+
+  it('should contain an authentication link', () => {
+    render(<NHSNotifyHeader />);
+
     expect(screen.getByTestId('auth-link')).toBeInTheDocument();
   });
+
+  it('should render correctly', () => {
+    const container = render(<NHSNotifyHeader />);
+
+    expect(container.asFragment()).toMatchSnapshot();
+  });
 });

frontend/src/__tests__/components/molecules/__snapshots__/Header.test.tsx.snap

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header component should render correctly 1`] = `
+<DocumentFragment>
+  <header
+    class="nhsuk-header"
+    data-testid="page-header"
+    role="banner"
+  >
+    <div
+      class="nhsuk-header__container header__container"
+    >
+      <div
+        class="nhsuk-header__logo"
+      >
+        <a
+          aria-label="NHS Notify templates"
+          class="nhsuk-header__link nhsuk-header__link--service"
+          href="/create-and-submit-templates"
+        >
+          <svg
+            class="nhsuk-logo"
+            data-testid="page-header-logo"
+            height="40"
+            role="img"
+            viewBox="0 0 40 16"
+            width="100"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>
+              NHS logo
+            </title>
+            <path
+              class="nhsuk-logo__background"
+              d="M0 0h40v16H0z"
+              fill="#005eb8"
+            />
+            <path
+              class="nhsuk-logo__text"
+              d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"
+              fill="#fff"
+            />
+          </svg>
+          <span
+            class="nhsuk-header__service-name"
+          >
+            Notify
+          </span>
+        </a>
+      </div>
+      <div
+        class="nhsuk-header__content"
+        id="content-header"
+      >
+        <div
+          class="auth-link"
+          data-testid="auth-link"
+        >
+          <a
+            class="auth-link__link"
+            data-testid="auth-link__link"
+            href="/auth?redirect=%2Ftemplates%2Fcreate-and-submit-templates"
+            id="sign-in-link"
+          >
+            Sign in
+          </a>
+        </div>
+      </div>
+    </div>
+  </header>
+</DocumentFragment>
+`;

frontend/src/components/molecules/Header/Header.tsx

@@ -22,16 +22,20 @@ export function NHSNotifyHeader({ dataTestId }: HeaderType) {
           <Link
             className='nhsuk-header__link nhsuk-header__link--service'
             href='/create-and-submit-templates'
-            aria-label='NHS Notify'
+            aria-label={content.components.header.links.logoLink.ariaLabel}
           >
             <svg
               className='nhsuk-logo'
+              role='img'
               xmlns='http://www.w3.org/2000/svg'
               viewBox='0 0 40 16'
               height='40'
               width='100'
               data-testid='page-header-logo'
             >
+              <title>
+                {content.components.header.links.logoLink.logoTitle}
+              </title>
               <path
                 className='nhsuk-logo__background'
                 fill='#005eb8'

frontend/src/content/content.ts

@@ -17,6 +17,10 @@ const header = {
       text: 'Sign out',
       href: '/auth/signout',
     },
+    logoLink: {
+      ariaLabel: 'NHS Notify templates',
+      logoTitle: 'NHS logo',
+    },
   },
 };