fix(core/upload): disable file browser if control is disabled (#1506)

siemens · Oct 10, 2024 · 393b51d · 393b51d
1 parent c2879f6
commit 393b51d
Show file tree

Hide file tree

Showing 256 changed files with 576 additions and 314 deletions.
diff --git a/.changeset/yellow-goats-wash.md b/.changeset/yellow-goats-wash.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/upload): disable file browser if control is disabled
diff --git a/packages/core/.eslintignore b/packages/core/.eslintignore
@@ -3,3 +3,4 @@ playwright.config.ts
 stencil.config.ts
 src/components.d.ts
 scripts/build
+scripts/e2e
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -16978,7 +16978,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {

diff --git a/packages/core/scripts/e2e/load-e2e-runtime.js b/packages/core/scripts/e2e/load-e2e-runtime.js
@@ -8,59 +8,69 @@
  */
 
 function loadResources() {
-  var ixEsm = document.createElement('script');
+  const ixEsm = document.createElement('script');
   ixEsm.setAttribute('type', 'module');
   ixEsm.setAttribute(
     'src',
     'http://127.0.0.1:8080/www/build/siemens-ix.esm.js'
   );
 
-  var ix = document.createElement('script');
+  const ix = document.createElement('script');
   ix.setAttribute('nomodule', '');
   ix.setAttribute('src', 'http://127.0.0.1:8080/www/build/siemens-ix.js');
 
-  var bootstrapStyling = document.createElement('link');
+  const bootstrapStyling = document.createElement('link');
   bootstrapStyling.setAttribute('rel', 'stylesheet');
   bootstrapStyling.setAttribute(
     'href',
     'http://127.0.0.1:8080/www/build/bootstrap/dist/css/bootstrap.css'
   );
 
-  var ixStyling = document.createElement('link');
+  const ixStyling = document.createElement('link');
   ixStyling.setAttribute('rel', 'stylesheet');
   ixStyling.setAttribute(
     'href',
     'http://127.0.0.1:8080/www/build/siemens-ix.css'
   );
 
-  var ixBrandStyle = document.createElement('link');
+  const ixBrandStyle = document.createElement('link');
   ixBrandStyle.setAttribute('rel', 'stylesheet');
   ixBrandStyle.setAttribute(
     'href',
     'http://127.0.0.1:8080/www/build/ix-brand-theme/ix-brand-theme.css'
   );
 
-  var ixBrandEsm = document.createElement('script');
+  const ixBrandEsm = document.createElement('script');
   ixBrandEsm.setAttribute('type', 'module');
   ixBrandEsm.setAttribute(
     'src',
     'http://127.0.0.1:8080/www/build/ix-brand-theme/ix-brand-theme.esm.js'
   );
 
-  var ixBrand = document.createElement('script');
+  const ixBrand = document.createElement('script');
   ixBrand.setAttribute('nomodule', '');
   ixBrand.setAttribute(
     'src',
     'http://127.0.0.1:8080/www/build/ix-brand-theme/ix-brand-theme.js'
   );
 
-  var ixIcons = document.createElement('link');
+  const ixIcons = document.createElement('link');
   ixIcons.setAttribute('rel', 'stylesheet');
   ixIcons.setAttribute(
     'href',
     'http://127.0.0.1:8080/www/build/ix-icons/css/ix-icons.css'
   );
 
+  const fullBodyStyles = document.createElement('style');
+  fullBodyStyles.innerHTML = `
+      html, body {
+        margin: 0px;
+        padding: 0px;
+        width: 100vw;
+        height: 100vh;
+      }
+  `;
+
   document.getElementsByTagName('head')[0].appendChild(bootstrapStyling);
   document.getElementsByTagName('head')[0].appendChild(ixEsm);
   document.getElementsByTagName('head')[0].appendChild(ix);
@@ -69,6 +79,7 @@ function loadResources() {
   document.getElementsByTagName('head')[0].appendChild(ixBrandEsm);
   document.getElementsByTagName('head')[0].appendChild(ixBrand);
   document.getElementsByTagName('head')[0].appendChild(ixIcons);
+  document.getElementsByTagName('head')[0].appendChild(fullBodyStyles);
 }
 
 function detectThemeSwitching() {

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -2356,7 +2356,7 @@ export namespace Components {
         /**
           * The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload). [accept]{@link "https://www.w3schools.com/tags/att_input_accept.asp"}
          */
-        "accept": string;
+        "accept"?: string;
         /**
           * Disable all input events
          */

diff --git a/packages/core/src/components/upload/test/upload.ct.ts b/packages/core/src/components/upload/test/upload.ct.ts
@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+
+test('renders', async ({ mount, page }) => {
+  await mount(`<ix-upload></ix-upload>`);
+  const upload = page.locator('ix-upload');
+
+  await expect(upload).toHaveClass(/hydrated/);
+  await expect(upload).toBeVisible();
+});
diff --git a/packages/core/src/components/upload/upload.tsx b/packages/core/src/components/upload/upload.tsx
@@ -19,6 +19,7 @@ import {
   State,
 } from '@stencil/core';
 import { UploadFileState } from './upload-file-state';
+import { A11yAttributes, a11yHostAttributes } from '../utils/a11y';
 
 @Component({
   tag: 'ix-upload',
@@ -30,7 +31,7 @@ export class Upload {
    * The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).
    * [accept]{@link "https://www.w3schools.com/tags/att_input_accept.asp"}
    */
-  @Prop() accept: string;
+  @Prop() accept?: string;
 
   /**
    * If multiple is true the user can drop or select multiple files
@@ -85,26 +86,37 @@ export class Upload {
   /**
    * You get an array of Files after drop-action or browse action is finished
    */
-  @Event() filesChanged: EventEmitter<Array<File>>;
+  @Event() filesChanged!: EventEmitter<Array<File>>;
 
   @Element() hostElement!: HTMLIxUploadElement;
 
   get inputElement(): HTMLInputElement {
-    return this.hostElement.shadowRoot.querySelector('#upload-browser');
+    return this.hostElement.shadowRoot!.querySelector('#upload-browser')!;
   }
 
   @State() isFileOver = false;
 
-  private filesToUpload: Array<File>;
+  private filesToUpload?: Array<File>;
+
+  private a11y: A11yAttributes = {};
 
   constructor() {}
 
+  componentWillLoad() {
+    this.a11y = a11yHostAttributes(this.hostElement);
+  }
+
   private fileDropped(evt: DragEvent) {
     evt.preventDefault();
+
     if (this.disabled) {
       return;
     }
 
+    if (!evt.dataTransfer) {
+      return;
+    }
+
     const file: File | FileList = evt.dataTransfer.files;
     this.isFileOver = false;
 
@@ -113,6 +125,10 @@ export class Upload {
   }
 
   private fileOver(event: DragEvent) {
+    if (!event.dataTransfer) {
+      return;
+    }
+
     if (this.state !== UploadFileState.LOADING) {
       event.preventDefault();
       event.dataTransfer.dropEffect = 'move';
@@ -132,11 +148,18 @@ export class Upload {
     this.isFileOver = false;
   }
 
-  private fileChangeEvent(event: any) {
+  private fileChangeEvent(event: Event) {
     if (this.disabled) {
       return;
     }
-    this.filesToUpload = this.convertToFileArray(event.target.files);
+
+    if (!event.target) {
+      return;
+    }
+
+    this.filesToUpload = this.convertToFileArray(
+      (event.target as HTMLInputElement).files
+    );
 
     this.filesChanged.emit(this.filesToUpload);
 
@@ -146,8 +169,13 @@ export class Upload {
     this.inputElement.type = 'file';
   }
 
-  private convertToFileArray(filesFromEvent: FileList | File): File[] {
+  private convertToFileArray(filesFromEvent: FileList | File | null): File[] {
     let files = [];
+
+    if (!filesFromEvent) {
+      return [];
+    }
+
     if (filesFromEvent instanceof FileList) {
       files = Array.from(filesFromEvent);
     } else {
@@ -208,8 +236,10 @@ export class Upload {
   }
 
   render() {
+    const disabled = this.disabled || this.state === UploadFileState.LOADING;
+    const { 'aria-label': ariaLabel = 'Upload files', ...a11y } = this.a11y;
     return (
-      <Host>
+      <Host {...a11y} aria-disabled={disabled}>
         <div
           class={{
             'file-upload-area': true,
@@ -231,6 +261,8 @@ export class Upload {
           {this.renderUploadState()}
           <div>
             <input
+              aria-label={ariaLabel}
+              aria-disabled={disabled}
               multiple={this.multiple}
               type="file"
               class="upload-browser"
@@ -239,12 +271,13 @@ export class Upload {
                 this.fileChangeEvent(e);
               }}
               accept={this.accept}
+              disabled={disabled}
             />
             <ix-button
               tabindex="-1"
               outline
               onClick={() => this.inputElement.click()}
-              disabled={this.disabled || this.state === UploadFileState.LOADING}
+              disabled={disabled}
             >
               {this.i18nUploadFile}
             </ix-button>

diff --git a/...card-basic-should-have-selected-state-1-chromium---theme-classic-dark-linux.png b/...card-basic-should-have-selected-state-1-chromium---theme-classic-dark-linux.png
diff --git a/...ard-basic-should-have-selected-state-1-chromium---theme-classic-light-linux.png b/...ard-basic-should-have-selected-state-1-chromium---theme-classic-light-linux.png
diff --git a/...ic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png b/...ic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png
diff --git a/...c-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png b/...c-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/action-card/basic/index.html b/packages/core/src/tests/action-card/basic/index.html
@@ -4,7 +4,8 @@
 SPDX-License-Identifier: MIT
 -->
 
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta

diff --git a/packages/core/src/tests/action-card/selected/index.html b/packages/core/src/tests/action-card/selected/index.html
@@ -4,7 +4,8 @@
 SPDX-License-Identifier: MIT
 -->
 
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta

diff --git a/packages/core/src/tests/application-header/basic-svg/index.html b/packages/core/src/tests/application-header/basic-svg/index.html
@@ -4,7 +4,8 @@
 SPDX-License-Identifier: MIT
 -->
 
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta

diff --git a/packages/core/src/tests/application-header/basic/index.html b/packages/core/src/tests/application-header/basic/index.html
@@ -4,7 +4,8 @@
 SPDX-License-Identifier: MIT
 -->
 
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta

diff --git a/packages/core/src/tests/application-header/overflow/index.html b/packages/core/src/tests/application-header/overflow/index.html
@@ -4,7 +4,8 @@
 SPDX-License-Identifier: MIT
 -->
 
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta

diff --git a/packages/core/src/tests/application-header/standalone/index.html b/packages/core/src/tests/application-header/standalone/index.html
@@ -4,7 +4,8 @@
 SPDX-License-Identifier: MIT
 -->
 
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta

diff --git a/packages/core/src/tests/application/application-switch/index.html b/packages/core/src/tests/application/application-switch/index.html
@@ -4,7 +4,8 @@
 SPDX-License-Identifier: MIT
 -->
 
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta

diff --git a/packages/core/src/tests/application/application.e2e.ts b/packages/core/src/tests/application/application.e2e.ts
@@ -246,7 +246,7 @@ regressionTest.describe('application-switch', () => {
 
 Object.keys(viewPorts).forEach((viewPort) => {
   regressionTest(`MenuSidebar ${viewPort}`, async ({ page }) => {
-    await page.setViewportSize(viewPorts[viewPort]);
+    await page.setViewportSize(viewPorts[viewPort as keyof typeof viewPorts]);
     await page.goto('application/application-switch');
 
     const toggleMenuButton = page.locator('ix-menu-expand-icon').nth(0);

diff --git a/...ts-snapshots/application-switch-modal-1-chromium---theme-classic-dark-linux.png b/...ts-snapshots/application-switch-modal-1-chromium---theme-classic-dark-linux.png
diff --git a/...s-snapshots/application-switch-modal-1-chromium---theme-classic-light-linux.png b/...s-snapshots/application-switch-modal-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/application/basic/index.html b/packages/core/src/tests/application/basic/index.html
@@ -4,7 +4,8 @@
 SPDX-License-Identifier: MIT
 -->
 
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta

diff --git a/packages/core/src/tests/application/content-width/index.html b/packages/core/src/tests/application/content-width/index.html
@@ -4,7 +4,8 @@
 SPDX-License-Identifier: MIT
 -->
 
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta

diff --git a/packages/core/src/tests/application/mobile/index.html b/packages/core/src/tests/application/mobile/index.html
@@ -4,7 +4,8 @@
 SPDX-License-Identifier: MIT
 -->
 
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta

diff --git a/packages/core/src/tests/basic-navigation/basic/index.html b/packages/core/src/tests/basic-navigation/basic/index.html
@@ -4,7 +4,8 @@
 SPDX-License-Identifier: MIT
 -->
 
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta