fix: changed the button lable from Upload to Browse (#9275)

* fix: changed the button lable from Upload to Browse

* change button label from hardcoded text to props element

* passes label as Browse

* Update MultipleFileUploadMain.tsx

* made changes as per your requirements

* follow-up

* follow-up

* follow-up

Author: SamantaTarun

packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadButton.tsx

@@ -9,19 +9,26 @@ export interface MultipleFileUploadButtonProps extends React.HTMLProps<HTMLDivEl
   className?: string;
   /** Aria-label for the button */
   'aria-label'?: string;
+  /** Visible text label for the button */
+  'browseButtonText'?: string;
 }
 
 export const MultipleFileUploadButton: React.FunctionComponent<MultipleFileUploadButtonProps> = ({
   className,
   'aria-label': ariaLabel,
+  browseButtonText = "Upload",
   ...props
 }: MultipleFileUploadButtonProps) => {
+  if (!ariaLabel && !browseButtonText) {
+    // eslint-disable-next-line no-console
+    console.warn("For accessibility reasons an aria-label should be specified on MultipleFileUploadButton if a browseButtonText isn't");
+  }
   const { open } = React.useContext(MultipleFileUploadContext);
 
   return (
     <div className={css(styles.multipleFileUploadUpload, className)} {...props}>
       <Button variant="secondary" aria-label={ariaLabel} onClick={open}>
-        Upload
+        {browseButtonText}
       </Button>
     </div>
   );

packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadMain.tsx

@@ -21,6 +21,8 @@ export interface MultipleFileUploadMainProps extends React.HTMLProps<HTMLDivElem
   infoText?: React.ReactNode;
   /** Flag to prevent the upload button from being rendered */
   isUploadButtonHidden?: boolean;
+  /** Visible text label for the upload button */
+  browseButtonText?: string
 }
 
 export const MultipleFileUploadMain: React.FunctionComponent<MultipleFileUploadMainProps> = ({
@@ -30,14 +32,15 @@ export const MultipleFileUploadMain: React.FunctionComponent<MultipleFileUploadM
   titleTextSeparator,
   infoText,
   isUploadButtonHidden,
+  browseButtonText="Upload",
   ...props
 }: MultipleFileUploadMainProps) => {
   const showTitle = !!titleIcon || !!titleText || !!titleTextSeparator;
 
   return (
     <div className={css(styles.multipleFileUploadMain, className)} {...props}>
       {showTitle && <MultipleFileUploadTitle icon={titleIcon} text={titleText} textSeparator={titleTextSeparator} />}
-      {isUploadButtonHidden || <MultipleFileUploadButton />}
+      {isUploadButtonHidden || <MultipleFileUploadButton browseButtonText={browseButtonText}/>}
       {!!infoText && <MultipleFileUploadInfo>{infoText}</MultipleFileUploadInfo>}
     </div>
   );

packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadButton.test.tsx

@@ -17,4 +17,9 @@ describe('MultipleFileUploadButton', () => {
     const { asFragment } = render(<MultipleFileUploadButton aria-label="test">Foo</MultipleFileUploadButton>);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('renders with label applied to the button', () => {
+    const { asFragment } = render(<MultipleFileUploadButton browseButtonText="test">Foo</MultipleFileUploadButton>);
+    expect(asFragment()).toMatchSnapshot();
+  });
 });