Added title and h1 to page not found shared component (#30355)

src/applications/mhv-landing-page/tests/e2e/medical-records/temporary-landing-page.cypress.spec.js

@@ -30,7 +30,7 @@ describe(`${appName} -- transitional Medical Records page disabled`, () => {
   });
 
   it('renders not found page', () => {
-    cy.findByRole('heading', { level: 3, name: notFoundHeading });
+    cy.findByRole('heading', { name: notFoundHeading });
     cy.injectAxeThenAxeCheck();
   });
 });

src/platform/site-wide/user-nav/components/PageNotFound.jsx

@@ -1,9 +1,11 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-// Cypress does not like @ imports, so import record-event with a path
+// Cypress does not like @ imports, so import with a path instead
 import recordEventFn from '~/platform/monitoring/record-event';
+import { focusElement } from '~/platform/utilities/ui';
 
 export const notFoundHeading = 'Sorry — we can’t find that page';
+export const notFoundTitle = 'Page not found | Veterans Affairs';
 
 const PageNotFound = ({ recordEvent = recordEventFn } = {}) => {
   useEffect(
@@ -15,13 +17,18 @@ const PageNotFound = ({ recordEvent = recordEventFn } = {}) => {
     [recordEvent],
   );
 
+  useEffect(() => {
+    document.title = notFoundTitle;
+    focusElement('h1');
+  }, []);
+
   return (
     <>
       <div className="main maintenance-page vads-u-padding-top--4" role="main">
         <div className="primary">
           <div className="row">
-            <div className="usa-content vads-u-text-align--center vads-u-margin-x--auto">
-              <h3 id="sorry--we-cant-find-that-page">{notFoundHeading}</h3>
+            <div className="usa-content vads-u-text-align--center vads-u-margin-x--auto columns">
+              <h1 id="sorry--we-cant-find-that-page">{notFoundHeading}</h1>
               <p>Try the search box or one of the common questions below.</p>
               <div className="feature vads-u-display--flex vads-u-align-items--center">
                 <form

src/platform/site-wide/user-nav/tests/components/PageNotFound.unit.spec.jsx

@@ -2,14 +2,20 @@ import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import { expect } from 'chai';
 import sinon from 'sinon';
-import PageNotFound from '../../components/PageNotFound';
+import PageNotFound, {
+  notFoundHeading,
+  notFoundTitle,
+} from '../../components/PageNotFound';
 
 describe('PageNotFound Component', () => {
   it('renders', async () => {
     const recordEvent = sinon.spy();
     const props = { recordEvent };
     const { getByRole } = render(<PageNotFound {...props} />);
-    getByRole('heading', { name: /we can’t find that page/ });
+    const heading = getByRole('heading', { name: notFoundHeading });
+    expect(heading).to.exist;
+    expect(document.activeElement).to.eq(heading);
+    expect(document.title).to.eql(notFoundTitle);
     await waitFor(() => {
       expect(recordEvent.calledOnce).to.be.true;
       expect(recordEvent.calledWith({ event: 'nav-404-error' })).to.be.true;