diff --git a/.circleci/config.yml b/.circleci/config.yml index 5544424ed14..bfbecbf87d2 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -42,7 +42,7 @@ commands: - restore_cache: name: Restore Golden Images Cache keys: - - v1-golden-images-<< parameters.regression_color >>-<< parameters.regression_scale >>-746ba68179ee3bdb5c72a4d60cfc5d1036346a08 + - v1-golden-images-<< parameters.regression_color >>-<< parameters.regression_scale >>-04aa5bb7e349289ef820679eceba33db6b2fc292 - v1-golden-images-master-<< parameters.regression_color >>-<< parameters.regression_scale >>- - run: yarn test:visual:ci --color=<< parameters.regression_color >> --scale=<< parameters.regression_scale >> - run: diff --git a/__snapshots__/Action menu.md b/__snapshots__/Action menu.md deleted file mode 100644 index 4fcc13af2fe..00000000000 --- a/__snapshots__/Action menu.md +++ /dev/null @@ -1,167 +0,0 @@ -# `Action menu` - -#### `loads` - -```html - - - Deselect - - - Select Inverse - - - Feather... - - - Select and Mask... - - - - - Save Selection - - - Make Work Path - - - -``` - -```html - - - - -``` - -#### `loads - [label]` - -```html - - - Deselect - - - Select Inverse - - - Feather... - - - Select and Mask... - - - - - Save Selection - - - Make Work Path - - - -``` - -```html - - - - -``` - diff --git a/__snapshots__/Actionbar.md b/__snapshots__/Actionbar.md deleted file mode 100644 index 758c34bf96b..00000000000 --- a/__snapshots__/Actionbar.md +++ /dev/null @@ -1,41 +0,0 @@ -# `Actionbar` - -#### `loads` - -```html - - 228 Selected - -
- - - - -
- -``` - -```html - - - - - -``` - diff --git a/__snapshots__/Button.md b/__snapshots__/Button.md index 229770062e9..f323d3a5b49 100644 --- a/__snapshots__/Button.md +++ b/__snapshots__/Button.md @@ -1,89 +1,5 @@ # `Button` -#### `loads default` - -```html - - -``` - -#### `loads default w/ element content` - -```html - - -``` - -#### `loads default w/ an icon` - -```html - - -``` - -#### `loads default only icon` - -```html - - -``` - -#### `loads default w/ an icon on the right` - -```html - - -``` - #### `loads with href` ```html diff --git a/__snapshots__/Dropdown.md b/__snapshots__/Dropdown.md index af94b9f9d4e..dad6bba03e8 100644 --- a/__snapshots__/Dropdown.md +++ b/__snapshots__/Dropdown.md @@ -85,93 +85,3 @@ ``` -#### `renders invalid` - -```html - - - Deselect - - - Select Inverse - - - Feather... - - - Select and Mask... - - - - - Save Selection - - - Make Work Path - - - -``` - -```html - - - - -``` - diff --git a/__snapshots__/Icon.md b/__snapshots__/Icon.md deleted file mode 100644 index 6584bda5812..00000000000 --- a/__snapshots__/Icon.md +++ /dev/null @@ -1,9 +0,0 @@ -# `Icon` - -#### `loads w/ src` - -```html - - -``` - diff --git a/__snapshots__/Menu item.md b/__snapshots__/Menu item.md deleted file mode 100644 index b860349d797..00000000000 --- a/__snapshots__/Menu item.md +++ /dev/null @@ -1,24 +0,0 @@ -# `Menu item` - -#### `renders` - -```html - - -``` - diff --git a/__snapshots__/Menu.md b/__snapshots__/Menu.md deleted file mode 100644 index 80a6106b1ca..00000000000 --- a/__snapshots__/Menu.md +++ /dev/null @@ -1,54 +0,0 @@ -# `Menu` - -#### `renders w/ menu items` - -```html - - Deselect - - - Select Inverse - - - Feather... - - - Select and Mask... - - - - - Save Selection - - - Make Work Path - - -``` - diff --git a/__snapshots__/Search.md b/__snapshots__/Search.md index 3aa6a7f3fd5..f51d4e42301 100644 --- a/__snapshots__/Search.md +++ b/__snapshots__/Search.md @@ -1,24 +1,5 @@ # `Search` -#### `loads` - -```html -
- - - -
- -``` - #### `can be cleared` ```html @@ -38,7 +19,7 @@ data-js-focus-visible="" id="button" label="Reset" - tabindex="0" + tabindex="-1" variant="" > diff --git a/__snapshots__/Sidenav.md b/__snapshots__/Sidenav.md deleted file mode 100644 index 492d02f2946..00000000000 --- a/__snapshots__/Sidenav.md +++ /dev/null @@ -1,32 +0,0 @@ -# `Sidenav` - -#### `loads` - -```html - - -``` - -```html - - - - - - - -``` - diff --git a/__snapshots__/Slider.md b/__snapshots__/Slider.md index e69cbee13e5..63cc1efbe69 100644 --- a/__snapshots__/Slider.md +++ b/__snapshots__/Slider.md @@ -8,6 +8,7 @@ for="input" id="label" > + Slider
+ Color Slider
+ Ticked Slider
- - - - -``` - diff --git a/__snapshots__/Toast.md b/__snapshots__/Toast.md deleted file mode 100644 index 19a2179bfa5..00000000000 --- a/__snapshots__/Toast.md +++ /dev/null @@ -1,170 +0,0 @@ -# `Toast` - -#### `loads` - -```html -
-
- - -
- - -
-
- - -
- -``` - -#### `loads - [variant="negative"]` - -```html - - -
-
- - -
- - -
-
- - -
- -``` - -#### `loads - [variant="positive"]` - -```html - - -
-
- - -
- - -
-
- - -
- -``` - -#### `loads - [variant="info"]` - -```html - - -
-
- - -
- - -
-
- - -
- -``` - -#### `loads - [variant="error"]` - -```html - - -
-
- - -
- - -
-
- - -
- -``` - -#### `loads - [variant="warning"]` - -```html - - -
-
- - -
- - -
-
- - -
- -``` - diff --git a/__snapshots__/Tooltip.md b/__snapshots__/Tooltip.md deleted file mode 100644 index a337239929c..00000000000 --- a/__snapshots__/Tooltip.md +++ /dev/null @@ -1,16 +0,0 @@ -# `Tooltip` - -#### `loads` - -```html - - - - - - - - - -``` - diff --git a/__snapshots__/card.md b/__snapshots__/card.md deleted file mode 100644 index feb3d9b5acf..00000000000 --- a/__snapshots__/card.md +++ /dev/null @@ -1,80 +0,0 @@ -# `card` - -#### `loads` - -```html -
- - -
-
- -
-
- JPG -
-
-
- - -``` - -#### `loads - [quiet]` - -```html -
- - -
-
- -
-
- JPG -
- - -
-
- -``` - -#### `loads - [gallery]` - -```html -
- - -
-
- -
- -``` - diff --git a/package.json b/package.json index 0c7dba37416..458ed594f95 100644 --- a/package.json +++ b/package.json @@ -108,11 +108,11 @@ "@commitlint/cli": "^8.3.5", "@commitlint/config-conventional": "^8.3.4", "@commitlint/config-lerna-scopes": "^8.3.4", - "@open-wc/building-webpack": "^2.13.31", - "@open-wc/demoing-storybook": "^2.3.3", + "@open-wc/building-webpack": "^2.13.33", + "@open-wc/demoing-storybook": "^2.3.6", "@open-wc/polyfills-loader": "^0.3.3", "@open-wc/testing": "^2.5.17", - "@open-wc/testing-karma": "^3.4.0", + "@open-wc/testing-karma": "^3.4.2", "@spectrum-css/table": "^2.0.6", "@types/chai": "^4.1.7", "@types/command-line-args": "^5.0.0", diff --git a/packages/action-menu/package.json b/packages/action-menu/package.json index b8b04b8a700..5f836219237 100644 --- a/packages/action-menu/package.json +++ b/packages/action-menu/package.json @@ -43,6 +43,7 @@ }, "dependencies": { "@spectrum-web-components/dropdown": "^0.5.5", + "@spectrum-web-components/icons-workflow": "^0.2.2", "@spectrum-web-components/menu": "^0.2.7", "@spectrum-web-components/menu-item": "^0.5.4", "@spectrum-web-components/shared": "^0.4.7", diff --git a/packages/action-menu/src/action-menu.ts b/packages/action-menu/src/action-menu.ts index 5a950bd550d..9307bbf087c 100644 --- a/packages/action-menu/src/action-menu.ts +++ b/packages/action-menu/src/action-menu.ts @@ -19,6 +19,7 @@ import { } from 'lit-element'; import { DropdownBase } from '@spectrum-web-components/dropdown'; import { ObserveSlotText } from '@spectrum-web-components/shared/lib/observe-slot-text'; +import { MoreIcon } from '@spectrum-web-components/icons-workflow'; import actionMenuStyles from './action-menu.css.js'; /** @@ -45,18 +46,7 @@ export class ActionMenu extends ObserveSlotText(DropdownBase) { return [ html` - + ${MoreIcon({ hidden: this.hasLabel })}
=> await fixture( @@ -50,12 +48,11 @@ const actionMenuFixture = async (): Promise => describe('Action menu', () => { it('loads', async () => { const el = await actionMenuFixture(); - await waitForPredicate(() => !!window.applyFocusVisiblePolyfill); await elementUpdated(el); expect(el).to.not.be.undefined; - expect(el).lightDom.to.equalSnapshot(); - expect(el).shadowDom.to.equalSnapshot(); + + await expect(el).to.be.accessible(); }); it('loads - [label]', async () => { const el = await fixture( @@ -86,16 +83,12 @@ describe('Action menu', () => { ` ); - await waitForPredicate(() => !!window.applyFocusVisiblePolyfill); await elementUpdated(el); - expect(el).to.not.be.undefined; - expect(el).lightDom.to.equalSnapshot(); - expect(el).shadowDom.to.equalSnapshot(); + await expect(el).to.be.accessible(); }); it('stays `quiet`', async () => { const el = await actionMenuFixture(); - await waitForPredicate(() => !!window.applyFocusVisiblePolyfill); await elementUpdated(el); expect(el.quiet).to.be.true; @@ -107,7 +100,6 @@ describe('Action menu', () => { }); it('stay `valid`', async () => { const el = await actionMenuFixture(); - await waitForPredicate(() => !!window.applyFocusVisiblePolyfill); await elementUpdated(el); @@ -120,7 +112,6 @@ describe('Action menu', () => { }); it('opens unmeasured', async () => { const el = await actionMenuFixture(); - await waitForPredicate(() => !!window.applyFocusVisiblePolyfill); await elementUpdated(el); const button = el.button as HTMLButtonElement; diff --git a/packages/action-menu/tsconfig.json b/packages/action-menu/tsconfig.json index 7cc6745c05b..9f2d44415c8 100644 --- a/packages/action-menu/tsconfig.json +++ b/packages/action-menu/tsconfig.json @@ -6,5 +6,9 @@ "rootDir": "./src" }, "include": ["src/*.ts"], - "references": [{ "path": "../dropdown" }, { "path": "../shared" }] + "references": [ + { "path": "../dropdown" }, + { "path": "../icons-workflow" }, + { "path": "../shared" } + ] } diff --git a/packages/actionbar/stories/actionbar.stories.ts b/packages/actionbar/stories/actionbar.stories.ts index 95f0412b131..b4532013d24 100644 --- a/packages/actionbar/stories/actionbar.stories.ts +++ b/packages/actionbar/stories/actionbar.stories.ts @@ -10,13 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { TemplateResult } from 'lit-html'; -import { ifDefined } from 'lit-html/directives/if-defined'; import '../'; -import { actionbarVariants } from '../'; -import { html, boolean, select } from '@open-wc/demoing-storybook'; -import './../../checkbox/'; -import './../../button/'; +import { html } from '@open-wc/demoing-storybook'; +import '@spectrum-web-components/checkbox'; +import '@spectrum-web-components/button'; +import '@spectrum-web-components/button-group'; +import { EditIcon, MoreIcon } from '@spectrum-web-components/icons-workflow'; export default { component: 'sp-actionbar', @@ -24,39 +24,21 @@ export default { }; export const Default = (): TemplateResult => { - const variants = ['', ...actionbarVariants]; return html` - + 228 Selected -
+ - - - + + ${EditIcon()} + - - - - - + + ${MoreIcon()} + -
+ `; }; diff --git a/packages/actionbar/test/actionbar.test.ts b/packages/actionbar/test/actionbar.test.ts index dce372ba00c..4f8250f3cd9 100644 --- a/packages/actionbar/test/actionbar.test.ts +++ b/packages/actionbar/test/actionbar.test.ts @@ -9,53 +9,21 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ +import { fixture, elementUpdated, html, expect } from '@open-wc/testing'; import '../'; import { Actionbar } from '../'; -import { fixture, elementUpdated, html, expect } from '@open-wc/testing'; -import { waitForPredicate } from '../../../test/testing-helpers'; -import '../../shared/lib/focus-visible.js'; +import { Default } from '../stories/actionbar.stories'; describe('Actionbar', () => { it('loads', async () => { - const el = await fixture( - html` - - 228 Selected -
- - - - - - - - - - - - -
- - ` - ); + const el = await fixture(Default()); - await waitForPredicate(() => !!window.applyFocusVisiblePolyfill); await elementUpdated(el); expect(el).to.not.be.undefined; - expect(el).lightDom.to.equalSnapshot(); - expect(el).shadowDom.to.equalSnapshot(); + + await expect(el).to.be.accessible(); }); it('accepts variants', async () => { diff --git a/packages/avatar/test/avatar.test.ts b/packages/avatar/test/avatar.test.ts index 825fe4f4583..446f1324981 100644 --- a/packages/avatar/test/avatar.test.ts +++ b/packages/avatar/test/avatar.test.ts @@ -13,6 +13,20 @@ import { Avatar } from '../'; import { fixture, html, expect, elementUpdated } from '@open-wc/testing'; describe('Avatar', () => { + it('loads accessibly', async () => { + const el = await fixture( + html` + + ` + ); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + }); it('loads with everything set', async () => { const el = await fixture( html` diff --git a/packages/banner/test/banner.test.ts b/packages/banner/test/banner.test.ts index ba349a33c09..bde43a3dc7b 100644 --- a/packages/banner/test/banner.test.ts +++ b/packages/banner/test/banner.test.ts @@ -44,6 +44,10 @@ describe('banner', () => { ); }); + it('loads accessibly', async () => { + await expect(testDiv).to.be.accessible(); + }); + it('loads info', () => { const el = testDiv.querySelector('sp-banner[type=info]') as Banner; diff --git a/packages/button-group/stories/button-group.stories.ts b/packages/button-group/stories/button-group.stories.ts index dd3fe2f6546..49c4c2b7c40 100644 --- a/packages/button-group/stories/button-group.stories.ts +++ b/packages/button-group/stories/button-group.stories.ts @@ -74,17 +74,17 @@ export const actionButtonsIcons = (): TemplateResult => { export const actionButtonsIconsOnly = (): TemplateResult => { return html` - + ${PropertiesIcon({ hidden: true })} - + ${InfoIcon({ hidden: true })} - + ${ViewAllTagsIcon({ hidden: true })} @@ -141,17 +141,17 @@ export const actionButtonsVerticalIcons = (): TemplateResult => { export const actionButtonsVerticalIconsOnly = (): TemplateResult => { return html` - + ${PropertiesIcon({ hidden: true })} - + ${InfoIcon({ hidden: true })} - + ${ViewAllTagsIcon({ hidden: true })} diff --git a/packages/button-group/test/button-group.test.ts b/packages/button-group/test/button-group.test.ts index 47777ea3708..ec585f36544 100644 --- a/packages/button-group/test/button-group.test.ts +++ b/packages/button-group/test/button-group.test.ts @@ -31,55 +31,55 @@ describe('Buttongroup', () => { await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); it('loads default button-group accessibly with sp-action-button', async () => { const el = await fixture(actionButtons()); await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); it('loads default button-group accessibly with sp-action-button and icons', async () => { const el = await fixture(actionButtonsIcons()); await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); it('loads default button-group accessibly with sp-action-button, icons only', async () => { const el = await fixture(actionButtonsIconsOnly()); await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); it('loads default button-group[vertial] accessibly with sp-button', async () => { const el = await fixture(buttonsVertical()); await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); it('loads default button-group[vertial] accessibly with sp-action-button', async () => { const el = await fixture(actionButtonsVertical()); await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); it('loads default button-group[vertial] accessibly with sp-action-button and icons', async () => { const el = await fixture(actionButtonsVerticalIcons()); await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); it('loads default button-group[vertial] accessibly with sp-action-button, icons only', async () => { const el = await fixture(actionButtonsVerticalIconsOnly()); await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); }); diff --git a/packages/button/test/action-button.test.ts b/packages/button/test/action-button.test.ts index 3f8abd1e60e..5d6c2973bb2 100644 --- a/packages/button/test/action-button.test.ts +++ b/packages/button/test/action-button.test.ts @@ -26,7 +26,7 @@ describe('Button', () => { await elementUpdated(el); expect(el).to.not.be.undefined; expect(el.textContent).to.include('Button'); - expect(el).shadowDom.to.equalSnapshot(); + await expect(el).to.be.accessible(); }); it('toggles', async () => { const el = await fixture( diff --git a/packages/button/test/button.test.ts b/packages/button/test/button.test.ts index 71c793483e8..e5afb0fa515 100644 --- a/packages/button/test/button.test.ts +++ b/packages/button/test/button.test.ts @@ -40,18 +40,18 @@ describe('Button', () => { await elementUpdated(el); expect(el).to.not.be.undefined; expect(el.textContent).to.include('Button'); - expect(el).shadowDom.to.equalSnapshot(); + await expect(el).to.be.accessible(); }); it('loads default w/ element content', async () => { const el = await fixture
-
+
${!this.mode || this.hasFooter diff --git a/packages/dialog/stories/dialog-wrapper.stories.ts b/packages/dialog/stories/dialog-wrapper.stories.ts index 8ebc8e4357e..e056f3be5ce 100644 --- a/packages/dialog/stories/dialog-wrapper.stories.ts +++ b/packages/dialog/stories/dialog-wrapper.stories.ts @@ -23,6 +23,29 @@ export default { component: 'sp-dialog-wrapper', }; +export const wrapperLabeledHero = (): TemplateResult => { + const noTransitions = boolean('No Transitions', false, 'Testing'); + return html` + + Content of the dialog + + + Toggle Dialog + + `; +}; + export const wrapperDismissible = (): TemplateResult => { const noTransitions = boolean('No Transitions', false, 'Testing'); return html` diff --git a/packages/dialog/test/dialog-wrapper.test.ts b/packages/dialog/test/dialog-wrapper.test.ts index f316c7a0775..4cc4fe29e7f 100644 --- a/packages/dialog/test/dialog-wrapper.test.ts +++ b/packages/dialog/test/dialog-wrapper.test.ts @@ -17,6 +17,7 @@ import '..'; import { Dialog, DialogWrapper } from '..'; import { Button } from '@spectrum-web-components/button'; import { + wrapperLabeledHero, wrapperDismissible, wrapperButtons, wrapperFullscreen, @@ -28,14 +29,21 @@ describe('Dialog Wrapper', () => { await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); + }); + it('loads labeled hero dialog accessibly', async () => { + const el = await fixture(wrapperLabeledHero()); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); }); it('loads fullscreen wrapped dialog accessibly', async () => { const el = await fixture(wrapperFullscreen()); await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); it('dismisses', async () => { const el = await fixture(wrapperDismissible()); diff --git a/packages/dialog/test/dialog.test.ts b/packages/dialog/test/dialog.test.ts index 0d87bf39bd7..68eeadf42de 100644 --- a/packages/dialog/test/dialog.test.ts +++ b/packages/dialog/test/dialog.test.ts @@ -27,28 +27,28 @@ describe('Dialog', () => { await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); it('loads `[size=alert]` dialog accessibly', async () => { const el = await fixture(alertError()); await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); it('loads `[dismissible]` dialog accessibly', async () => { const el = await fixture(dismissible()); await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); it('loads `[mode=fullscreen]` dialog accessibly', async () => { const el = await fixture(fullscreen()); await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); it('loads dialog without footer accessibly', async () => { const el = await fixture(html` @@ -60,7 +60,7 @@ describe('Dialog', () => { await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); it('closes', async () => { const el = await fixture(dismissible()); diff --git a/packages/dropdown/test/dropdown.test.ts b/packages/dropdown/test/dropdown.test.ts index f613f9a816a..4c2fa1f5ce7 100644 --- a/packages/dropdown/test/dropdown.test.ts +++ b/packages/dropdown/test/dropdown.test.ts @@ -71,15 +71,14 @@ const dropdownFixture = async (): Promise => { }; describe('Dropdown', () => { - it('loads', async () => { + it('loads accessibly', async () => { const el = await dropdownFixture(); await elementUpdated(el); - expect(el).to.not.be.undefined; - expect(el).lightDom.to.equalSnapshot(); - expect(el).shadowDom.to.equalSnapshot(); + + await expect(el).to.be.accessible(); }); - it('renders invalid', async () => { + it('renders invalid accessibly', async () => { const el = await dropdownFixture(); await elementUpdated(el); @@ -87,9 +86,17 @@ describe('Dropdown', () => { el.invalid = true; await elementUpdated(el); - expect(el).to.not.be.undefined; - expect(el).lightDom.to.equalSnapshot(); - expect(el).shadowDom.to.equalSnapshot(); + await expect(el).to.be.accessible(); + }); + it('renders selection accessibly', async () => { + const el = await dropdownFixture(); + + await elementUpdated(el); + + el.value = 'option-2'; + await elementUpdated(el); + + await expect(el).to.be.accessible(); }); it('closes when becoming disabled', async () => { const el = await dropdownFixture(); diff --git a/packages/icon/stories/icon.stories.ts b/packages/icon/stories/icon.stories.ts index 6d3de401c1d..9065846ed41 100644 --- a/packages/icon/stories/icon.stories.ts +++ b/packages/icon/stories/icon.stories.ts @@ -48,7 +48,7 @@ export const imageIcon = (): TemplateResult => { return html` ${sizes.map( (size) => html` - + ` )} `; diff --git a/packages/icon/test/icon.test.ts b/packages/icon/test/icon.test.ts index a2d2854ee19..8a4183c933e 100644 --- a/packages/icon/test/icon.test.ts +++ b/packages/icon/test/icon.test.ts @@ -45,6 +45,7 @@ describe('Icon', () => { const el = await fixture( html` @@ -52,8 +53,8 @@ describe('Icon', () => { ); await elementUpdated(el); - expect(el).to.not.be.undefined; - expect(el).shadowDom.to.equalSnapshot(); + + await expect(el).to.be.accessible(); }); it('loads w/ label', async () => { diff --git a/packages/link/test/link.test.ts b/packages/link/test/link.test.ts index 93fb03201e4..032dbc65767 100644 --- a/packages/link/test/link.test.ts +++ b/packages/link/test/link.test.ts @@ -27,14 +27,12 @@ describe('Link', () => { await elementUpdated(el); expect(el).to.not.be.undefined; expect(el.textContent).to.include('Default Link'); - // make sure href is being passed to - expect(el).shadowDom.to.equal( - `` - ); + + await expect(el).to.be.accessible(); }); it('loads[download]', async () => { - const dlel = await fixture( + const el = await fixture( html` Default Link @@ -42,12 +40,10 @@ describe('Link', () => { ` ); - await elementUpdated(dlel); - expect(dlel).to.not.be.undefined; - expect(dlel.textContent).to.include('Default Link'); - // make sure href is being passed to - expect(dlel).shadowDom.to.equal( - `` - ); + await elementUpdated(el); + expect(el).to.not.be.undefined; + expect(el.textContent).to.include('Default Link'); + + await expect(el).to.be.accessible(); }); }); diff --git a/packages/menu-group/test/menu-group.test.ts b/packages/menu-group/test/menu-group.test.ts index b6401b438bd..22109127582 100644 --- a/packages/menu-group/test/menu-group.test.ts +++ b/packages/menu-group/test/menu-group.test.ts @@ -79,5 +79,7 @@ describe('Menu group', () => { expect(firstLabelledById).to.not.be.null; expect(secondLabelledById).to.not.be.null; expect(firstLabelledById).to.not.equal(secondLabelledById); + + await expect(el).to.be.accessible(); }); }); diff --git a/packages/menu-item/test/menu-item.test.ts b/packages/menu-item/test/menu-item.test.ts index b2b79a946fb..e24558c0512 100644 --- a/packages/menu-item/test/menu-item.test.ts +++ b/packages/menu-item/test/menu-item.test.ts @@ -12,21 +12,25 @@ governing permissions and limitations under the License. import '../'; import { MenuItem } from '../'; +import '@spectrum-web-components/menu'; +import { Menu } from '@spectrum-web-components/menu'; import { fixture, elementUpdated, html, expect } from '@open-wc/testing'; describe('Menu item', () => { it('renders', async () => { - const el = await fixture( + const el = await fixture( html` - - Selected - + + + Selected + + ` ); await elementUpdated(el); - expect(el).shadowDom.to.equalSnapshot(); + await expect(el).to.be.accessible(); }); it('value attribute', async () => { const el = await fixture( diff --git a/packages/menu/test/menu.test.ts b/packages/menu/test/menu.test.ts index 2f40f0c09eb..21150d27d16 100644 --- a/packages/menu/test/menu.test.ts +++ b/packages/menu/test/menu.test.ts @@ -21,8 +21,6 @@ import { html, expect, } from '@open-wc/testing'; -import { waitForPredicate } from '../../../test/testing-helpers'; -import '../../shared/lib/focus-visible.js'; const keyboardEvent = (code: string): KeyboardEvent => new KeyboardEvent('keydown', { @@ -80,10 +78,9 @@ describe('Menu', () => { ` ); - await waitForPredicate(() => !!window.applyFocusVisiblePolyfill); await elementUpdated(el); - expect(el).lightDom.to.equalSnapshot(); + await expect(el).to.be.accessible(); }); it('renders w/ selected', async () => { @@ -104,7 +101,8 @@ describe('Menu', () => { ); await elementUpdated(el); - expect(el).to.not.be.undefined; + + await expect(el).to.be.accessible(); }); it('handle focus and keyboard input', async () => { diff --git a/packages/popover/test/popover.test.ts b/packages/popover/test/popover.test.ts index c76ea7f99da..8a417294a75 100644 --- a/packages/popover/test/popover.test.ts +++ b/packages/popover/test/popover.test.ts @@ -33,13 +33,14 @@ describe('popover', () => { ` ); + await elementUpdated(popover); }); it('loads', async () => { expect(popover).to.not.equal(undefined); expect(popover.textContent).to.include('Popover Title'); - return true; + await expect(popover).to.be.accessible(); }); it('tip exists only when tip attribute is true', async () => { if (!popover.shadowRoot) throw new Error('No shadowRoot'); @@ -52,8 +53,6 @@ describe('popover', () => { tip = popover.shadowRoot.querySelector('tip') as HTMLElement; expect(tip).to.not.equal(undefined); - - return true; }); it('answers tip query', async () => { diff --git a/packages/radio-group/test/radio-group.test.ts b/packages/radio-group/test/radio-group.test.ts index f3ce9e20fcb..8bf56e1646d 100644 --- a/packages/radio-group/test/radio-group.test.ts +++ b/packages/radio-group/test/radio-group.test.ts @@ -43,7 +43,7 @@ describe('Radio Group', () => { Option 1 Option 2 - + Option 1 Option 2 @@ -83,6 +83,10 @@ describe('Radio Group', () => { expect(radioChildren.length).to.equal(3); }); + it('loads accessibly', async () => { + await expect(testDiv).to.be.accessible(); + }); + it('reflects checked radio with selected property', async () => { const radioGroup = testDiv.querySelector( 'sp-radio-group#test-default' diff --git a/packages/radio/test/radio.test.ts b/packages/radio/test/radio.test.ts index 373535a7251..800196763d9 100644 --- a/packages/radio/test/radio.test.ts +++ b/packages/radio/test/radio.test.ts @@ -57,6 +57,10 @@ describe('Radio', () => { expect(textNode.textContent).to.equal('Option 1'); }); + it('loads accessibly', async () => { + await expect(testDiv).to.be.accessible(); + }); + it('respects checked attribute', () => { const el1 = document.querySelector('[value=first]') as Radio; const el2 = testDiv.querySelector('[value=second]') as Radio; diff --git a/packages/rule/test/rule.test.ts b/packages/rule/test/rule.test.ts index ebd7db5c0a7..687c98a6a5b 100644 --- a/packages/rule/test/rule.test.ts +++ b/packages/rule/test/rule.test.ts @@ -26,6 +26,6 @@ describe('Rule', () => { await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); }); diff --git a/packages/search/src/search.ts b/packages/search/src/search.ts index a393434d844..575c1b4d479 100644 --- a/packages/search/src/search.ts +++ b/packages/search/src/search.ts @@ -28,6 +28,8 @@ import { MagnifierIcon } from '@spectrum-web-components/icons-ui'; import searchStyles from './search.css.js'; import magnifierStyles from '@spectrum-web-components/icon/lib/spectrum-icon-magnifier.css.js'; +const stopPropagation = (event: Event): void => event.stopPropagation(); + export class Search extends Textfield { public static get styles(): CSSResultArray { return [...super.styles, searchStyles, magnifierStyles]; @@ -60,6 +62,14 @@ export class Search extends Textfield { } } + private handleKeydown(event: KeyboardEvent): void { + const { code } = event; + if (!this.value || code !== 'Escape') { + return; + } + this.reset(); + } + public async reset(): Promise { /* istanbul ignore if */ if (!this.form) { @@ -92,6 +102,7 @@ export class Search extends Textfield { id="form" method=${ifDefined(this.method)} @submit=${this.handleSubmit} + @keydown=${this.handleKeydown} > ${super.render()} @@ -102,7 +113,9 @@ export class Search extends Textfield { ` : html``} diff --git a/packages/search/test/search.test.ts b/packages/search/test/search.test.ts index c6ba16708e2..b7234cd70f1 100644 --- a/packages/search/test/search.test.ts +++ b/packages/search/test/search.test.ts @@ -17,7 +17,7 @@ import '../../shared/lib/focus-visible.js'; import { spy } from 'sinon'; describe('Search', () => { - it('loads', async () => { + it('loads accessibly', async () => { const el = await litFixture( html` @@ -25,9 +25,8 @@ describe('Search', () => { ); await elementUpdated(el); - await waitForPredicate(() => !!window.applyFocusVisiblePolyfill); - expect(el).shadowDom.to.equalSnapshot(); + await expect(el).to.be.accessible(); }); it('can be cleared', async () => { const el = await litFixture( diff --git a/packages/sidenav/src/sidenav-heading.ts b/packages/sidenav/src/sidenav-heading.ts index d9d29ab3e8b..3e04ad9eb07 100644 --- a/packages/sidenav/src/sidenav-heading.ts +++ b/packages/sidenav/src/sidenav-heading.ts @@ -32,9 +32,9 @@ export class SideNavHeading extends LitElement { protected render(): TemplateResult { return html`

${this.label}

-
    +
    -
+
`; } } diff --git a/packages/sidenav/test/sidenav.test.ts b/packages/sidenav/test/sidenav.test.ts index cf25feb97ed..f797dac8bff 100644 --- a/packages/sidenav/test/sidenav.test.ts +++ b/packages/sidenav/test/sidenav.test.ts @@ -13,7 +13,6 @@ governing permissions and limitations under the License. import '../'; import { SideNav, SideNavItem } from '../'; import { fixture, elementUpdated, html, expect } from '@open-wc/testing'; -import { waitForPredicate } from '../../../test/testing-helpers'; import { TemplateResult } from 'lit-html'; import { LitElement } from 'lit-element'; @@ -50,10 +49,8 @@ describe('Sidenav', () => { ); await elementUpdated(el); - await waitForPredicate(() => !!window.applyFocusVisiblePolyfill); - expect(el).shadowDom.to.equalSnapshot(); - expect(el).lightDom.to.equalSnapshot(); + await expect(el).to.be.accessible(); }); it('sets manageTabIndex on new children', async () => { const el = await fixture( diff --git a/packages/slider/src/slider.ts b/packages/slider/src/slider.ts index dd69dffa977..ff88be27783 100644 --- a/packages/slider/src/slider.ts +++ b/packages/slider/src/slider.ts @@ -259,7 +259,7 @@ export class Slider extends Focusable { min="${this.min}" max="${this.max}" aria-disabled=${this.disabled ? 'true' : 'false'} - aria-label=${this.ariaLabel || this.label} + aria-labelledby="label" aria-valuenow=${this.value} aria-valuemin=${this.min} aria-valuemax=${this.max} diff --git a/packages/slider/test/slider.test.ts b/packages/slider/test/slider.test.ts index f263e69c55d..383444f16d5 100644 --- a/packages/slider/test/slider.test.ts +++ b/packages/slider/test/slider.test.ts @@ -28,18 +28,19 @@ describe('Slider', () => { it('loads', async () => { const el = await fixture( html` - + ` ); await elementUpdated(el); + await expect(el).to.be.accessible(); expect(el).shadowDom.to.equalSnapshot(); }); it('loads - [variant="color"]', async () => { const el = await fixture( html` - + ` ); @@ -51,6 +52,7 @@ describe('Slider', () => { const el = await fixture( html` { await elementUpdated(el); + await expect(el).to.be.accessible(); expect(el).shadowDom.to.equalSnapshot(); }); it('receives value from the outside', async () => { diff --git a/packages/switch/src/switch.ts b/packages/switch/src/switch.ts index 1f69805a754..fd4f0d35498 100644 --- a/packages/switch/src/switch.ts +++ b/packages/switch/src/switch.ts @@ -41,5 +41,9 @@ export class Switch extends CheckboxBase { protected firstUpdated(changes: PropertyValues): void { super.firstUpdated(changes); this.inputElement.setAttribute('role', 'switch'); + this.inputElement.setAttribute( + 'aria-checked', + this.checked ? 'true' : 'false' + ); } } diff --git a/packages/switch/test/switch.test.ts b/packages/switch/test/switch.test.ts index c88c98a79c3..76e1a4d72fc 100644 --- a/packages/switch/test/switch.test.ts +++ b/packages/switch/test/switch.test.ts @@ -15,15 +15,26 @@ import { Switch } from '../'; import { fixture, elementUpdated, html, expect } from '@open-wc/testing'; describe('Switch', () => { - it('loads', async () => { + it('loads default switch accessibly', async () => { const el = await fixture( html` - + Not Checked ` ); await elementUpdated(el); - expect(el).shadowDom.to.equalSnapshot(); + await expect(el).to.be.accessible(); + }); + it('loads `checked` switch accessibly', async () => { + const el = await fixture( + html` + Checked + ` + ); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); }); }); diff --git a/packages/tab-list/test/tab-list.test.ts b/packages/tab-list/test/tab-list.test.ts index 9d08a65a58b..edf462f4374 100644 --- a/packages/tab-list/test/tab-list.test.ts +++ b/packages/tab-list/test/tab-list.test.ts @@ -46,13 +46,15 @@ const createTabList = async (): Promise => ); describe('TabList', () => { - it('loads', async () => { + it('loads accessibly', async () => { const tabList = await createTabList(); const tabs = tabList.querySelectorAll('sp-tab'); expect(tabList).to.exist; expect(tabs.length).to.equal(3); + + await expect(tabList).to.be.accessible(); }); it('reflects selected tab with selected property', async () => { diff --git a/packages/tab/test/tab.test.ts b/packages/tab/test/tab.test.ts index 685498ad73d..98a70ba0028 100644 --- a/packages/tab/test/tab.test.ts +++ b/packages/tab/test/tab.test.ts @@ -11,9 +11,23 @@ governing permissions and limitations under the License. */ import '../'; import { Tab } from '../'; +import '@spectrum-web-components/tab-list'; import { fixture, elementUpdated, html, expect } from '@open-wc/testing'; describe('Tab', () => { + it('loads default tab accessibly', async () => { + const el = await fixture( + html` + + + + ` + ); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + }); it('Updates label', async () => { const el = await fixture( html` diff --git a/packages/tags/src/tag.ts b/packages/tags/src/tag.ts index 37d7bc3f0c9..5511c34a0fb 100644 --- a/packages/tags/src/tag.ts +++ b/packages/tags/src/tag.ts @@ -86,6 +86,7 @@ export class Tag extends LitElement { { it('loads default tags accessibly', async () => { const el = await fixture( html` - Tag 1 + + Tag 1 + Tag 2 + Tag 3 + Tag 4 + ` ); await elementUpdated(el); - expect(el).to.be.accessible(); - expect(el.hasAttribute('role')).to.be.true; + await expect(el).to.be.accessible(); }); it('dispatches `delete` events on click', async () => { const deleteSpy = spy(); diff --git a/packages/tags/test/tags.test.ts b/packages/tags/test/tags.test.ts index a60ec8cbb63..732d7ffdf87 100644 --- a/packages/tags/test/tags.test.ts +++ b/packages/tags/test/tags.test.ts @@ -48,7 +48,7 @@ describe('Tags', () => { await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); expect(el.hasAttribute('role')).to.be.true; expect(el.hasAttribute('aria-label')).to.be.true; }); @@ -65,7 +65,7 @@ describe('Tags', () => { await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); expect(el.hasAttribute('role')).to.be.true; expect(el.hasAttribute('aria-label')).to.be.true; }); diff --git a/packages/textfield/test/textfield.test.ts b/packages/textfield/test/textfield.test.ts index d899632fedb..787300d73f2 100644 --- a/packages/textfield/test/textfield.test.ts +++ b/packages/textfield/test/textfield.test.ts @@ -14,6 +14,31 @@ import { Textfield } from '../'; import { litFixture, html, elementUpdated, expect } from '@open-wc/testing'; describe('Textfield', () => { + it('loads default textfield accessibly', async () => { + const el = await litFixture( + html` + + ` + ); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + }); + it('loads multiline textfield accessibly', async () => { + const el = await litFixture( + html` + + ` + ); + + await elementUpdated(el); + + await expect(el).to.be.accessible(); + }); it('loads', async () => { const testPlaceholder = 'Enter your name'; const el = await litFixture( diff --git a/packages/toast/test/toast.test.ts b/packages/toast/test/toast.test.ts index 2f875247178..1d73fc2a89a 100644 --- a/packages/toast/test/toast.test.ts +++ b/packages/toast/test/toast.test.ts @@ -21,7 +21,6 @@ import { } from '@open-wc/testing'; import { ClearButton } from '@spectrum-web-components/button'; import { waitForPredicate } from '../../../test/testing-helpers'; -import '../../shared/lib/focus-visible.js'; interface TestableToast { _timeout: number; @@ -37,9 +36,8 @@ describe('Toast', () => { ); await elementUpdated(el); - await waitForPredicate(() => !!window.applyFocusVisiblePolyfill); - expect(el).shadowDom.to.equalSnapshot(); + await expect(el).to.be.accessible(); }); toastVariants.map((variant) => { it(`loads - [variant="${variant}"]`, async () => { @@ -52,9 +50,8 @@ describe('Toast', () => { ); await elementUpdated(el); - await waitForPredicate(() => !!window.applyFocusVisiblePolyfill); - expect(el).shadowDom.to.equalSnapshot(); + await expect(el).to.be.accessible(); }); }); it('loads - timeout', async () => { diff --git a/packages/tooltip/test/tooltip.test.ts b/packages/tooltip/test/tooltip.test.ts index e6f4c0af676..9a991a9515e 100644 --- a/packages/tooltip/test/tooltip.test.ts +++ b/packages/tooltip/test/tooltip.test.ts @@ -25,7 +25,7 @@ describe('Tooltip', () => { await elementUpdated(el); - expect(el).shadowDom.to.equalSnapshot(); + await expect(el).to.be.accessible(); }); it('accepts variants', async () => { const el = await fixture( diff --git a/packages/underlay/test/underlay.test.ts b/packages/underlay/test/underlay.test.ts index 7699ead116b..cdd65d2aae6 100644 --- a/packages/underlay/test/underlay.test.ts +++ b/packages/underlay/test/underlay.test.ts @@ -26,6 +26,6 @@ describe('Underlay', () => { await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); }); diff --git a/projects/templates/plop-templates/test.ts.hbs b/projects/templates/plop-templates/test.ts.hbs index 584cfd859bb..b804502072a 100644 --- a/projects/templates/plop-templates/test.ts.hbs +++ b/projects/templates/plop-templates/test.ts.hbs @@ -26,6 +26,6 @@ describe('{{className name}}', () => { await elementUpdated(el); - expect(el).to.be.accessible(); + await expect(el).to.be.accessible(); }); }); \ No newline at end of file diff --git a/test/tsconfig-test.json b/test/tsconfig-test.json index d69ca5ac5cc..1eaa9a9f98e 100644 --- a/test/tsconfig-test.json +++ b/test/tsconfig-test.json @@ -7,6 +7,7 @@ }, "include": [ "../packages/**/test/*.ts", + "../packages/actionbar/stories/*.ts", "../packages/button-group/stories/*.ts", "../packages/dialog/stories/*.ts", "./testing-helpers.ts", diff --git a/yarn.lock b/yarn.lock index 294076f62d2..a8715b43c52 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2153,10 +2153,10 @@ whatwg-fetch "^3.0.0" whatwg-url "^7.0.0" -"@open-wc/building-webpack@^2.13.31": - version "2.13.31" - resolved "https://registry.yarnpkg.com/@open-wc/building-webpack/-/building-webpack-2.13.31.tgz#346c814c1ada2b40a0dca7b5b098b57deca93080" - integrity sha512-7EhYaUSbRh8QO2yGVH+FZ2sl6gnICCLL+PUgNjz+9vIWrHQOktcdpFKX61AsdOB/J+sLi152Og7OhWoO+mbJ8g== +"@open-wc/building-webpack@^2.13.33": + version "2.13.33" + resolved "https://registry.yarnpkg.com/@open-wc/building-webpack/-/building-webpack-2.13.33.tgz#c66412bcf23142080c540881d0f4c00f7cf7c158" + integrity sha512-SyO9wZXaMp1urD+dJGrfPh92UP4UETab4NLiqZvDZbQ48Cqxrj2ZoNdZR1sfOGDhs6n5etRqF88TjCBRbQSw0g== dependencies: "@babel/core" "^7.9.0" "@babel/plugin-proposal-nullish-coalescing-operator" "^7.8.3" @@ -2171,7 +2171,7 @@ babel-plugin-template-html-minifier "^4.0.0" clean-webpack-plugin "^2.0.0" copy-webpack-plugin "^5.0.1" - es-dev-server "^1.53.0" + es-dev-server "^1.54.1" terser-webpack-plugin "^2.3.0" webpack-merge "^4.1.5" workbox-webpack-plugin "^4.3.1" @@ -2189,10 +2189,10 @@ resolved "https://registry.yarnpkg.com/@open-wc/dedupe-mixin/-/dedupe-mixin-1.2.17.tgz#50fb903fc8785639487d7987caae45d7bba08ec7" integrity sha512-9A3WohqNxEloJa4y1DuBL5zH12cNRNW1vsrkiaLMnOGuQdhibs2XY1oliudsKpvIeNjDXRVRPUdIIzn65BypCw== -"@open-wc/demoing-storybook@^2.3.3": - version "2.3.3" - resolved "https://registry.yarnpkg.com/@open-wc/demoing-storybook/-/demoing-storybook-2.3.3.tgz#90f2f316444079063226c914edd04b528f423b4c" - integrity sha512-TuXZIJJCoOUsSCdEG2OCSLzbDenNf7LwiG850DcgpVHz/6hAdmmPwh6UOyFxp+4Tevjizv9o1y1bk1S2M6Kr6w== +"@open-wc/demoing-storybook@^2.3.6": + version "2.3.6" + resolved "https://registry.yarnpkg.com/@open-wc/demoing-storybook/-/demoing-storybook-2.3.6.tgz#339b18a88c128a4fe7906841556cde73786a53cb" + integrity sha512-Y/uUaNsm8xRjVGPHhoQK+xxAWN3HfHJdGsXn7cedKP987psdZCiww7HjiBH1Nbo1by1AMyK96Mk1bhU8VqiYmw== dependencies: "@babel/core" "^7.9.0" "@babel/generator" "^7.9.6" @@ -2202,15 +2202,15 @@ "@babel/plugin-transform-react-jsx" "^7.9.1" "@babel/preset-env" "^7.9.0" "@mdx-js/mdx" "^1.5.1" - "@open-wc/rollup-plugin-html" "^1.0.5" - "@open-wc/rollup-plugin-polyfills-loader" "^1.0.6" + "@open-wc/rollup-plugin-html" "^1.1.0" + "@open-wc/rollup-plugin-polyfills-loader" "^1.0.7" "@rollup/plugin-node-resolve" "^7.1.1" babel-plugin-bundled-import-meta "^0.3.2" babel-plugin-template-html-minifier "^4.0.0" command-line-args "^5.0.2" command-line-usage "^6.1.0" deepmerge "^4.2.2" - es-dev-server "^1.53.0" + es-dev-server "^1.54.1" es-module-lexer "^0.3.13" fs-extra "^8.1.0" glob "^7.1.3" @@ -2224,16 +2224,16 @@ storybook-addon-markdown-docs "^0.4.0" storybook-prebuilt "^1.5.0" -"@open-wc/karma-esm@^2.16.11": - version "2.16.11" - resolved "https://registry.yarnpkg.com/@open-wc/karma-esm/-/karma-esm-2.16.11.tgz#65261aa9ae9c9f9645d065de41d038a7d0679855" - integrity sha512-CIipVFMZlfoV1Ts+bfqYjSmivZRcUmiPFNSjfkykqsU0eZVe85U8HKHz+wUVolTf9rgHLxvi0QKdOF1Hc5AHjA== +"@open-wc/karma-esm@^2.16.13": + version "2.16.13" + resolved "https://registry.yarnpkg.com/@open-wc/karma-esm/-/karma-esm-2.16.13.tgz#8ad8fd6c97fb011eceb18b76c647f39f323094d7" + integrity sha512-utThmd4pQcD8lp/J0wq/hgmdQtAFN08rB9p8aV7rwg2pBYsnjZkCpylAmqKYz40QEIFIVo6iHHfKvdSJndX6dg== dependencies: "@open-wc/building-utils" "^2.18.0" babel-plugin-istanbul "^5.1.4" chokidar "^3.0.0" deepmerge "^4.2.2" - es-dev-server "^1.53.0" + es-dev-server "^1.54.1" minimatch "^3.0.4" node-fetch "^2.6.0" polyfills-loader "^1.6.1" @@ -2252,24 +2252,25 @@ "@webcomponents/template" "^1.4.0" "@webcomponents/webcomponents-platform" "^1.0.0" -"@open-wc/rollup-plugin-html@^1.0.5": - version "1.0.5" - resolved "https://registry.yarnpkg.com/@open-wc/rollup-plugin-html/-/rollup-plugin-html-1.0.5.tgz#81efa681f3c6a12e5813639ada018a250a999b46" - integrity sha512-EAFiybd7LgckbkktCIMBSj81NkI4EmXYNc7S4rl+9Y3sLtDXvXy1Xf6x0diOSqids8lATW+k3p/H8vOQUvvccA== +"@open-wc/rollup-plugin-html@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@open-wc/rollup-plugin-html/-/rollup-plugin-html-1.1.0.tgz#3aeecc5c4c17562112a3d1fcea964d7bb3853101" + integrity sha512-0VukjFUtC3Ro+kZcQMQqlE9B+FjOTXKJP1ek2jjT1HqeoG5NCHrgGCFe/fLc4G1TDDM5fIuKZ/xcus4TtICWTA== dependencies: "@open-wc/building-utils" "^2.18.0" "@types/html-minifier" "^3.5.3" fs-extra "^8.1.0" + glob "^7.1.3" html-minifier "^4.0.0" parse5 "^5.1.1" terser "^4.6.7" -"@open-wc/rollup-plugin-polyfills-loader@^1.0.6": - version "1.0.6" - resolved "https://registry.yarnpkg.com/@open-wc/rollup-plugin-polyfills-loader/-/rollup-plugin-polyfills-loader-1.0.6.tgz#23a31a50a4ea395813c61434c857442ad63192e7" - integrity sha512-CjR+UgQe2YX+DQBHtphG8hI8xeSAtUacDgbSuYCu0VF1u6wLdtW+zPHQHnog1PqI/yl8er97RwgCYqMhxqpoBQ== +"@open-wc/rollup-plugin-polyfills-loader@^1.0.7": + version "1.0.7" + resolved "https://registry.yarnpkg.com/@open-wc/rollup-plugin-polyfills-loader/-/rollup-plugin-polyfills-loader-1.0.7.tgz#443f3d314c1a3cc3534d02a8579ed878255e60ca" + integrity sha512-ax7jcXWUZaBDO7g3deRvtGNKPHoB9MzHqNAbSqkIY9R1D8cSluzN4LMHdWs0tWKfZzIRJljNvM/1glQqthlJ9A== dependencies: - "@open-wc/rollup-plugin-html" "^1.0.5" + "@open-wc/rollup-plugin-html" "^1.1.0" polyfills-loader "^1.6.1" "@open-wc/scoped-elements@^1.1.1": @@ -2301,12 +2302,12 @@ lit-element "^2.2.1" lit-html "^1.0.0" -"@open-wc/testing-karma@^3.4.0": - version "3.4.0" - resolved "https://registry.yarnpkg.com/@open-wc/testing-karma/-/testing-karma-3.4.0.tgz#1332ba3c6b00db989bd876610dd5cb2fe3488081" - integrity sha512-DIhnpzVTujeFk2SCTPvYhuia9hKcuDugx2pvi3GqiyiSEzqxKBb8Uv/1v2OO78dEgc4DA2soGGybQ87fN0E55Q== +"@open-wc/testing-karma@^3.4.2": + version "3.4.2" + resolved "https://registry.yarnpkg.com/@open-wc/testing-karma/-/testing-karma-3.4.2.tgz#f10936cd757091228a85d144f0d203f36f27bbf9" + integrity sha512-hXbNwGvUwA0OkWIE3UPr/paSwPQuYw0RAkweTaeh1DpqRDlPbd4mvMv4lt+5Ssi4eYioGeXSCpwi6a2WCDqvxQ== dependencies: - "@open-wc/karma-esm" "^2.16.11" + "@open-wc/karma-esm" "^2.16.13" "@types/karma" "^5.0.0" "@types/karma-coverage-istanbul-reporter" "^2.1.0" "@types/karma-mocha" "^1.3.0" @@ -7698,10 +7699,10 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5: string.prototype.trimleft "^2.1.1" string.prototype.trimright "^2.1.1" -es-dev-server@^1.53.0: - version "1.53.0" - resolved "https://registry.yarnpkg.com/es-dev-server/-/es-dev-server-1.53.0.tgz#ad2eaadd4a5b79b815be32bde81864734c4bfe32" - integrity sha512-LoYYLSxqTqf7GkBv6q4vTGGGyyPSVaZUF/jZNogiGdrR8siVYIb9giFvYd7+UnpNGROmGPmkReEF5wCyuvIXMA== +es-dev-server@^1.54.1: + version "1.54.1" + resolved "https://registry.yarnpkg.com/es-dev-server/-/es-dev-server-1.54.1.tgz#4378ab5c4c511a5d5495e3276786014fc4d6b450" + integrity sha512-fHjHcXtT7XLZurLQhWZVNKHWJ3Nm+EC/H87ajmbxoIcawdayioMJmeigvQmh7JJSpleENe7YS+05n5abJwOIgg== dependencies: "@babel/core" "^7.9.0" "@babel/plugin-proposal-dynamic-import" "^7.8.3"