CCM-8873 Add personalisation copy

Author: nicki-nhs

frontend/src/components/molecules/Personalisation/Personalisation.tsx

@@ -15,7 +15,15 @@ export function Personalisation() {
         </Details.Summary>
         <Details.Text data-testid='personalisation-text'>
           <p>{personalisationContent.details.text1}</p>
-          <code>{personalisationContent.details.codeBlockText}</code>
+          <span
+            id='personalisation-description'
+            className='nhsuk-u-visually-hidden'
+          >
+            {personalisationContent.hiddenCodeBlockDescription}
+          </span>
+          <code aria-describedby='personalisation-description'>
+            {personalisationContent.details.codeBlockText}
+          </code>
           <p className='nhsuk-u-margin-top-4'>
             {personalisationContent.details.text2}
           </p>

frontend/src/content/content.ts

@@ -49,6 +49,7 @@ const footer = {
 
 const personalisation = {
   header: 'Personalisation',
+  hiddenCodeBlockDescription: 'An example of personalised message content:',
   details: {
     title: 'Personalisation fields',
     text1:
@@ -77,7 +78,7 @@ const personalisation = {
 
 const messageFormatting = {
   header: 'Message formatting',
-  hiddenCodeBlockDescription: 'Markdown example:',
+  hiddenCodeBlockDescription: 'An example of markdown:',
   lineBreaksAndParagraphs: {
     title: 'Line breaks and paragraphs',
     text1: