feat: add upload buttons focus-ring styles (#2361)

packages/vaadin-upload/test/visual/lumo/upload.test.js

@@ -1,4 +1,5 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../../theme/lumo/vaadin-upload.js';
 
@@ -39,4 +40,59 @@ describe('upload', () => {
       });
     });
   });
+
+  describe('focus', () => {
+    beforeEach(async () => {
+      element.files = [{ name: 'Don Quixote.pdf' }, { name: 'Hamlet.pdf', progress: 100, complete: true }];
+      // To show the start button
+      element.files[0].held = true;
+      // To show the retry button
+      element.files[0].error = 'Could not upload file';
+      element.shadowRoot.querySelector('[part=upload-button]').focus();
+    });
+
+    it('file', async () => {
+      // Focus the file
+      await sendKeys({ press: 'Tab' });
+      await visualDiff(div, `${import.meta.url}_focus-file`);
+    });
+
+    it('start', async () => {
+      // Focus the file
+      await sendKeys({ press: 'Tab' });
+
+      // Focus the start button
+      await sendKeys({ press: 'Tab' });
+      await visualDiff(div, `${import.meta.url}_focus-start`);
+    });
+
+    it('retry', async () => {
+      // Focus the file
+      await sendKeys({ press: 'Tab' });
+
+      // Focus the start button
+      await sendKeys({ press: 'Tab' });
+
+      // Focus the retry button
+      await sendKeys({ press: 'Tab' });
+
+      await visualDiff(div, `${import.meta.url}_focus-retry`);
+    });
+
+    it('clear', async () => {
+      // Focus the file
+      await sendKeys({ press: 'Tab' });
+
+      // Focus the start button
+      await sendKeys({ press: 'Tab' });
+
+      // Focus the retry button
+      await sendKeys({ press: 'Tab' });
+
+      // Focus the clear button
+      await sendKeys({ press: 'Tab' });
+
+      await visualDiff(div, `${import.meta.url}_focus-clear`);
+    });
+  });
 });

packages/vaadin-upload/test/visual/material/upload.test.js

@@ -1,4 +1,5 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../../theme/material/vaadin-upload.js';
 
@@ -39,4 +40,59 @@ describe('upload', () => {
       });
     });
   });
+
+  describe('focus', () => {
+    beforeEach(async () => {
+      element.files = [{ name: 'Don Quixote.pdf' }, { name: 'Hamlet.pdf', progress: 100, complete: true }];
+      // To show the start button
+      element.files[0].held = true;
+      // To show the retry button
+      element.files[0].error = 'Could not upload file';
+      element.shadowRoot.querySelector('[part=upload-button]').focus();
+    });
+
+    it('file', async () => {
+      // Focus the file
+      await sendKeys({ press: 'Tab' });
+      await visualDiff(div, `${import.meta.url}_focus-file`);
+    });
+
+    it('start', async () => {
+      // Focus the file
+      await sendKeys({ press: 'Tab' });
+
+      // Focus the start button
+      await sendKeys({ press: 'Tab' });
+      await visualDiff(div, `${import.meta.url}_focus-start`);
+    });
+
+    it('retry', async () => {
+      // Focus the file
+      await sendKeys({ press: 'Tab' });
+
+      // Focus the start button
+      await sendKeys({ press: 'Tab' });
+
+      // Focus the retry button
+      await sendKeys({ press: 'Tab' });
+
+      await visualDiff(div, `${import.meta.url}_focus-retry`);
+    });
+
+    it('clear', async () => {
+      // Focus the file
+      await sendKeys({ press: 'Tab' });
+
+      // Focus the start button
+      await sendKeys({ press: 'Tab' });
+
+      // Focus the retry button
+      await sendKeys({ press: 'Tab' });
+
+      // Focus the clear button
+      await sendKeys({ press: 'Tab' });
+
+      await visualDiff(div, `${import.meta.url}_focus-clear`);
+    });
+  });
 });

packages/vaadin-upload/theme/lumo/vaadin-upload-styles.js

@@ -108,9 +108,11 @@ registerStyles(
       flex: none;
     }
 
