chore: dependencies 2023-12 (#2652)

* chore: update dependencies

* chore: update lit

* chore: update typescript

* chore: update owc testing calls

* chore: update tsconfig

* chore: update lit dependency

* chore: resolve some new linting, type, and static a11y errors

* chore: update node version

* chore: ts-node workaround

* chore: juggle ci

* fix: popover a11y

* fix: popover render

* test: fix popover test

* fix: docs build

* fix: syntax errors (pebcak)

* fix(tools): types for a11ySnapshot

* test: fix types

* fix(tools): types

* chore: fix build

* chore: chalk dep

.changeset/tidy-numbers-rush.md

@@ -0,0 +1,10 @@
+---
+"@patternfly/pfe-tools": patch
+"@patternfly/pfe-core": patch
+"@patternfly/elements": patch
+---
+
+"@patternfly/elements": major
+---
+
+Update dependencies, including Lit version 3

.github/workflows/bundle.yml

@@ -25,7 +25,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: npm
 
       - name: Bundle

.github/workflows/preview.yml

@@ -13,7 +13,7 @@ jobs:
         uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: npm
 
       - name: Verify JSPM URL

.github/workflows/release.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: npm
 
       - run: npm ci --prefer-offline

.github/workflows/tests.yml

@@ -40,9 +40,8 @@ jobs:
   #   steps:
   #     - name: Debugging context variables
   #       run: echo "$GITHUB_CONTEXT"
-
-  test:
-    name: Run test suite (Web Test Runner)
+  lint:
+    name: Lint files
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -52,7 +51,7 @@ jobs:
       - name: Configure node version
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: npm
 
       - name: Install dependencies
@@ -62,13 +61,32 @@ jobs:
         id: lint
         run: npm run lint
 
+
+  test:
+    name: Run test suite (Web Test Runner)
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Configures the node version used on GitHub-hosted runners
+      - name: Configure node version
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci --prefer-offline
+
+      - name: install playwright
+        run: npx playwright install
+
       - name: Run tests
         run: npm test
-        if: ${{ always() }}
 
       - name: JUnit Report Action
         uses: mikepenz/action-junit-report@v2.8.2
-        if: ${{ always() }}
         with:
           report_paths: test-results/test-results.xml
           fail_on_failure: true # fail the actions run if the tests failed
@@ -79,10 +97,8 @@ jobs:
     strategy:
       matrix:
         node:
-          - '18'
-          - '19'
-          # https://github.com/TypeStrong/ts-node/issues/1997
-          # - '20'
+          - '20'
+          - '21'
     if: |
       github.event_name == 'workflow_dispatch'
       ||   github.event_name == 'push'
@@ -126,8 +142,9 @@ jobs:
   validate:
     name: Validate successful build on main
     needs:
-      - build
+      - lint
       - test
+      - build
     if: ${{ always() }}
     runs-on: ubuntu-latest
     steps:

.github/workflows/visual-regression.yml

@@ -29,7 +29,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: npm
       - run: npm ci --prefer-offline
 

.nvmrc

@@ -1 +1 @@
-v18.12.1
+v20.10.0

core/pfe-core/package.json

@@ -51,8 +51,8 @@
     "test": "wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.2.6",
-    "lit": "^2.7.2"
+    "@floating-ui/dom": "^1.5.3",
+    "lit": "^3.1.0"
   },
   "repository": {
     "type": "git",

docs/_data/importMap.cjs

@@ -1,8 +1,6 @@
 const fs = require('fs');
 const path = require('path');
-const { promisify } = require('node:util');
-const Glob = require('glob');
-const glob = promisify(Glob);
+const { glob } = require('glob');
 
 const packageLock = JSON.parse(fs.readFileSync(path.join(__dirname, '..', '..', 'package-lock.json')));
 
@@ -46,12 +44,17 @@ const LIT_DEPS = [
       './decorators.js',
       './directive.js',
       './directive-helpers.js',
-      './experimental-hydrate-support.js',
-      './experimental-hydrate.js',
       './html.js',
       './polyfill-support.js',
       './static-html.js',
     ]
+  },
+  {
+    target: `@lit-labs/ssr-client`,
+    subpaths: [
+      '.',
+      './lit-element-hydrate-support.js',
+    ]
   }
 ];
 
