Fix a11y issues in file upload component

api-generator/api-generator.js

@@ -136,26 +136,30 @@ async function main() {
                   };
 
                   component_props_group.children.forEach((prop) => {
+                    const rawType =
+                      prop.getSignature && prop.getSignature.type
+                        ? prop.getSignature.type.toString()
+                        : prop.type
+                          ? prop.type.toString()
+                          : null;
+                    const isSignalInput = rawType?.startsWith('InputSignal<');
                     props.values.push({
                       name: prop.name,
                       optional: prop.flags.isOptional,
                       readonly: prop.flags.isReadonly,
-                      type:
-                        prop.getSignature && prop.getSignature.type
-                          ? prop.getSignature.type.toString()
-                          : prop.type
-                            ? prop.type.toString()
-                            : null,
+                      type: unwrapSignalType(rawType),
                       default:
                         (prop.type &&
                         prop.type.name === 'boolean' &&
                         !prop.defaultValue
                           ? 'false'
-                          : prop.defaultValue
+                          : prop.defaultValue &&
+                              !(isSignalInput && prop.defaultValue === '...')
                             ? prop.defaultValue.replace(/^'|'$/g, '')
                             : undefined) ??
                         getDefaultValue(prop.setSignature) ??
-                        getDefaultValue(prop.getSignature),
+                        getDefaultValue(prop.getSignature) ??
+                        getDefaultValue(prop),
                       description: (
                         prop.getSignature?.comment?.summary ||
                         prop.setSignature?.comment?.summary ||
@@ -622,6 +626,12 @@ function extractParameter(emitter) {
   }
 }
 
+const unwrapSignalType = (type) => {
+  if (!type) return type;
+  const match = type.match(/^InputSignal<(.+)>$/);
+  return match ? match[1] : type;
+};
+
 const isProcessable = (value) => {
   return value && value.children && value.children.length;
 };

playwright/cps-accessibility.spec.ts

@@ -56,7 +56,7 @@ const components: ComponentEntry[] = [
   //   name: 'Expansion panel',
   //   selector: 'cps-expansion-panel'
   // },
-  // { route: '/file-upload', name: 'File upload', selector: 'cps-file-upload' },
+  { route: '/file-upload', name: 'File upload', selector: 'cps-file-upload' },
   // { route: '/icon', name: 'Icon', selector: 'cps-icon' },
   // { route: '/info-circle', name: 'Info circle', selector: 'cps-info-circle' },
   // { route: '/input', name: 'Input', selector: 'cps-input' },

projects/composition/src/app/api-data/cps-divider.json

@@ -9,32 +9,32 @@
                         "name": "vertical",
                         "optional": false,
                         "readonly": false,
-                        "type": "InputSignal<boolean>",
-                        "default": "...",
+                        "type": "boolean",
+                        "default": "false",
                         "description": "Determines whether the divider is vertically aligned."
                     },
                     {
                         "name": "color",
                         "optional": false,
                         "readonly": false,
-                        "type": "InputSignal<string>",
-                        "default": "...",
+                        "type": "string",
+                        "default": "line-mid",
                         "description": "Color of the divider."
                     },
                     {
                         "name": "type",
                         "optional": false,
                         "readonly": false,
-                        "type": "InputSignal<CpsDividerType>",
-                        "default": "...",
+                        "type": "CpsDividerType",
+                        "default": "solid",
                         "description": "Type of the divider."
                     },
                     {
                         "name": "thickness",
                         "optional": false,
                         "readonly": false,
-                        "type": "InputSignal<string | number>",
-                        "default": "...",
+                        "type": "string | number",
+                        "default": "1px",
                         "description": "Thickness of the divider, a number denoting pixels or a string."
                     }
                 ]

projects/composition/src/app/api-data/cps-file-upload.json

@@ -22,12 +22,12 @@
                         "description": "Expected file description. E.g. 'Word document'."
                     },
                     {
-                        "name": "width",
+                        "name": "ariaLabel",
                         "optional": false,
                         "readonly": false,
-                        "type": "string | number",
-                        "default": "100%",
-                        "description": "Width of the component, a number denoting pixels or a string."
+                        "type": "string",
+                        "default": "Upload file",
+                        "description": "Aria label for the component, used for accessibility."
                     },
                     {
                         "name": "fileInfo",
@@ -37,6 +37,14 @@
                         "default": "",
                         "description": "Expected file info block, explaining some extra stuff about file."
                     },
+                    {
+                        "name": "disabled",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "boolean",
+                        "default": "false",
+                        "description": "Whether the component is disabled."
+                    },
                     {
                         "name": "fileProcessingCallback",
                         "optional": true,
@@ -60,6 +68,14 @@
                         "type": "number",
                         "default": "12",
                         "description": "File name tooltip offset for styling."
+                    },
+                    {
+                        "name": "width",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string | number",
+                        "default": "100%",
+                        "description": "Width of the component, a number denoting pixels or a string."
                     }
                 ]
             },
