test(fileuploader): cover complex states with avt (#14527)

* test(fileuploader): cover complex states with avt

* chore: cleanup comments

e2e/components/FileUploader/FileUploader-test.avt.e2e.js

@@ -0,0 +1,84 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { visitStory } = require('../../test-utils/storybook');
+const path = require('path');
+
+test.describe('FileUploader @avt', () => {
+  test('accessibility-checker default state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FileUploader',
+      id: 'components-fileuploader--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('FileUploader default state');
+  });
+  test('accessibility-checker default state with upload', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FileUploader',
+      id: 'components-fileuploader--playground',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await page
+      .getByLabel('Add file')
+      .setInputFiles(path.join(__dirname, 'test-file-for-uploading.png'));
+    await expect(page).toHaveNoACViolations(
+      'FileUploader default state with upload'
+    );
+  });
+  test('accessibility-checker invalid state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FileUploader',
+      id: 'components-fileuploader--file-uploader-item',
+      globals: {
+        theme: 'white',
+      },
+      args: {
+        invalid: true,
+      },
+    });
+
+    await expect(page).toHaveNoACViolations('FileUploader invalid state');
+  });
+
+  test('accessibility-checker complete state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FileUploader',
+      id: 'components-fileuploader--file-uploader-item',
+      globals: {
+        theme: 'white',
+      },
+      args: {
+        status: 'complete',
+      },
+    });
+
+    await expect(page).toHaveNoACViolations('FileUploader complete state');
+  });
+
+  test('accessibility-checker uploading state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FileUploader',
+      id: 'components-fileuploader--file-uploader-item',
+      globals: {
+        theme: 'white',
+      },
+      args: {
+        status: 'uploading',
+      },
+    });
+
+    await expect(page).toHaveNoACViolations('FileUploader uploading state');
+  });
+});

packages/react/src/components/FileUploader/FileUploader.stories.js

@@ -51,7 +51,7 @@ export const Default = () => {
   );
 };
 
-export const _FileUploaderItem = () => {
+export const _FileUploaderItem = (args) => {
   return (
     <FileUploaderItem
       errorBody="500kb max file size. Select a new file and try again."
@@ -61,9 +61,72 @@ export const _FileUploaderItem = () => {
       name="README.md"
       status="edit"
       size="md"
+      {...args}
     />
   );
 };
+_FileUploaderItem.argTypes = {
+  errorBody: {
+    control: 'text',
+    description: 'Error message body for an invalid file upload',
+  },
+  errorSubject: {
+    control: 'text',
+    description: 'Error message subject for an invalid file upload',
+  },
+  iconDescription: { control: 'text' },
+  invalid: {
+    control: 'boolean',
+    description: 'Specify if the currently uploaded file is invalid',
+  },
+  name: { control: 'text', description: 'Name of the uploaded file' },
+  onDelete: { action: 'onDelete' },
+  size: { control: 'select', options: ['sm', 'md', 'lg'] },
+  status: {
+    control: 'inline-radio',
+    options: ['uploading', 'edit', 'complete'],
+    description: 'Status of the file upload',
+  },
+  uuid: {
+    control: 'text',
+    description: 'Unique identifier for the file object',
+  },
+
+  // Remove all the props that don't apply to FileUploaderItem
+  accept: {
+    table: { disable: true },
+  },
+  buttonKind: {
+    table: { disable: true },
+  },
+  buttonLabel: {
+    table: { disable: true },
+  },
+  className: {
+    table: { disable: true },
+  },
+  disabled: {
+    table: { disable: true },
+  },
+  labelDescription: {
+    table: { disable: true },
+  },
+  labelTitle: {
+    table: { disable: true },
+  },
+  multiple: {
+    table: { disable: true },
+  },
+  onChange: {
+    table: { disable: true },
+  },
+  onClick: {
+    table: { disable: true },
+  },
+  filenameStatus: {
+    table: { disable: true },
+  },
+};
 
 export const _FileUploaderDropContainer = () => (
   <FileUploaderDropContainer