CCM-8873 Add hidden aria description to markdown examples and update snapshots

nicki-nhs · nicki-nhs · commit 6298c1e28c1f · 2025-04-10T15:35:58.000+01:00
diff --git a/frontend/src/__tests__/components/forms/EmailTemplateForm/__snapshots__/EmailTemplateForm.test.tsx.snap b/frontend/src/__tests__/components/forms/EmailTemplateForm/__snapshots__/EmailTemplateForm.test.tsx.snap
diff --git a/frontend/src/__tests__/components/forms/NhsAppTemplateForm/__snapshots__/NhsAppTemplateForm.test.tsx.snap b/frontend/src/__tests__/components/forms/NhsAppTemplateForm/__snapshots__/NhsAppTemplateForm.test.tsx.snap
diff --git a/frontend/src/__tests__/components/forms/SmsTemplateForm/__snapshots__/SmsTemplateForm.test.tsx.snap b/frontend/src/__tests__/components/forms/SmsTemplateForm/__snapshots__/SmsTemplateForm.test.tsx.snap
@@ -316,7 +316,15 @@ exports[`CreateSmsTemplate component renders page one error 1`] = `
             <p>
               For example:
             </p>
-            <code>
+            <span
+              class="nhsuk-u-visually-hidden"
+              id="link-url-description"
+            >
+              Markdown example:
+            </span>
+            <code
+              aria-describedby="link-url-description"
+            >
               https://www.nhs.uk/example
             </code>
           </div>
@@ -663,7 +671,15 @@ exports[`CreateSmsTemplate component renders page with back link if initial stat
             <p>
               For example:
             </p>
-            <code>
+            <span
+              class="nhsuk-u-visually-hidden"
+              id="link-url-description"
+            >
+              Markdown example:
+            </span>
+            <code
+              aria-describedby="link-url-description"
+            >
               https://www.nhs.uk/example
             </code>
           </div>
@@ -1046,7 +1062,15 @@ exports[`CreateSmsTemplate component renders page with multiple errors 1`] = `
             <p>
               For example:
             </p>
-            <code>
+            <span
+              class="nhsuk-u-visually-hidden"
+              id="link-url-description"
+            >
+              Markdown example:
+            </span>
+            <code
+              aria-describedby="link-url-description"
+            >
               https://www.nhs.uk/example
             </code>
           </div>
@@ -1371,7 +1395,15 @@ exports[`CreateSmsTemplate component renders page with no back link if initial s
             <p>
               For example:
             </p>
-            <code>
+            <span
+              class="nhsuk-u-visually-hidden"
+              id="link-url-description"
+            >
+              Markdown example:
+            </span>
+            <code
+              aria-describedby="link-url-description"
+            >
               https://www.nhs.uk/example
             </code>
           </div>
diff --git a/frontend/src/components/molecules/MessageFormatting/formats/BoldText.tsx b/frontend/src/components/molecules/MessageFormatting/formats/BoldText.tsx
@@ -1,7 +1,8 @@
 import { Details } from 'nhsuk-react-components';
 import content from '@content/content';
 
