diff options
| -rw-r--r-- | src/components/molecules/layout/code.stories.tsx | 13 | ||||
| -rw-r--r-- | src/components/molecules/layout/code.tsx | 6 | ||||
| m--------- | src/content | 0 |
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 |