-    [part='done-icon'],
-    [part='warning-icon'] {
+    [part$='icon'] {
       margin-right: var(--lumo-space-xs);
+      font-size: var(--lumo-icon-size-m);
+      font-family: 'lumo-icons';
+      line-height: 1;
     }
 
     /* When both icons are hidden, let us keep space for one */
@@ -119,26 +121,21 @@ registerStyles(
       visibility: hidden;
     }
 
-    [part='done-icon'],
-    [part='warning-icon'] {
-      font-size: var(--lumo-icon-size-m);
-      font-family: 'lumo-icons';
-      line-height: 1;
-    }
-
-    [part='start-button'],
-    [part='retry-button'],
-    [part='clear-button'] {
+    [part$='button'] {
       flex: none;
       margin-left: var(--lumo-space-xs);
       cursor: var(--lumo-clickable-cursor);
     }
 
-    [part='done-icon']::before,
-    [part='warning-icon']::before,
-    [part='start-button']::before,
-    [part='retry-button']::before,
-    [part='clear-button']::before {
+    [part='row']:focus,
+    [part$='button']:focus {
+      outline: none;
+      border-radius: var(--lumo-border-radius-s);
+      box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+    }
+
+    [part$='icon']::before,
+    [part$='button']::before {
       vertical-align: -0.25em;
     }
 

packages/vaadin-upload/theme/material/vaadin-upload-styles.js

@@ -95,14 +95,16 @@ registerStyles(
 registerStyles(
   'vaadin-upload-file',
   css`
-    :host {
-      padding: 8px 0;
-    }
-
     [part='row'] {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
+      padding: 8px;
+    }
+
+    [part='row']:focus {
+      outline: none;
+      background-color: var(--material-divider-color);
     }
 
     [part='status'],
@@ -134,12 +136,12 @@ registerStyles(
       flex: none;
     }
 
-    [part='done-icon'],
-    [part='warning-icon'] {
+    [part$='icon'] {
       padding: 8px;
       margin: -8px 0 -8px -8px;
       font-family: material-icons;
       font-size: var(--material-icon-font-size);
+      line-height: 1;
     }
 
     /* When both icons are hidden, let us keep space for one */
@@ -148,42 +150,28 @@ registerStyles(
       visibility: hidden;
     }
 
-    [part='done-icon'],
-    [part='warning-icon'] {
-      font-size: var(--material-icon-font-size);
-      line-height: 1;
-    }
-
-    [part='start-button'],
-    [part='retry-button'],
-    [part='clear-button'] {
+    [part$='button'] {
+      position: relative;
+      width: 40px;
+      height: 40px;
       flex: none;
       font-family: material-icons;
       font-size: var(--material-icon-font-size);
       color: var(--material-secondary-text-color);
       line-height: 1;
       padding: 8px;
       margin: -8px 0;
+      outline: none;
     }
 
     [part='clear-button'] {
       margin-right: -8px;
     }
 
-    [part='start-button']:hover,
-    [part='retry-button']:hover,
-    [part='clear-button']:hover {
+    [part$='button']:hover {
       color: inherit;
     }
 
-    [part='done-icon']::before,
-    [part='warning-icon']::before,
-    [part='start-button']::before,
-    [part='retry-button']::before,
-    [part='clear-button']::before {
-      vertical-align: -0.05em;
-    }
-
     [part='done-icon']::before {
       content: var(--material-icons-check);
       color: var(--material-primary-text-color);
@@ -206,6 +194,38 @@ registerStyles(
       content: var(--material-icons-clear);
     }
 
+    [part$='button']::after {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background-color: var(--material-body-text-color);
+      transform: scale(0);
+      opacity: 0;
+      transition: transform 0.08s, opacity 0.01s;
+      will-change: transform, opacity;
+    }
+
+    [part$='button']:hover::after {
+      opacity: 0.08;
+    }
+
+    [part$='button']:focus::after {
+      opacity: 0.12;
+    }
+
+    [part$='button']:active::after {
+      opacity: 0.16;
+    }
+
+    [part$='button']:focus::after,
+    [part$='button']:active::after {
+      transform: scale(1.2);
+    }
+
     [part='error'] {
       color: var(--material-error-text-color);
     }