From 234b67fe98c6167e4f83f43e11942a9e937c2a60 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 7 Jun 2022 17:10:43 +0200
Subject: 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.
---
 src/components/molecules/layout/code.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'src/components/molecules/layout/code.tsx')

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
@@ -6,6 +6,10 @@ import { FC, useRef } from 'react';
 import styles from './code.module.scss';
 
 export type CodeProps = {
+  /**
+   * An accessible name.
+   */
+  'aria-label'?: string;
   /**
    * The code to highlight.
    */
@@ -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>
-- 
cgit v1.2.3

