Merge pull request #273 from rebeccaalpert/customAria

fix(Message): Allow additional props on CodeMessage
patternfly · Nov 5, 2024 · 661745b · 661745b
2 parents c7b51b8 + b762b14
commit 661745b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx b/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx
@@ -11,7 +11,12 @@ import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import { ExtraProps } from 'react-markdown';
 
-const CodeBlockMessage = ({ children, className, ...props }: JSX.IntrinsicElements['code'] & ExtraProps) => {
+const CodeBlockMessage = ({
+  children,
+  className,
+  'aria-label': ariaLabel,
+  ...props
+}: JSX.IntrinsicElements['code'] & ExtraProps) => {
   const [copied, setCopied] = React.useState(false);
 
   const buttonRef = React.useRef();
@@ -51,7 +56,7 @@ const CodeBlockMessage = ({ children, className, ...props }: JSX.IntrinsicElemen
         {language && <div className="pf-chatbot__message-code-block-language">{language}</div>}
         <Button
           ref={buttonRef}
-          aria-label="Copy code button"
+          aria-label={ariaLabel ?? 'Copy code button'}
           variant="plain"
           className="pf-chatbot__button--copy"
           onClick={(event) => handleCopy(event, children)}

diff --git a/packages/module/src/Message/Message.tsx b/packages/module/src/Message/Message.tsx
@@ -54,6 +54,10 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   botWord?: string;
   /** Label for the English "Loading message," displayed to screenreaders when loading a message */
   loadingWord?: string;
+  codeBlockProps?: {
+    'aria-label'?: string;
+    className?: string;
+  };
 }
 
 export const Message: React.FunctionComponent<MessageProps> = ({
@@ -71,6 +75,7 @@ export const Message: React.FunctionComponent<MessageProps> = ({
   sources,
   botWord = 'AI',
   loadingWord = 'Loading message',
+  codeBlockProps,
   ...props
 }: MessageProps) => {
   // Configure default values
@@ -120,7 +125,7 @@ export const Message: React.FunctionComponent<MessageProps> = ({
               <Markdown
                 components={{
                   p: TextMessage,
-                  code: CodeBlockMessage,
+                  code: ({ children }) => <CodeBlockMessage {...codeBlockProps}>{children}</CodeBlockMessage>,
                   ul: UnorderedListMessage,
                   ol: OrderedListMessage,
                   li: ListItemMessage