feat(SimpleFileUpload): consumed Penta updates (#10026)

* feat(SimpleFileUpload): consumed Penta updates

* Wrote unit tests for FileUploadHelperText

* Added helper text example, updated custom upload example

* Updated various a11y

* Updated FileUpload snapshot

Author: thatblindgeye

packages/react-core/src/components/FileUpload/FileUpload.tsx

@@ -16,6 +16,10 @@ export interface FileUploadProps
   'aria-label'?: string;
   /** Text for the browse button. */
   browseButtonText?: string;
+  /** ID or ID's of elements that describe the browse button. Typically this should refer
+   * to elements such as helper text when there are file restrictions.
+   */
+  browseButtonAriaDescribedby?: string;
   /** Additional children to render after (or instead of) the file preview. */
   children?: React.ReactNode;
   /** Additional classes added to the file upload container element. */

packages/react-core/src/components/FileUpload/FileUploadField.tsx

@@ -19,6 +19,10 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
   'aria-label'?: string;
   /** Text for the browse button. */
   browseButtonText?: string;
+  /** ID or ID's of elements that describe the browse button. Typically this should refer
+   * to elements such as helper text when there are file restrictions.
+   */
+  browseButtonAriaDescribedby?: string;
   /** Additional children to render after (or instead of) the file preview. */
   children?: React.ReactNode;
   /** Additional classes added to the file upload field container element. */
@@ -108,6 +112,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
   filenamePlaceholder = 'Drag a file here or browse to upload',
   filenameAriaLabel = filename ? 'Read only filename' : filenamePlaceholder,
   browseButtonText = 'Browse...',
+  browseButtonAriaDescribedby,
   clearButtonText = 'Clear',
   isClearButtonDisabled = !filename && !value,
   containerRef = null as React.Ref<HTMLDivElement>,
@@ -141,16 +146,15 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
               name={name || `${id}-filename`}
               aria-label={filenameAriaLabel}
               placeholder={filenamePlaceholder}
-              aria-describedby={`${id}-browse-button`}
               value={filename}
             />
           </InputGroupItem>
           <InputGroupItem>
             <Button
-              id={`${id}-browse-button`}
               variant={ButtonVariant.control}
               onClick={onBrowseButtonClick}
               isDisabled={isDisabled}
+              aria-describedby={browseButtonAriaDescribedby}
             >
               {browseButtonText}
             </Button>

packages/react-core/src/components/FileUpload/FileUploadHelperText.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
+import { css } from '@patternfly/react-styles';
+
+/** A container for helper text content. This sub-component should be passed as a child to
+ * the main file upload or file upload field component.
+ */
+
+export interface FileUploadHelperTextProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content to render inside the file upload helper text container. Typically this will be
+   * the helper text component.
+   */
+  children: React.ReactNode;
+  /** Additional classes added to the file upload helper text container element. */
+  className?: string;
+}
+
+export const FileUploadHelperText: React.FunctionComponent<FileUploadHelperTextProps> = ({
+  children,
+  className,
+  ...props
+}: FileUploadHelperTextProps) => (
+  <div className={css(`${styles.fileUpload}__helper-text`, className)} {...props}>
+    {children}
+  </div>
+);
+FileUploadHelperText.displayName = 'FileUploadHelperText';

packages/react-core/src/components/FileUpload/__tests__/FileUploadField.test.tsx