@@ -69,7 +72,7 @@ module.exports = async function() {
   const { Generator } = await import('@jspm/generator');
 
   const generator = new Generator({
-    defaultProvider: 'jspm',
+    defaultProvider: 'jspm.io',
     env: ['production', 'browser', 'module']
   });
 

docs/_plugins/create-import-map.cjs

@@ -3,7 +3,7 @@ module.exports = function(eleventyConfig) {
     const { Generator } = await import('@jspm/generator');
 
     const generator = new Generator({
-      defaultProvider: 'jspm',
+      defaultProvider: 'jspm.io',
       env: ['production', 'browser', 'module']
     });
 

docs/docs/develop/import-maps.md

@@ -65,18 +65,18 @@ Once you've generated your import map and added it to your project, you can use
 <script type="importmap">
 {
   "imports": {
-    "@patternfly/elements/pf-card/pf-card.js": "https://ga.jspm.io/npm:@patternfly/elements@2.0.0/pf-card/pf-card.js"
+    "@patternfly/elements/pf-card/pf-card.js": "https://ga.jspm.io/npm:@patternfly/elements@2.5.0/pf-card/pf-card.js"
   },
   "scopes": {
     "https://ga.jspm.io/": {
-      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@1.6.1/reactive-element.js",
-      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@1.6.1/decorators/",
-      "@patternfly/pfe-core/controllers/slot-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@2.0.0/controllers/slot-controller.js",
-      "lit": "https://ga.jspm.io/npm:lit@2.6.1/index.js",
-      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@3.2.2/lit-element.js",
-      "lit-html": "https://ga.jspm.io/npm:lit-html@2.6.1/lit-html.js",
-      "lit-html/": "https://ga.jspm.io/npm:lit-html@2.6.1/",
-      "lit/": "https://ga.jspm.io/npm:lit@2.6.1/",
+      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.2/reactive-element.js",
+      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.2/decorators/",
+      "@patternfly/pfe-core/controllers/slot-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@2.1.0/controllers/slot-controller.js",
+      "lit": "https://ga.jspm.io/npm:lit@3.1.0/index.js",
+      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.0.2/lit-element.js",
+      "lit-html": "https://ga.jspm.io/npm:lit-html@3.1.0/lit-html.js",
+      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.1.0/",
+      "lit/": "https://ga.jspm.io/npm:lit@3.1.0/",
       "tslib": "https://ga.jspm.io/npm:tslib@2.5.0/modules/index.js"
     }
   }
@@ -86,8 +86,8 @@ Once you've generated your import map and added it to your project, you can use
 
 ```javascript
 <script type="module">
-  // resolves to https://ga.jspm.io/npm:@patternfly/elements@2.0.0/pf-card/pf-card.js
-  import '@patternfly/elements/pf-card/pf-card.js';  
+  // resolves to https://ga.jspm.io/npm:@patternfly/elements@2.5.0/pf-card/pf-card.js
+  import '@patternfly/elements/pf-card/pf-card.js';
 </script>
 ```
 

elements/package.json

@@ -126,14 +126,14 @@
     "Mark Caron <mark@redhat.com> (https://github.com/markcaron)",
     "Michael Clayton <mclayton@redhat.com>",
     "Michael Potter",
-    "Steven Spriggs <sspriggs@redhat.com",
+    "Steven Spriggs <sspriggs@redhat.com>",
     "castastrophe (https://github.com/castastrophe)",
     "Wes Ruvalcaba"
   ],
   "dependencies": {
     "@patternfly/icons": "^1.0.2",
-    "@patternfly/pfe-core": "^2.4.0",
-    "lit": "2.6.1",
-    "tslib": "^2.4.1"
+    "@patternfly/pfe-core": "^2.4.1",
+    "lit": "^3.1.0",
+    "tslib": "^2.6.2"
   }
 }

elements/pf-avatar/test/pf-avatar.spec.ts

@@ -39,7 +39,7 @@ describe('<pf-avatar>', function() {
     beforeEach(async function() {
       element = await createFixture(html`<pf-avatar @load="${onLoad}"></pf-avatar>`);
       setTimeout(() => element.src = datauri);
-      await oneEvent(element, 'load');
+      await oneEvent(element, 'load', false);
     });
     it('loads the image', function() {
       expect(loaded).to.equal(datauri);

elements/pf-button/BaseButton.ts

@@ -1,3 +1,5 @@
+// we will shortly remove this file in #2631
+/* eslint-disable lit-a11y/no-aria-slot */
 import type { TemplateResult } from 'lit';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators/property.js';

elements/pf-icon/test/pf-icon.spec.ts

@@ -11,7 +11,7 @@ describe('<pf-icon>', function() {
   let element: PfIcon;
 
   async function expectIconsEqual(actualIconUrl: URL) {
-    await oneEvent(element, 'load');
+    await oneEvent(element, 'load', false);
     const tpl = await import(actualIconUrl.pathname).then(x => x.default);
     const rootNode = render(tpl, document.createDocumentFragment());
     const actual = element.shadowRoot?.querySelector('svg');
@@ -76,7 +76,7 @@ describe('<pf-icon>', function() {
       element.innerHTML = `<p>Icon failed to load.</p>`;
       // Check that the fallback is hidden when the icon is successfully loaded
       element.icon = 'bike';
-      await oneEvent(element, 'load');
+      await oneEvent(element, 'load', false);
       expect(element).shadowDom.to.equal(`
       <div id="container" aria-hidden="true">
         <span part="fallback" hidden>
@@ -89,7 +89,7 @@ describe('<pf-icon>', function() {
       const newColor = 'rgb(11, 12, 13)';
       element.style.setProperty('color', newColor);
       element.icon = 'atom';
-      await oneEvent(element, 'load');
+      await oneEvent(element, 'load', false);
       const color = getComputedStyle(element.shadowRoot!.querySelector('svg')!).getPropertyValue('color');
       expect(color).to.equal(newColor);
     });
@@ -117,14 +117,14 @@ describe('<pf-icon>', function() {
     element.icon = 'foo';
     await element.updateComplete;
     PfIcon.addIconSet('asdfasdf', () => url);
-    await oneEvent(element, 'load');
+    await oneEvent(element, 'load', false);
     await expectIconsEqual(url);
   });
 
   it(`should show fallback when given a valid icon set but invalid icon name, fallback provided`, async function() {
     element.innerHTML = '<p>Image failed to load.</p>.';
     element.icon = 'no-scrubs';
-    await oneEvent(element, 'error');
+    await oneEvent(element, 'error', false);
     expect(element.shadowRoot!.querySelector('svg')).to.not.be.ok;
     expect(element).shadowDom.to.equal(`
       <div id="container" aria-hidden="true">
@@ -138,7 +138,7 @@ describe('<pf-icon>', function() {
     element.innerHTML = '<p>Image failed to load.</p>.';
     element.set = 'choopee-doopee-pie';
     element.icon = 'bike';
-    await oneEvent(element, 'error');
+    await oneEvent(element, 'error', false);
     expect(element.shadowRoot!.querySelector('svg')).to.not.be.ok;
     expect(element).shadowDom.to.equal(`
       <div id="container" aria-hidden="true">

elements/pf-jump-links/pf-jump-links-list.ts

@@ -13,11 +13,9 @@ export class PfJumpLinksList extends LitElement {
   static readonly styles = [style];
 
   render() {
-    return html`
-      <div id="container" role="listbox">
-        <slot></slot>
-      </div>
-    `;
+    // TODO: add label
+    // eslint-disable-next-line lit-a11y/accessible-name
+    return html`<div id="container" role="listbox"><slot></slot></div>`;
   }
 }
 

elements/pf-jump-links/pf-jump-links.ts

@@ -109,10 +109,14 @@ export class PfJumpLinks extends LitElement {
             <pf-icon icon="chevron-right"></pf-icon>
             <span id="label">${this.label}</span>
           </summary>
-          <slot role="listbox" @slotchange="${this.#updateItems}"></slot>
+          <div role="listbox" aria-labelledby="label">
+            <slot @slotchange="${this.#updateItems}"></slot>
+          </div>
         </details>` : html`
         <span id="label">${this.label}</span>
-        <slot role="listbox" @slotchange="${this.#updateItems}"></slot>`}
+        <div role="listbox" aria-labelledby="label">
+          <slot @slotchange="${this.#updateItems}"></slot>
+        </div>`}
       </nav>
     `;
   }

elements/pf-jump-links/test/pf-jump-links.spec.ts

@@ -1,4 +1,3 @@
-import type { ReactiveElement } from 'lit';
 import { expect, html, nextFrame } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
 import { sendKeys } from '@web/test-runner-commands';

elements/pf-panel/pf-panel.ts

@@ -30,10 +30,14 @@ export class PfPanel extends LitElement {
     const hasHeader = this.#slots.hasSlotted('header');
     const hasFooter = this.#slots.hasSlotted('footer');
     return html`
-      <slot name="header" role="region" ?hidden="${!hasHeader}"></slot>
+      <header>
+        <slot name="header" ?hidden="${!hasHeader}"></slot>
+      </header>
       <hr role="presentation" ?hidden="${!hasHeader}">
       <slot></slot>
-      <slot name="footer" role="region" ?hidden="${!hasFooter}"></slot>
+      <footer>
+        <slot name="footer" ?hidden="${!hasFooter}"></slot>
+      </footer>
     `;
   }
 }