-const { boldText } = content.components.messageFormatting;
+const { boldText, hiddenCodeBlockDescription } =
+  content.components.messageFormatting;
 
 export const BoldText = () => (
   <Details data-testid='bold-text-details'>
@@ -10,7 +11,12 @@ export const BoldText = () => (
     </Details.Summary>
     <Details.Text data-testid='bold-text-text'>
       <p>{boldText.text}</p>
-      <code>{boldText.codeBlockText}</code>
+      <span id='bold-text-description' className='nhsuk-u-visually-hidden'>
+        {hiddenCodeBlockDescription}
+      </span>
+      <code aria-describedby='bold-text-description'>
+        {boldText.codeBlockText}
+      </code>
     </Details.Text>
   </Details>
 );
diff --git a/frontend/src/components/molecules/MessageFormatting/formats/BulletList.tsx b/frontend/src/components/molecules/MessageFormatting/formats/BulletList.tsx
@@ -2,7 +2,8 @@ import { Details } from 'nhsuk-react-components';
 import content from '@content/content';
 import styles from '../MessageFormatting.module.scss';
 
-const { bulletLists } = content.components.messageFormatting;
+const { bulletLists, hiddenCodeBlockDescription } =
+  content.components.messageFormatting;
 
 export const BulletList = () => (
   <Details data-testid='bullet-lists-details'>
@@ -11,7 +12,10 @@ export const BulletList = () => (
     </Details.Summary>
     <Details.Text data-testid='bullet-lists-text'>
       <p>{bulletLists.text}</p>
-      <code>
+      <span className='nhsuk-u-visually-hidden' id='bullet-list-description'>
+        {hiddenCodeBlockDescription}
+      </span>
+      <code aria-describedby='bullet-list-description'>
         {bulletLists.codeBlockText.map(({ id, item }) => (
           <span className={styles.inlineText} key={id}>
             {item}
diff --git a/frontend/src/components/molecules/MessageFormatting/formats/Headings.tsx b/frontend/src/components/molecules/MessageFormatting/formats/Headings.tsx
@@ -1,7 +1,8 @@
 import { Details } from 'nhsuk-react-components';
 import content from '@content/content';
 
-const { headings } = content.components.messageFormatting;
+const { headings, hiddenCodeBlockDescription } =
+  content.components.messageFormatting;
 
 export const Headings = () => (
   <Details data-testid='headings-details'>
@@ -10,9 +11,19 @@ export const Headings = () => (
     </Details.Summary>
     <Details.Text data-testid='headings-text'>
       <p>{headings.text1}</p>
-      <code>{headings.codeBlock.text1}</code>
-      <p>{headings.text2}</p>
-      <code>{headings.codeBlock.text2}</code>
+      <span className='nhsuk-u-visually-hidden' id='heading-description'>
+        {hiddenCodeBlockDescription}
+      </span>
+      <code aria-describedby='heading-description'>
+        {headings.codeBlock.text1}
+      </code>
+      <p className='nhsuk-u-margin-top-4'>{headings.text2}</p>
+      <span className='nhsuk-u-visually-hidden' id='subheading-description'>
+        {hiddenCodeBlockDescription}
+      </span>
+      <code aria-describedby='subheading-description'>
+        {headings.codeBlock.text2}
+      </code>
     </Details.Text>
   </Details>
 );
diff --git a/frontend/src/components/molecules/MessageFormatting/formats/HorizontalRule.tsx b/frontend/src/components/molecules/MessageFormatting/formats/HorizontalRule.tsx
@@ -2,7 +2,8 @@ import { Details } from 'nhsuk-react-components';
 import content from '@content/content';
 import styles from '../MessageFormatting.module.scss';
 
-const { horizontalLine } = content.components.messageFormatting;
+const { horizontalLine, hiddenCodeBlockDescription } =
+  content.components.messageFormatting;
 
 export const HorizontalRule = () => (
   <Details data-testid='horizontal-lines-details'>
@@ -11,7 +12,16 @@ export const HorizontalRule = () => (
     </Details.Summary>
     <Details.Text data-testid='horizontal-lines-text'>
       <p>{horizontalLine.text}</p>
-      <code className={styles.horizontalLine}>
+      <span
+        className='nhsuk-u-visually-hidden'
+        id='horizontal-rule-description'
+      >
+        {hiddenCodeBlockDescription}
+      </span>
+      <code
+        className={styles.horizontalLine}
+        aria-describedby='horizontal-rule-description'
+      >
         {horizontalLine.codeBlockText.map(({ id, item }) => (
           <p key={id}>{item}</p>
         ))}
diff --git a/frontend/src/components/molecules/MessageFormatting/formats/LineBreaksAndParagraphs.tsx b/frontend/src/components/molecules/MessageFormatting/formats/LineBreaksAndParagraphs.tsx
@@ -2,7 +2,8 @@ import { Details } from 'nhsuk-react-components';
 import content from '@content/content';
 import styles from '../MessageFormatting.module.scss';
 
-const { lineBreaksAndParagraphs } = content.components.messageFormatting;
+const { lineBreaksAndParagraphs, hiddenCodeBlockDescription } =
+  content.components.messageFormatting;
 
 export const LineBreaksAndParagraphs = () => (
   <Details data-testid='lines-breaks-and-paragraphs-details'>
@@ -11,15 +12,27 @@ export const LineBreaksAndParagraphs = () => (
     </Details.Summary>
     <Details.Text data-testid='lines-breaks-and-paragraphs-text'>
       <p>{lineBreaksAndParagraphs.text1}</p>
-      <code>
+      <span className='nhsuk-u-visually-hidden' id='linebreak-description'>
+        {hiddenCodeBlockDescription}
+      </span>
+      <code aria-describedby='linebreak-description'>
         {lineBreaksAndParagraphs.codeBlockText.map(({ id, item }) => (
           <span className={styles.inlineText} key={id}>
             {item}&nbsp;&nbsp;
           </span>
         ))}
       </code>
       <p className='nhsuk-u-margin-top-4'>{lineBreaksAndParagraphs.text2}</p>
-      <code className={styles.codeLine}>
+      <span
+        className='nhsuk-u-visually-hidden'
+        id='paragraph-break-description'
+      >
+        {hiddenCodeBlockDescription}
+      </span>
+      <code
+        className={styles.codeLine}
+        aria-describedby='paragraph-break-description'
+      >
         {lineBreaksAndParagraphs.codeBlockText.map(({ id, item }) => (
           <p key={id}>{item}</p>
         ))}
diff --git a/frontend/src/components/molecules/MessageFormatting/formats/LinksAndUrls.tsx b/frontend/src/components/molecules/MessageFormatting/formats/LinksAndUrls.tsx
@@ -2,7 +2,8 @@ import { Details } from 'nhsuk-react-components';
 import content from '@content/content';
 import { JSX } from 'react';
 
-const { linksAndUrls } = content.components.messageFormatting;
+const { linksAndUrls, hiddenCodeBlockDescription } =
+  content.components.messageFormatting;
 
 const LinksAndUrls = ({ children }: { children?: JSX.Element }) => (
   <Details data-testid='link-and-url-details'>
@@ -12,7 +13,12 @@ const LinksAndUrls = ({ children }: { children?: JSX.Element }) => (
     <Details.Text data-testid='link-and-url-text'>
       <p>{linksAndUrls.text1}</p>
       <p>{linksAndUrls.text2}</p>
-      <code>{linksAndUrls.codeBlockText.text1}</code>
+      <span className='nhsuk-u-visually-hidden' id='link-url-description'>
+        {hiddenCodeBlockDescription}
+      </span>
+      <code aria-describedby='link-url-description'>
+        {linksAndUrls.codeBlockText.text1}
+      </code>
       {children}
     </Details.Text>
   </Details>
@@ -25,7 +31,15 @@ export const LinksAndUrlsMarkdown = () => (
     <>
       <p className='nhsuk-u-margin-top-4'>{linksAndUrls.text3}</p>
       <p>{linksAndUrls.text4}</p>
-      <code>{linksAndUrls.codeBlockText.text2}</code>
+      <span
+        className='nhsuk-u-visually-hidden'
+        id='link-url-markdown-description'
+      >
+        {hiddenCodeBlockDescription}
+      </span>
+      <code aria-describedby='link-url-markdown-description'>
+        {linksAndUrls.codeBlockText.text2}
+      </code>
     </>
   </LinksAndUrls>
 );
diff --git a/frontend/src/components/molecules/MessageFormatting/formats/NumberedList.tsx b/frontend/src/components/molecules/MessageFormatting/formats/NumberedList.tsx
@@ -2,7 +2,8 @@ import { Details } from 'nhsuk-react-components';
 import content from '@content/content';
 import styles from '../MessageFormatting.module.scss';
 
-const { numberedLists } = content.components.messageFormatting;
+const { numberedLists, hiddenCodeBlockDescription } =
+  content.components.messageFormatting;
 
 export const NumberedList = () => (
   <Details data-testid='numbered-list-details'>
@@ -11,7 +12,10 @@ export const NumberedList = () => (
     </Details.Summary>
     <Details.Text data-testid='numbered-list-text'>
       <p>{numberedLists.text}</p>
-      <code>
+      <span className='nhsuk-u-visually-hidden' id='numbered-list-description'>
+        {hiddenCodeBlockDescription}
+      </span>
+      <code aria-describedby='numbered-list-description'>
         {numberedLists.codeBlockText.map(({ id, item }) => (
           <span className={styles.inlineText} key={id}>
             {item}
