fix(AttachButton): Hide input from screenreaders (#426)

There is a required input for react-dropzone. We should hide it from screenreaders since it's not something users can interact with.
patternfly · Feb 7, 2025 · daeff64 · daeff64
1 parent b3af2fd
commit daeff64
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/...module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarAttach.tsx b/...module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarAttach.tsx
@@ -126,7 +126,7 @@ export const ChatbotMessageBarDefaultAttachExample: React.FunctionComponent = ()
   return (
     <>
       {/* this is required for react-dropzone to work in Safari and Firefox */}
-      <input {...getInputProps()} />
+      <input {...getInputProps()} hidden />
       <MessageBar
         onSendMessage={handleSend}
         attachMenuProps={{

diff --git a/...odule/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx b/...odule/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx
@@ -209,7 +209,7 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
   return (
     <>
       {/* this is required for react-dropzone to work in Safari and Firefox */}
-      <input {...getInputProps()} />
+      <input {...getInputProps()} hidden />
       <ChatbotToggle
         tooltipLabel="Chatbot"
         isChatbotVisible={chatbotVisible}

diff --git a/packages/module/src/MessageBar/AttachButton.tsx b/packages/module/src/MessageBar/AttachButton.tsx
@@ -46,7 +46,7 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
   return (
     <>
       {/* this is required for react-dropzone to work in Safari and Firefox */}
-      <input data-testid={inputTestId} {...getInputProps()} />
+      <input data-testid={inputTestId} {...getInputProps()} hidden />
       <Tooltip
         id="pf-chatbot__tooltip--attach"
         content={tooltipContent}