fix: add missing upload file overflow and focus outline styles (#10016)

Author: web-padawan

packages/upload/src/styles/vaadin-upload-file-base-styles.js

@@ -15,6 +15,11 @@ export const uploadFileStyles = css`
     padding: var(--vaadin-upload-file-padding, var(--vaadin-padding-s));
   }
 
+  :host(:focus-visible) {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
+  }
+
   [hidden] {
     display: none;
   }
@@ -97,6 +102,10 @@ export const uploadFileStyles = css`
     padding: var(--vaadin-upload-file-button-padding, var(--vaadin-padding-container));
   }
 
+  button:focus-visible {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+  }
+
   [part='start-button']::before,
   [part='retry-button']::before,
   [part='remove-button']::before {

packages/upload/src/styles/vaadin-upload-file-list-base-styles.js

@@ -9,6 +9,7 @@ import { css } from 'lit';
 export const uploadFileListStyles = css`
   :host {
     display: block;
+    overflow: auto;
   }
 
   :host([hidden]) {

packages/upload/test/visual/base/screenshots/upload/baseline/focus-clear.png

@@ -41,6 +41,18 @@ describe('upload', () => {
         ];
         await visualDiff(div, `${dir}-files`);
       });
+
+      it('max-height', async () => {
+        element.style.maxHeight = '200px';
+        element.files = [
+          { name: 'File 1.pdf', progress: 100, complete: true },
+          { name: 'File 2.pdf', progress: 100, complete: true },
+          { name: 'File 3.pdf', progress: 100, complete: true },
+          { name: 'File 4.pdf', progress: 100, complete: true },
+          { name: 'File 5.pdf', progress: 100, complete: true },
+        ];
+        await visualDiff(div, `${dir}-max-height`);
+      });
     });
   });