@@ -1,6 +1,6 @@
 import { FileUploadField } from '../FileUploadField';
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 test('simple fileuploadfield', () => {
   const browserBtnClickHandler = jest.fn();
@@ -25,3 +25,19 @@ test('simple fileuploadfield', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Renders without aria-describedby on browse button by default', () => {
+  render(<FileUploadField id="file-upload-field" browseButtonText="Upload" />);
+
+  expect(screen.getByRole('button', { name: 'Upload' })).not.toHaveAccessibleDescription();
+});
+
+test('Renders without aria-describedby on browse button by default', () => {
+  render(
+    <FileUploadField id="file-upload-field" browseButtonText="Upload" browseButtonAriaDescribedby="helper-text">
+      <div id="helper-text">Helper text</div>
+    </FileUploadField>
+  );
+
+  expect(screen.getByRole('button', { name: 'Upload' })).toHaveAccessibleDescription('Helper text');
+});

packages/react-core/src/components/FileUpload/__tests__/FileUploadHelperText.test.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { FileUploadHelperText } from '../FileUploadHelperText';
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
+
+test(`Renders only with class ${styles.fileUpload}__helper-text by default`, () => {
+  render(<FileUploadHelperText>Content</FileUploadHelperText>);
+
+  expect(screen.getByText('Content')).toHaveClass(`${styles.fileUpload}__helper-text`, { exact: true });
+});
+
+test(`Renders with custom class when className is passed in`, () => {
+  render(<FileUploadHelperText className="test">Content</FileUploadHelperText>);
+
+  expect(screen.getByText('Content')).toHaveClass('test');
+});
+
+test(`Spreads props when passed in`, () => {
+  render(<FileUploadHelperText id="test-id">Content</FileUploadHelperText>);
+
+  expect(screen.getByText('Content')).toHaveAttribute('id', 'test-id');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<FileUploadHelperText>Content</FileUploadHelperText>);
+  expect(asFragment()).toMatchSnapshot();
+});

packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap

@@ -19,7 +19,6 @@ exports[`simple fileupload 1`] = `
             class="pf-v5-c-form-control pf-m-readonly"
           >
             <input
-              aria-describedby="simple-text-file-browse-button"
               aria-invalid="false"
               aria-label="Drag a file here or browse to upload"
               data-ouia-component-id="OUIA-Generated-TextInputBase-1"
@@ -43,7 +42,6 @@ exports[`simple fileupload 1`] = `
             data-ouia-component-id="OUIA-Generated-Button-control-1"
             data-ouia-component-type="PF5/Button"
             data-ouia-safe="true"
-            id="simple-text-file-browse-button"
             type="button"
           >
             Browse...

packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -18,7 +18,6 @@ exports[`simple fileuploadfield 1`] = `
             class="pf-v5-c-form-control pf-m-readonly"
           >
             <input
-              aria-describedby="custom-file-upload-browse-button"
               aria-invalid="false"
               aria-label="Do something custom with this!"
               data-ouia-component-id="OUIA-Generated-TextInputBase-1"
@@ -42,7 +41,6 @@ exports[`simple fileuploadfield 1`] = `
             data-ouia-component-id="OUIA-Generated-Button-control-1"
             data-ouia-component-type="PF5/Button"
             data-ouia-safe="true"
-            id="custom-file-upload-browse-button"
             type="button"
           >
             Browse...

packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUploadHelperText.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-file-upload__helper-text"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;

packages/react-core/src/components/FileUpload/examples/FileUpload.md

@@ -7,6 +7,7 @@ subsection: file-upload
 ---
 
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 ## Examples
 
@@ -22,11 +23,18 @@ Pressing _Clear_ button triggers `onClearClick` event.
 ```ts file="./FileUploadSimpleText.tsx"
 ```
 
-A user can always type instead of selecting a file, but by default, once a user selects a text file from their disk they are not allowed to edit it (to prevent unintended changes to a format-sensitive file). This behavior can be changed with the `allowEditingUploadedText` prop.
-Typing/pasting text in the box will call `onTextChange` with a string, and a string value is expected for the `value` prop. :
+### With helper text
+
+You can pass in the `<FileUploadHelperText` sub-component via the `children` property to `<FileUpload>`.
+
+```ts file="./FileUploadWithHelperText.tsx"
+```
 
 ### Text file with edits allowed
 
+A user can always type instead of selecting a file, but by default, once a user selects a text file from their disk they are not allowed to edit it (to prevent unintended changes to a format-sensitive file). This behavior can be changed with the `allowEditingUploadedText` prop.
+Typing/pasting text in the box will call `onTextChange` with a string, and a string value is expected for the `value` prop. :
+
 ```ts file="./FileUploadTextWithEdits.tsx"
 ```
 

packages/react-core/src/components/FileUpload/examples/FileUploadCustomPreview.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FileUpload } from '@patternfly/react-core';
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
-import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const [value, setValue] = React.useState<File>();
@@ -29,7 +28,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
       browseButtonText="Upload"
     >
       {value && (
-        <div className={spacing.mMd}>
+        <div>
           <FileUploadIcon width="2em" height="2em" /> Custom preview here for your {value.size}-byte file named{' '}
           {value.name}
         </div>