Image failed to load.
.';
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(`
diff --git a/elements/pf-jump-links/pf-jump-links-list.ts b/elements/pf-jump-links/pf-jump-links-list.ts
index fddf08685b..2d69c0c74c 100644
--- a/elements/pf-jump-links/pf-jump-links-list.ts
+++ b/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`
-
-
- `;
+ // TODO: add label
+ // eslint-disable-next-line lit-a11y/accessible-name
+ return html`
`;
}
}
diff --git a/elements/pf-jump-links/pf-jump-links.ts b/elements/pf-jump-links/pf-jump-links.ts
index bfa0164b7f..4c9f25770f 100644
--- a/elements/pf-jump-links/pf-jump-links.ts
+++ b/elements/pf-jump-links/pf-jump-links.ts
@@ -109,10 +109,14 @@ export class PfJumpLinks extends LitElement {
${this.label}
-
+
+
` : html`
${this.label}
-
`}
+
+
`}
`;
}
diff --git a/elements/pf-jump-links/test/pf-jump-links.spec.ts b/elements/pf-jump-links/test/pf-jump-links.spec.ts
index c89e0fa9a7..d3704f14e6 100644
--- a/elements/pf-jump-links/test/pf-jump-links.spec.ts
+++ b/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';
diff --git a/elements/pf-panel/pf-panel.ts b/elements/pf-panel/pf-panel.ts
index d5abef1c11..09e2542151 100644
--- a/elements/pf-panel/pf-panel.ts
+++ b/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`
-
+
-
+
`;
}
}
diff --git a/elements/pf-popover/pf-popover.ts b/elements/pf-popover/pf-popover.ts
index be5dd10262..41904efe60 100644
--- a/elements/pf-popover/pf-popover.ts
+++ b/elements/pf-popover/pf-popover.ts
@@ -340,19 +340,7 @@ export class PfPopover extends LitElement {
${headingContent}
`;
- const header = !(hasHeading && hasIcon) ? headingSlotWithFallback : html`
-
-
-
-
- ${!this.alertSeverity ? nothing : html`
- ${this.alertSeverityText ?? `${this.alertSeverity} alert:`} `}
- ${headingSlotWithFallback}
-
- `;
+ const headerIcon = this.icon ?? PfPopover.alertIcons.get(this.alertSeverity as AlertSeverity) ?? '';
return html`
-
+ @keydown="${this.onKeydown}"
+ @click="${this.toggle}">
+
- ${header}
+ ${!(hasHeading && hasIcon) ? headingSlotWithFallback : html`
+
+
+
+
+ ${!this.alertSeverity ? nothing : html`
+ ${this.alertSeverityText ?? `${this.alertSeverity} alert:`} `}
+ ${headingSlotWithFallback}
+ `}
${this.body ?? ''}
${this.footer}
diff --git a/elements/pf-popover/test/pf-popover.spec.ts b/elements/pf-popover/test/pf-popover.spec.ts
index 725d051eda..1de77ec550 100644
--- a/elements/pf-popover/test/pf-popover.spec.ts
+++ b/elements/pf-popover/test/pf-popover.spec.ts
@@ -1,13 +1,10 @@
-import { expect, html, fixture, fixtureCleanup } from '@open-wc/testing';
+import { expect, html, fixture, fixtureCleanup, nextFrame } from '@open-wc/testing';
import { a11ySnapshot, type A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
import { clickElementAtCenter } from '@patternfly/pfe-tools/test/utils.js';
import { sendKeys, resetMouse } from '@web/test-runner-commands';
import { PfPopover } from '@patternfly/elements/pf-popover/pf-popover.js';
import { PfButton } from '@patternfly/elements/pf-button/pf-button.js';
-const takeProps = (props: string[]) => (obj: object) =>
- Object.fromEntries(Object.entries(obj).filter(([k]) => props.includes(k)));
-
function press(key: string) {
return async function() {
await sendKeys({ press: key });
@@ -22,17 +19,6 @@ describe('', function() {
element = await fixture(html`(html`
-
- Toggle popover
-
- `);
- }
-
/** Wait on the element's update cycle */
async function updateComplete() {
await element.updateComplete;
@@ -50,15 +36,13 @@ describe('', function() {
* If the expected children snapshot is undefined, then assistive technology
* reports nothing at all, e.g. a popover element with no attrs and no children
*/
- function expectA11ySnapshot(expected?: Pick[]) {
- return async function() {
- const snapshot = await a11ySnapshot();
- expect(snapshot.children?.map(takeProps(['name', 'role'])))
- .to.deep.equal(expected);
- };
+ async function expectA11ySnapshot(expected: A11yTreeSnapshot = { role: 'WebArea', name: '' }) {
+ const snapshot = await a11ySnapshot();
+ expect(snapshot).to.deep.equal(expected);
}
function resetElement() {
+ document.querySelectorAll('pf-popover').forEach(e => e.remove());
// @ts-expect-error: resetting test state, so we don't mind the ts error.
element = undefined;
}
@@ -80,48 +64,49 @@ describe('', function() {
expect(document.createElement('pf-popover'))
.to.be.an.instanceof(PfPopover);
});
- it('should not report anything to assistive technology', expectA11ySnapshot());
+ it('should not report anything to assistive technology', () => expectA11ySnapshot());
});
describe('with a slotted trigger; and with heading, body, and footer attributes', function() {
- /** Setup the a11y tree snapshot expected results for this suite */
- const snapshots = {
- opened: [
- {
- name: 'Toggle popover',
- role: 'button',
- },
- {
- name: 'Close popover',
- role: 'button',
- },
- {
- name: 'Popover heading',
- role: 'heading',
- },
- {
- name: 'Popovers are triggered by click rather than hover.',
- role: 'text',
- },
- {
- name: 'Popover footer',
- role: 'text',
- },
- ],
- closed: [
- {
- name: 'Toggle popover',
- role: 'button',
- }
- ],
- };
+ // these tests are flaky, soo...
+ beforeEach(resetElement);
+ beforeEach(nextFrame);
+ beforeEach(resetElement);
+ beforeEach(nextFrame);
+ beforeEach(resetElement);
+ beforeEach(nextFrame);
- beforeEach(setupPopoverWithSlottedTriggerAndContentAttrs);
+ /** create a test fixture with slotted trigger and content attrs */
+ beforeEach(async function setupPopoverWithSlottedTriggerAndContentAttrs() {
+ element = await fixture(html`
+
+ Toggle popover
+
+ `);
+ });
it('should be accessible', expectA11yAxe);
- it('should hide popover content from assistive technology', expectA11ySnapshot(snapshots.closed));
+
+ it('should hide popover content from assistive technology', () => expectA11ySnapshot({
+ role: 'WebArea',
+ name: '',
+ children: [{ role: 'button', name: 'Toggle popover' }],
+ }));
describe('tabbing to the trigger', function() {
+ beforeEach(resetElement);
+ beforeEach(async function setupPopoverWithSlottedTriggerAndContentAttrs() {
+ element = await fixture(html`
+
+ Toggle popover
+
+ `);
+ });
+
beforeEach(updateComplete);
beforeEach(press('Tab'));
beforeEach(updateComplete);
@@ -134,18 +119,45 @@ describe('', function() {
beforeEach(updateComplete);
beforeEach(press('Enter'));
beforeEach(updateComplete);
- it('should show popover content to assistive technology', expectA11ySnapshot(snapshots.opened));
+ it('should show popover content to assistive technology', async function() {
+ const snapshot = await a11ySnapshot();
+ expect(snapshot).to.deep.equal({
+ role: 'WebArea',
+ name: '',
+ children: [
+ { role: 'button', name: 'Toggle popover' },
+ {
+ name: '',
+ role: 'dialog',
+ children: [
+ { role: 'button', name: 'Close popover', focused: true },
+ { role: 'heading', name: 'Popover heading', level: 6 },
+ { role: 'text', name: 'Popovers are triggered by click rather than hover.' },
+ { role: 'text', name: 'Popover footer' },
+ ],
+ },
+ ],
+ });
+ });
describe('then pressing Enter again', function() {
beforeEach(updateComplete);
beforeEach(press('Enter'));
beforeEach(updateComplete);
- it('should hide popover content from assistive technology', expectA11ySnapshot(snapshots.closed));
+ it('should hide popover content from assistive technology', () => expectA11ySnapshot({
+ role: 'WebArea',
+ name: '',
+ children: [{ role: 'button', name: 'Toggle popover', focused: true }],
+ }));
});
describe('then pressing Escape', function() {
beforeEach(updateComplete);
beforeEach(press('Escape'));
beforeEach(updateComplete);
- it('should hide popover content from assistive technology', expectA11ySnapshot(snapshots.closed));
+ it('should hide popover content from assistive technology', () => expectA11ySnapshot({
+ role: 'WebArea',
+ name: '',
+ children: [{ role: 'button', name: 'Toggle popover', focused: true }],
+ }));
});
});
});
@@ -157,42 +169,59 @@ describe('', function() {
/** Setup the a11y tree snapshot expected results for this suite */
const snapshots = {
- opened: [
- {
- name: 'Close popover',
- role: 'button',
- },
- {
- name: 'Popover heading',
- role: 'heading',
- },
- {
- name: 'Popovers are triggered by click rather than hover.',
- role: 'text',
- },
- {
- name: 'Popover footer',
- role: 'text',
- },
- {
- name: 'Toggle popover 1',
- role: 'button',
- },
- {
- name: 'Toggle popover 2',
- role: 'button',
- },
- ],
- closed: [
- {
- name: 'Toggle popover 1',
- role: 'button',
- },
- {
- name: 'Toggle popover 2',
- role: 'button',
- },
- ],
+ opened: {
+ role: 'WebArea',
+ name: '',
+ children: [
+ {
+ role: 'dialog',
+ name: '',
+ children: [
+ {
+ name: 'Close popover',
+ role: 'button',
+ focused: true,
+ },
+ {
+ level: 6,
+ name: 'Popover heading',
+ role: 'heading',
+ },
+ {
+ name: 'Popovers are triggered by click rather than hover.',
+ role: 'text',
+ },
+ {
+ name: 'Popover footer',
+ role: 'text',
+ },
+ ],
+ },
+ {
+ name: 'Toggle popover 1',
+ role: 'button',
+ },
+ {
+ name: 'Toggle popover 2',
+ role: 'button',
+ },
+ ]
+ },
+ closed: {
+ role: 'WebArea',
+ name: '',
+ children: [
+ {
+ name: 'Toggle popover 1',
+ role: 'button',
+ },
+ {
+ name: 'Toggle popover 2',
+ role: 'button',
+ },
+ ]
+ }
+ ,
};
async function clickButton1() {
@@ -222,12 +251,28 @@ describe('', function() {
btn2 = container.querySelector('#btn-2')!;
});
- it('starts closed', expectA11ySnapshot(snapshots.closed));
+ it('starts closed', () => expectA11ySnapshot(snapshots.closed));
describe('clicking the trigger', function() {
beforeEach(updateComplete);
beforeEach(clickButton1);
beforeEach(updateComplete);
- it('shows the popover', expectA11ySnapshot(snapshots.opened));
+ it('shows the popover', () => expectA11ySnapshot({
+ name: '',
+ role: 'WebArea',
+ children: [
+ {
+ name: '',
+ role: 'dialog',
+ children: [
+ { role: 'button', name: 'Close popover', focused: true },
+ { role: 'heading', name: 'Popover heading', level: 6 },
+ { role: 'text', name: 'Popovers are triggered by click rather than hover.' },
+ ],
+ },
+ { role: 'button', name: 'Toggle popover 1' },
+ { role: 'button', name: 'Toggle popover 2' },
+ ],
+ }));
});
describe('then setting the trigger to the sibling button', function() {
beforeEach(updateComplete);
@@ -240,13 +285,36 @@ describe('', function() {
beforeEach(updateComplete);
beforeEach(clickButton1);
beforeEach(updateComplete);
- it('remains closed', expectA11ySnapshot(snapshots.closed));
+ it('remains closed', () => expectA11ySnapshot({
+ name: '',
+ role: 'WebArea',
+ children: [
+ { role: 'button', name: 'Toggle popover 1', focused: true },
+ { role: 'button', name: 'Toggle popover 2' },
+ ],
+ }));
});
describe('clicking the sibling button', function() {
beforeEach(updateComplete);
beforeEach(clickButton2);
beforeEach(updateComplete);
- it('shows the popup', expectA11ySnapshot(snapshots.opened));
+ it('shows the popup', () => expectA11ySnapshot({
+ name: '',
+ role: 'WebArea',
+ children: [
+ {
+ name: '',
+ role: 'dialog',
+ children: [
+ { role: 'button', name: 'Close popover', focused: true },
+ { role: 'heading', name: 'Popover heading', level: 6 },
+ { role: 'text', name: 'Popovers are triggered by click rather than hover.' },
+ ],
+ },
+ { role: 'button', name: 'Toggle popover 1' },
+ { role: 'button', name: 'Toggle popover 2' },
+ ],
+ }));
});
});
describe('then pressing the Enter key', function() {
@@ -254,7 +322,7 @@ describe('', function() {
// Close the popover
beforeEach(press('Enter'));
beforeEach(updateComplete);
- it('closes the popover', expectA11ySnapshot(snapshots.closed));
+ it('closes the popover', () => expectA11ySnapshot(snapshots.closed));
});
});
});
diff --git a/elements/pf-progress-stepper/pf-progress-step.ts b/elements/pf-progress-stepper/pf-progress-step.ts
index 7e8086dac0..05f34347f4 100644
--- a/elements/pf-progress-stepper/pf-progress-step.ts
+++ b/elements/pf-progress-stepper/pf-progress-step.ts
@@ -56,7 +56,7 @@ export class PfProgressStep extends LitElement {
});
render() {
- const hasDescription = !!this.description ?? this.#slots.hasSlotted('description');
+ const hasDescription = !!(this.description ?? this.#slots.hasSlotted('description'));
const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;
const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;
const { parentTagName } = (this.constructor as typeof PfProgressStep);
diff --git a/elements/pf-progress-stepper/pf-progress-stepper.ts b/elements/pf-progress-stepper/pf-progress-stepper.ts
index 0589003fc0..c4d7b93941 100644
--- a/elements/pf-progress-stepper/pf-progress-stepper.ts
+++ b/elements/pf-progress-stepper/pf-progress-stepper.ts
@@ -29,8 +29,7 @@ export class PfProgressStepper extends LitElement {
/** Whether to use the compact layout */
@observed(function(this: PfProgressStepper) {
- const { childTagName } = (this.constructor as typeof PfProgressStepper);
- this.querySelectorAll(childTagName).forEach(step => step.requestUpdate());
+ this.querySelectorAll('pf-progress-step').forEach(step => step.requestUpdate());
})
@property({ type: Boolean, reflect: true }) compact = false;
@@ -59,9 +58,9 @@ export class PfProgressStepper extends LitElement {
}
render() {
- return html`
-
`;
}
}
diff --git a/elements/pf-spinner/BaseSpinner.ts b/elements/pf-spinner/BaseSpinner.ts
index 5cbb3c3b9c..53d358f129 100644
--- a/elements/pf-spinner/BaseSpinner.ts
+++ b/elements/pf-spinner/BaseSpinner.ts
@@ -1,3 +1,5 @@
+// will remove file in 2627
+/* eslint-disable lit-a11y/accessible-name */
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators/property.js';
diff --git a/elements/pf-table/pf-tr.ts b/elements/pf-table/pf-tr.ts
index ad0ade6f53..94a48df0f5 100644
--- a/elements/pf-table/pf-tr.ts
+++ b/elements/pf-table/pf-tr.ts
@@ -120,16 +120,13 @@ export class PfTr extends LitElement {
`,
html`
-
-
+
+
`,
this.expandable && this.expandable !== 'compound' && this.expanded && html`
-
+
`,
this.expandable === 'compound' && html`
diff --git a/elements/pf-tabs/BaseTabs.ts b/elements/pf-tabs/BaseTabs.ts
index 88267bd0f6..7433e6898a 100644
--- a/elements/pf-tabs/BaseTabs.ts
+++ b/elements/pf-tabs/BaseTabs.ts
@@ -1,3 +1,5 @@
+// we will remove this file for 3.0
+/* eslint-disable lit-a11y/no-aria-slot */
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators/property.js';
diff --git a/elements/pf-tabs/test/pf-tabs.spec.ts b/elements/pf-tabs/test/pf-tabs.spec.ts
index a60ba9d728..bf5466bf41 100644
--- a/elements/pf-tabs/test/pf-tabs.spec.ts
+++ b/elements/pf-tabs/test/pf-tabs.spec.ts
@@ -86,7 +86,7 @@ describe('
', function() {
tab!.setAttribute('active', '');
await nextFrame();
expect(tab!.hasAttribute('active'), 'active attr').to.equal(true);
- const panel = (await a11ySnapshot()).children.find(x => x.role === 'tabpanel');
+ const panel = (await a11ySnapshot())?.children?.find(x => x.role === 'tabpanel');
expect(panel?.name, 'active panel').to.equal('Database');
});
@@ -98,7 +98,7 @@ describe('', function() {
await nextFrame();
const tab = el.querySelector('pf-tab:first-of-type');
expect(tab!.hasAttribute('active')).to.equal(true);
- const panel = (await a11ySnapshot()).children.find(x => x.role === 'tabpanel');
+ const panel = (await a11ySnapshot())?.children?.find(x => x.role === 'tabpanel');
expect(panel?.name, 'active panel').to.equal('Users');
});
@@ -150,7 +150,7 @@ describe('', function() {
const disabledTab = el.querySelector('pf-tab:nth-of-type(2)')! as BaseTab;
disabledTab.disabled = true;
await nextFrame();
- const tab = (await a11ySnapshot()).children.find(x => x.role === 'tab' && x.name === 'Containers');
+ const tab = (await a11ySnapshot())?.children?.find(x => x.role === 'tab' && x.name === 'Containers');
expect(tab?.disabled).to.be.true;
});
diff --git a/elements/pf-text-input/pf-text-input.ts b/elements/pf-text-input/pf-text-input.ts
index f2c6958c2a..50e38f6f66 100644
--- a/elements/pf-text-input/pf-text-input.ts
+++ b/elements/pf-text-input/pf-text-input.ts
@@ -234,7 +234,7 @@ export class PfTextInput extends LitElement {
backgroundImage: `url('${this.customIconUrl}')`,
backgroundSize: this.customIconDimensions,
}))}">
- ${this.helperText}
+ ${this.helperText}
${this.#internals.validationMessage}
`;
}
diff --git a/elements/pf-tooltip/BaseTooltip.ts b/elements/pf-tooltip/BaseTooltip.ts
index 0d6843f8f6..0724117410 100644
--- a/elements/pf-tooltip/BaseTooltip.ts
+++ b/elements/pf-tooltip/BaseTooltip.ts
@@ -1,3 +1,5 @@
+// we will remove this file in #2628
+/* eslint-disable lit-a11y/no-aria-slot */
import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
import { LitElement, html } from 'lit';
diff --git a/elements/pf-tooltip/pf-tooltip.css b/elements/pf-tooltip/pf-tooltip.css
index b731903f80..790bdce193 100644
--- a/elements/pf-tooltip/pf-tooltip.css
+++ b/elements/pf-tooltip/pf-tooltip.css
@@ -13,10 +13,6 @@
--_floating-arrow-size: var(--pf-c-tooltip__arrow--Width, 0.5rem);
}
-#invoker.block {
- display: block;
-}
-
#tooltip,
#tooltip::after {
position: absolute;
diff --git a/elements/pf-tooltip/pf-tooltip.ts b/elements/pf-tooltip/pf-tooltip.ts
index ca7c56ebb8..ac695ef71b 100644
--- a/elements/pf-tooltip/pf-tooltip.ts
+++ b/elements/pf-tooltip/pf-tooltip.ts
@@ -141,8 +141,6 @@ export class PfTooltip extends LitElement {
return this.shadowRoot?.querySelector('#tooltip') ?? null;
}
- #blockInvoker = false;
-
#referenceTrigger?: HTMLElement | null;
#float = new FloatingDOMController(this, {
@@ -177,7 +175,10 @@ export class PfTooltip extends LitElement {
override render() {
const { alignment, anchor, open, styles } = this.#float;
- const block = this.#blockInvoker;
+ const blockInvoker =
+ this.#invoker?.assignedElements().length === 0 &&
+ this.#invoker?.assignedNodes().length > 0;
+ const display = blockInvoker ? 'block' : 'contents';
return html`
-
-
${this.content}
+
+
+
+ ${this.content}
+
`}
-${hash} - ${firstLine} ${!body.length ? '\n\n' : `\
+${hash} - ${firstLine} ${!body.length ? '\n\n' : /* markdown */`\
${body}
, propertyText: string) => {
@@ -59,7 +59,7 @@ export async function fixture(
}
// Add a listener so we know when React is ready.
- const isReactReady = oneEvent(appRoot, 'react-ready');
+ const isReactReady = oneEvent(appRoot, 'react-ready', false);
// react gonna react
const intentionallyCorruptedMarkup = (
@@ -78,7 +78,7 @@ export async function fixture(
// We could use a normal but this avoids
// littering the DOM with extra divs.
// 1. Insert web component into JSX string.
- const wrapReact = `ReactDOM.render(
+ const wrapReact = /* js */`ReactDOM.render(
${intentionallyCorruptedMarkup}
,
document.getElementById('root'),
() => document.getElementById('root').dispatchEvent(new Event("react-ready"))
diff --git a/tools/pfe-tools/test/vue-wrapper.ts b/tools/pfe-tools/test/vue-wrapper.ts
index c20c1e81d3..42b1e7f3f2 100644
--- a/tools/pfe-tools/test/vue-wrapper.ts
+++ b/tools/pfe-tools/test/vue-wrapper.ts
@@ -81,7 +81,7 @@ export async function fixture
(
});
// Make sure Vue is ready and our component is rendered.
- await oneEvent(window, 'vue-ready');
+ await oneEvent(window, 'vue-ready', false);
// Select the newly rendered component and make sure it's finished updating.
// We use the parent
for the selector. We need everything
diff --git a/tsconfig.icons.json b/tsconfig.icons.json
index 23268e8baf..1236319fcb 100644
--- a/tsconfig.icons.json
+++ b/tsconfig.icons.json
@@ -2,9 +2,7 @@
"extends": "./tsconfig.settings.json",
"compilerOptions": {
"resolveJsonModule": true,
- "module": "nodenext"
- },
- "ts-node": {
- "esm": true
+ "module": "nodenext",
+ "moduleResolution": "nodenext"
}
}
diff --git a/tsconfig.settings.json b/tsconfig.settings.json
index 6bd2ac900a..2431ce6f3f 100644
--- a/tsconfig.settings.json
+++ b/tsconfig.settings.json
@@ -54,6 +54,7 @@
"es2015.iterable",
"es2020",
"es2022",
+ "ESNext.Disposable",
"es5",
"es6",
"ScriptHost"