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 | 
