CCM-8873 Accessibility improvements for markdown examples (#411)

Author: nicki-nhs

frontend/src/__tests__/components/atoms/CodeExample.test.tsx

@@ -0,0 +1,28 @@
+import { render } from '@testing-library/react';
+import CodeExample from '@atoms/CodeExample/CodeExample';
+
+describe('CodeExample component', () => {
+  it('renders component correctly', () => {
+    const container = render(
+      <CodeExample ariaId='test-id' ariaText='This is an example of markdown:'>
+        # A test example
+      </CodeExample>
+    );
+
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('renders component correctly when optional class is provided', () => {
+    const container = render(
+      <CodeExample
+        ariaId='test-id'
+        ariaText='This is an example of markdown:'
+        codeClassName='test-class'
+      >
+        # A test example
+      </CodeExample>
+    );
+
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+});

frontend/src/__tests__/components/atoms/__snapshots__/CodeExample.test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CodeExample component renders component correctly 1`] = `
+<DocumentFragment>
+  <span
+    class="nhsuk-u-visually-hidden"
+    id="test-id"
+  >
+    This is an example of markdown:
+  </span>
+  <code
+    aria-describedby="test-id"
+  >
+    # A test example
+  </code>
+</DocumentFragment>
+`;
+
+exports[`CodeExample component renders component correctly when optional class is provided 1`] = `
+<DocumentFragment>
+  <span
+    class="nhsuk-u-visually-hidden"
+    id="test-id"
+  >
+    This is an example of markdown:
+  </span>
+  <code
+    aria-describedby="test-id"
+    class="test-class"
+  >
+    # A test example
+  </code>
+</DocumentFragment>
+`;