From 59f238a40271e1817591a6a2bc5301dd28083ece Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Wed, 17 Nov 2021 15:36:31 +0200 Subject: [PATCH] fix: set tabindex on the vaadin-upload-file element (#3068) --- dev/upload.html | 28 +++++++ packages/upload/src/vaadin-upload-file.js | 8 +- packages/upload/src/vaadin-upload.js | 5 +- packages/upload/test/a11y.test.js | 42 +--------- .../vaadin-upload-file.test.snap.js | 79 +++++++++++++++++++ .../__snapshots__/vaadin-upload.test.snap.js | 77 ++++++++++++++++++ .../test/dom/vaadin-upload-file.test.js | 22 ++++++ .../upload/test/dom/vaadin-upload.test.js | 27 +++++++ .../upload/theme/lumo/vaadin-upload-styles.js | 14 +++- .../theme/material/vaadin-upload-styles.js | 5 +- 10 files changed, 258 insertions(+), 49 deletions(-) create mode 100644 dev/upload.html create mode 100644 packages/upload/test/dom/__snapshots__/vaadin-upload-file.test.snap.js create mode 100644 packages/upload/test/dom/__snapshots__/vaadin-upload.test.snap.js create mode 100644 packages/upload/test/dom/vaadin-upload-file.test.js create mode 100644 packages/upload/test/dom/vaadin-upload.test.js diff --git a/dev/upload.html b/dev/upload.html new file mode 100644 index 0000000000..ce4efa4663 --- /dev/null +++ b/dev/upload.html @@ -0,0 +1,28 @@ + + + + + + + Upload + + + + + + + + diff --git a/packages/upload/src/vaadin-upload-file.js b/packages/upload/src/vaadin-upload-file.js index b3ecc9fbba..4de51cc2d1 100644 --- a/packages/upload/src/vaadin-upload-file.js +++ b/packages/upload/src/vaadin-upload-file.js @@ -68,10 +68,10 @@ class UploadFile extends ThemableMixin(PolymerElement) { } -
  • +
    -
    -
    + +
    [[file.name]]
    @@ -107,7 +107,7 @@ class UploadFile extends ThemableMixin(PolymerElement) { aria-describedby="name" >
    -
    • + @@ -103,7 +104,9 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
    diff --git a/packages/upload/test/a11y.test.js b/packages/upload/test/a11y.test.js index 555f407a44..1bfbd94a47 100644 --- a/packages/upload/test/a11y.test.js +++ b/packages/upload/test/a11y.test.js @@ -1,32 +1,13 @@ import { expect } from '@esm-bundle/chai'; -import { fixtureSync, nextRender } from '@vaadin/testing-helpers'; +import { fixtureSync } from '@vaadin/testing-helpers'; import '../vaadin-upload.js'; import { createFile } from './common.js'; const FAKE_FILE = createFile(100000, 'application/uknown'); describe('a11y', () => { - describe('', () => { - let uploadElement, fileList; - - beforeEach(async () => { - uploadElement = fixtureSync(``); - uploadElement.files = [FAKE_FILE]; - - await nextRender(); - - fileList = uploadElement.shadowRoot.querySelector('[part=file-list]'); - }); - - describe('file list', () => { - it('should be a
      element', () => { - expect(fileList).to.be.an.instanceOf(HTMLUListElement); - }); - }); - }); - describe('', () => { - let uploadFileElement, i18n, button, name, row; + let uploadFileElement, i18n, button, name; beforeEach(() => { uploadFileElement = fixtureSync(``); @@ -40,25 +21,14 @@ describe('a11y', () => { uploadFileElement.i18n = i18n; uploadFileElement.file = FAKE_FILE; - row = uploadFileElement.shadowRoot.querySelector('[part=row]'); name = uploadFileElement.shadowRoot.querySelector('[part=name]'); }); - describe('row', () => { - it('should be a
    • element', () => { - expect(row).to.be.an.instanceOf(HTMLLIElement); - }); - }); - describe('start button', () => { beforeEach(() => { button = uploadFileElement.shadowRoot.querySelector('[part=start-button]'); }); - it('should be a + + + + + + +`; +/* end snapshot vaadin-upload-file shadow default */ + diff --git a/packages/upload/test/dom/__snapshots__/vaadin-upload.test.snap.js b/packages/upload/test/dom/__snapshots__/vaadin-upload.test.snap.js new file mode 100644 index 0000000000..f84d27d762 --- /dev/null +++ b/packages/upload/test/dom/__snapshots__/vaadin-upload.test.snap.js @@ -0,0 +1,77 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["vaadin-upload shadow default"] = +`
      +
      + + + Upload Files... + + +
      +
      + +
      +
      +       + + Drop files here + +
      +
      + +
        +
      • + + +
        • +
      • + + +
        • +
      • + + +
        • + + + +
      +       + + + +`; +/* end snapshot vaadin-upload shadow default */ + diff --git a/packages/upload/test/dom/vaadin-upload-file.test.js b/packages/upload/test/dom/vaadin-upload-file.test.js new file mode 100644 index 0000000000..1d481985ce --- /dev/null +++ b/packages/upload/test/dom/vaadin-upload-file.test.js @@ -0,0 +1,22 @@ +import { expect } from '@esm-bundle/chai'; +import { fixtureSync } from '@vaadin/testing-helpers'; +import '../../src/vaadin-upload-file.js'; + +describe('vaadin-upload-file', () => { + let uploadFile; + + beforeEach(() => { + uploadFile = fixtureSync(''); + uploadFile.file = { + name: 'Workflow.pdf', + progress: 60, + status: '19.7 MB: 60% (remaining time: 00:12:34)' + }; + }); + + describe('shadow', () => { + it('default', async () => { + await expect(uploadFile).shadowDom.to.equalSnapshot(); + }); + }); +}); diff --git a/packages/upload/test/dom/vaadin-upload.test.js b/packages/upload/test/dom/vaadin-upload.test.js new file mode 100644 index 0000000000..1c6ff9786e --- /dev/null +++ b/packages/upload/test/dom/vaadin-upload.test.js @@ -0,0 +1,27 @@ +import { expect } from '@esm-bundle/chai'; +import { fixtureSync, nextFrame } from '@vaadin/testing-helpers'; +import '../../src/vaadin-upload.js'; + +describe('vaadin-upload', () => { + let upload; + + beforeEach(async () => { + upload = fixtureSync(''); + upload.files = [ + { name: 'Annual Report.docx', complete: true }, + { + name: 'Workflow.pdf', + progress: 60, + status: '19.7 MB: 60% (remaining time: 00:12:34)' + }, + { name: 'Financials.xlsx', error: 'An error occurred' } + ]; + await nextFrame(); + }); + + describe('shadow', () => { + it('default', async () => { + await expect(upload).shadowDom.to.equalSnapshot(); + }); + }); +}); diff --git a/packages/upload/theme/lumo/vaadin-upload-styles.js b/packages/upload/theme/lumo/vaadin-upload-styles.js index 599a3222b8..beb88e9428 100644 --- a/packages/upload/theme/lumo/vaadin-upload-styles.js +++ b/packages/upload/theme/lumo/vaadin-upload-styles.js @@ -62,6 +62,10 @@ registerStyles( line-height: 1; vertical-align: -0.25em; } + + [part='file-list'] > *:not(:first-child) > * { + border-top: 1px solid var(--lumo-contrast-10pct); + } `, { moduleId: 'lumo-upload' } ); @@ -71,8 +75,13 @@ const uploadFile = css` padding: var(--lumo-space-s) 0; } - :host(:not(:first-child)) { - border-top: 1px solid var(--lumo-contrast-10pct); + :host(:focus) { + outline: none; + } + + :host(:focus) [part='row'] { + border-radius: var(--lumo-border-radius-s); + box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct); } [part='row'] { @@ -129,7 +138,6 @@ const uploadFile = css` cursor: var(--lumo-clickable-cursor); } - [part='row']:focus, [part$='button']:focus { outline: none; border-radius: var(--lumo-border-radius-s); diff --git a/packages/upload/theme/material/vaadin-upload-styles.js b/packages/upload/theme/material/vaadin-upload-styles.js index 8a2ad9ca9e..2638da2752 100644 --- a/packages/upload/theme/material/vaadin-upload-styles.js +++ b/packages/upload/theme/material/vaadin-upload-styles.js @@ -106,8 +106,11 @@ registerStyles( padding: 8px; } - [part='row']:focus { + :host(:focus) { outline: none; + } + + :host(:focus) [part='row'] { background-color: var(--material-divider-color); }