PRM-54: WCAG 2.4.3 focus order: view full screen button is out of order (#605)

* [PRM-54] Moved header component above view in fullscreen for view record

* [PRM-54] Adds inline display for header and fullscreen button to match old styling

Author: jack-nhs

app/src/components/generic/recordCard/RecordCard.tsx

@@ -62,9 +62,16 @@ function RecordCard({
                         data-testid="pdf-card"
                         className="lloydgeorge_record-stage_pdf-content"
                     >
+                        <Card.Heading
+                            className="lloydgeorge_record-stage_pdf-content-label"
+                            headingLevel="h2"
+                            tabIndex={0}
+                        >
+                            {heading}
+                        </Card.Heading>
                         {cloudFrontUrl && (
                             <button
-                                className="lloydgeorge_record-stage_pdf-content-button link-button clickable"
+                                className="lloydgeorge_record-stage_pdf-content-button link-button clickable full-screen"
                                 data-testid="full-screen-btn"
                                 onClick={() => {
                                     fullScreenHandler(true);
@@ -74,12 +81,7 @@ function RecordCard({
                                 View in full screen
                             </button>
                         )}
-                        <Card.Heading
-                            className="lloydgeorge_record-stage_pdf-content-label"
-                            headingLevel="h2"
-                        >
-                            {heading}
-                        </Card.Heading>
+
                         {detailsElement}
 
                         <RecordMenuCard

app/src/styles/App.scss

@@ -303,6 +303,7 @@ $hunit: '%';
                     max-width: calc(100% - 130px);
                     word-wrap: break-word;
                     overflow-wrap: break-word;
+                    display: inline;
                 }
 
                 p {
@@ -828,6 +829,10 @@ $hunit: '%';
     cursor: pointer;
 }
 
+.full-screen {
+    display: inline;
+}
+
 .table-column-header {
     font-size: 1.5rem;
 }