summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/molecules/layout/code.stories.tsx13
-rw-r--r--src/components/molecules/layout/code.tsx6
m---------src/content0
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