chore: add an aria label to code blocks

Prism is adding a tabindex to code blocks, so I think an aria label
can help screen reader users to identify the tabbed content.

3 files changed, 19 insertions, 0 deletions

diff --git a/src/components/molecules/layout/code.stories.tsx b/src/components/molecules/layout/code.stories.tsx
index ac0e98f..c3fbf22 100644
--- a/src/components/molecules/layout/code.stories.tsx
+++ b/src/components/molecules/layout/code.stories.tsx
@@ -12,6 +12,19 @@ export default {
     outputPattern: '#output#',
   },
   argTypes: {
+    'aria-label': {
+      control: {
+        type: 'text',
+      },
+      description: 'An accessible name for the code sample.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     children: {
       control: {
         type: 'text',
diff --git a/src/components/molecules/layout/code.tsx b/src/components/molecules/layout/code.tsx
index 30351b9..7e249d1 100644
--- a/src/components/molecules/layout/code.tsx
+++ b/src/components/molecules/layout/code.tsx
@@ -7,6 +7,10 @@ import styles from './code.module.scss';
 
 export type CodeProps = {
   /**
+   * An accessible name.
+   */
+  'aria-label'?: string;
+  /**
    * The code to highlight.
    */
   children: string;
@@ -39,6 +43,7 @@ const Code: FC<CodeProps> = ({
   language,
   plugins = [],
   outputPattern = '#output#',
+  ...props
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const { attributes, className } = usePrism({ language, plugins });
@@ -54,6 +59,7 @@ const Code: FC<CodeProps> = ({
         tabIndex={0}
         {...attributes}
         {...outputAttribute}
+        {...props}
       >
         <code className={`language-${language}`}>{children}</code>
       </pre>
diff --git a/src/content b/src/content
-Subproject 742cb70a219b324d8e4d9b7f0f48627984b5995
+Subproject 9779d137a71eb20e82581f2a5f83300891e923c