@@ -86,6 +102,36 @@
                         ],
                         "description": "Callback to invoke when file upload fails."
                     },
+                    {
+                        "name": "fileProcessed",
+                        "parameters": [
+                            {
+                                "name": "value",
+                                "type": "File"
+                            }
+                        ],
+                        "description": "Callback to invoke when file is processed."
+                    },
+                    {
+                        "name": "fileProcessingFailed",
+                        "parameters": [
+                            {
+                                "name": "value",
+                                "type": "string"
+                            }
+                        ],
+                        "description": "Callback to invoke when file processing fails."
+                    },
+                    {
+                        "name": "fileProcessingCancelled",
+                        "parameters": [
+                            {
+                                "name": "value",
+                                "type": "string"
+                            }
+                        ],
+                        "description": "Callback to invoke when file processing is cancelled."
+                    },
                     {
                         "name": "uploadedFileRemoved",
                         "parameters": [

projects/composition/src/app/pages/divider-page/divider-page.component.scss

@@ -1,6 +1,6 @@
 :host {
   .section-title {
-    color: var(--cps-color-calm);
+    color: var(--cps-color-depth);
     margin-top: 0;
   }
 

projects/composition/src/app/pages/file-upload-page/file-upload-page.component.html

@@ -3,7 +3,7 @@
   <h2 class="section-title">
     File upload component with the dependency on selected file extension
   </h2>
-  <div>
+  <div class="section-body">
     <p>
       <cps-button-toggle
         label="File extension"
@@ -13,34 +13,64 @@ <h2 class="section-title">
       </cps-button-toggle>
       <br />
       <cps-file-upload
+        #fileUpload
         [extensions]="[selectedFileUploadType.value]"
         [fileDesc]="selectedFileUploadType!.label || ''"
-        width="400"
+        width="25rem"
         fileNameTooltipPosition="bottom"
-        [fileProcessingCallback]="processUploadedFile"
         (fileUploadFailed)="onFileUploadFailed($event)"
         (fileUploaded)="onFileUploaded($event)"
         (uploadedFileRemoved)="onUploadedFileRemoved($event)">
       </cps-file-upload>
     </p>
+    <cps-divider />
   </div>
 
-  <cps-divider />
-
   <h2 class="section-title">File upload component with extra info</h2>
-  <div>
+  <div class="section-body">
+    <p>
+      <cps-file-upload
+        [extensions]="['.jpg', '.png', 'pdf']"
+        [fileInfo]="fileInfo"
+        fileDesc="Pictures or PDFs"
+        ariaLabel="Upload pictures or PDFs"
+        width="31.25rem"
+        fileNameTooltipOffset="15"
+        [fileProcessingCallback]="processUploadedFile"
+        (fileProcessingFailed)="onFileProcessingFailed($event)"
+        (fileProcessingCancelled)="onFileProcessingCancelled($event)"
+        (fileUploadFailed)="onFileUploadFailed($event)"
+        (fileUploaded)="onFileUploaded($event)"
+        (fileProcessed)="onFileProcessed($event)"
+        (uploadedFileRemoved)="onUploadedFileRemoved($event)">
+      </cps-file-upload>
+    </p>
+    <cps-divider />
+  </div>
+
+  <h2 class="section-title">Disabled file upload component</h2>
+  <div class="section-body">
     <p>
       <cps-file-upload
         [extensions]="['.jpg', '.png', 'pdf']"
         [fileInfo]="fileInfo"
         fileDesc="Pictures or PDFs"
-        width="500"
+        width="31.25rem"
         fileNameTooltipOffset="15"
+        [disabled]="isDisabled"
         [fileProcessingCallback]="processUploadedFile"
+        (fileProcessingFailed)="onFileProcessingFailed($event)"
+        (fileProcessingCancelled)="onFileProcessingCancelled($event)"
         (fileUploadFailed)="onFileUploadFailed($event)"
         (fileUploaded)="onFileUploaded($event)"
+        (fileProcessed)="onFileProcessed($event)"
         (uploadedFileRemoved)="onUploadedFileRemoved($event)">
       </cps-file-upload>
     </p>
+    <cps-button
+      label="Toggle disabled"
+      (clicked)="toggleDisabled()"
+      size="small">
+    </cps-button>
   </div>
 </app-component-docs-viewer>

projects/composition/src/app/pages/file-upload-page/file-upload-page.component.scss

@@ -0,0 +1,15 @@
+:host {
+  .section-title {
+    color: var(--cps-color-depth);
+  }
+  .section-title:first-child {
+    margin-top: 0;
+  }
+  .section-title,
+  .section-body {
+    margin-left: 0.5rem;
+  }
+  .section-body:last-child {
+    margin-bottom: 0.5rem;
+  }
+}

projects/composition/src/app/pages/file-upload-page/file-upload-page.component.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import {
   CpsFileUploadComponent,
   CpsButtonToggleComponent,
   CpsButtonToggleOption,
-  CpsDividerComponent
+  CpsDividerComponent,
+  CpsButtonComponent
 } from 'cps-ui-kit';
-import { Observable, catchError, from, map, of } from 'rxjs';
+import { Observable, catchError, delay, from, map, of } from 'rxjs';
 
 import ComponentData from '../../api-data/cps-file-upload.json';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
@@ -14,6 +15,7 @@
   selector: 'app-file-upload-page',
   imports: [
     CpsButtonToggleComponent,
+    CpsButtonComponent,
     CpsFileUploadComponent,
     ComponentDocsViewerComponent,
     CpsDividerComponent
@@ -22,31 +24,36 @@
   styleUrls: ['./file-upload-page.component.scss'],
   host: { class: 'composition-page' }
 })
 export class FileUploadPageComponent {
+  @ViewChild('fileUpload') fileUpload?: CpsFileUploadComponent;
+
   componentData = ComponentData;
 
   fileUploadOptions: CpsButtonToggleOption[] = [
     { label: 'JPG image', value: '.jpg' },
     { label: 'PDF document', value: '.pdf' },
     { label: 'PNG image', value: '.png' }
   ];
 
   selectedFileUploadType: CpsButtonToggleOption = this.fileUploadOptions[0];
 
+  isDisabled = true;
+
   fileInfo: string =
     'The file should be a small sample file to infer the schema, which will be shown in the next step';
 
   processUploadedFile(file: File): Observable<boolean> {
     return from(file.text()).pipe(
+      delay(3000),
       map((fileContentsAsText) => {
         console.log(fileContentsAsText);
         return true;
       }),
       catchError((error) => {
         console.error('Error reading file', error);
         return of(false);
       })
     );
   }
 
   onFileUploaded(file: File) {
@@ -57,16 +64,33 @@
     console.log('File upload failed', fileName);
   }
 
+  onFileProcessed(file: File) {
+    console.log('File processed', file?.name);
+  }
+
+  onFileProcessingFailed(fileName: string) {
+    console.log('File processing failed', fileName);
+  }
+
+  onFileProcessingCancelled(fileName: string) {
+    console.log('File processing cancelled', fileName);
+  }
+
   onUploadedFileRemoved(fileName: string) {
     console.log('File removed: ', fileName);
   }
 
   onFileExtensionChanged(event: string) {
+    this.fileUpload?.resetState();
     const foundSelectedItem = this.fileUploadOptions.find(
       (item) => item.value === event
     );
     if (foundSelectedItem) {
       this.selectedFileUploadType = foundSelectedItem;
     }
   }
+
+  toggleDisabled() {
+    this.isDisabled = !this.isDisabled;
+  }
 }