Merge branch 'main' into fix/jump-links-nav-label

bennypowers · web-flow · commit e75cd852be89 · 2026-04-15T18:55:22.000+03:00
diff --git a/.changeset/fix-back-to-top-hover.md b/.changeset/fix-back-to-top-hover.md
@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": patch
+---
+
+`<pf-back-to-top>`: fixed background color during hover and focus.
diff --git a/.changeset/fix-create-element-publish.md b/.changeset/fix-create-element-publish.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/create-element": patch
+---
+Fixed missing files in published package that prevented `npm run new` from working
diff --git a/.changeset/fix-create-element.md b/.changeset/fix-create-element.md
@@ -0,0 +1,5 @@
+---
+"@patternfly/create-element": patch
+---
+
+Fixed missing entry point in published package.
diff --git a/.changeset/fix-popover-click.md b/.changeset/fix-popover-click.md
@@ -0,0 +1,6 @@
+---
+"@patternfly/elements": patch
+---
+
+`<pf-popover>`: clicking outside a popover no longer fires spurious
+hide events on other closed popovers.
diff --git a/.changeset/fix-select-tokens.md b/.changeset/fix-select-tokens.md
@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": patch
+---
+
+`<pf-select>`: replaced Red Hat Design System color tokens with PatternFly v4 global tokens.
diff --git a/.changeset/fix-slot-controller.md b/.changeset/fix-slot-controller.md
@@ -0,0 +1,6 @@
+---
+"@patternfly/pfe-core": patch
+---
+
+`SlotController`: fixed `getSlotted()` returning empty arrays in
+certain timing scenarios.
diff --git a/.changeset/fix-start-build-artifacts.md b/.changeset/fix-start-build-artifacts.md
@@ -0,0 +1,6 @@
+---
+"@patternfly/elements": patch
+---
+
+`npm run start` no longer fails when TypeScript build artifacts
+are present in the working tree.
diff --git a/.changeset/fix-table-accessibility.md b/.changeset/fix-table-accessibility.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": patch
+---
+`<pf-table>`: fix accessibility features: column header role, accessible label for row toggle button, etc.
diff --git a/.changeset/tabs-passive-scroll.md b/.changeset/tabs-passive-scroll.md
@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": patch
+---
+
+`<pf-tabs>`: scroll event listeners are now passive for better performance.
diff --git a/core/pfe-core/controllers/slot-controller.ts b/core/pfe-core/controllers/slot-controller.ts
@@ -215,13 +215,26 @@ export class SlotController implements SlotControllerPublicAPI {
    */
   public getSlotted<T extends Element = Element>(...slotNames: string[] | [null]): T[] {
     if (!slotNames.length || slotNames.length === 1 && slotNames.at(0) === null) {
-      return (this.#slotRecords.get(SlotController.default)?.elements ?? []) as T[];
+      return (this.#getAssignedElements(SlotController.default)) as T[];
     } else {
       return slotNames.flatMap(slotName =>
-        this.#slotRecords.get(slotName ?? SlotController.default)?.elements ?? []) as T[];
+        this.#getAssignedElements(slotName ?? SlotController.default)) as T[];
     }
   }
 
+  /**
+   * Returns the assigned elements for a given slot name, falling back to
+   * querying the slot element directly if the slot record hasn't been
+   * initialized yet.
+   */
+  #getAssignedElements(slotId: string | symbol): Element[] {
+    const record = this.#slotRecords.get(slotId);
+    if (record) {
+      return record.elements;
+    }
+    return this.#getSlotElement(slotId)?.assignedElements?.() ?? [];
+  }
+
   /**
    * Returns a boolean statement of whether or not any of those slots exists in the light DOM.
    * @param names The slot names to check.
diff --git a/elements/pf-back-to-top/pf-back-to-top.css b/elements/pf-back-to-top/pf-back-to-top.css
@@ -41,14 +41,16 @@ a {
   gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));
 }
 
-a:hover {
+a:hover,
+a:focus {
   --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));
   --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));
 }
 
-a:focus {
-  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100,#fff));
+[part="trigger"]:is(pf-button):hover,
+[part="trigger"]:is(pf-button):focus-within {
   --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));
+  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));
 }
 
 [part="trigger"][hidden] {
diff --git a/elements/pf-popover/pf-popover.ts b/elements/pf-popover/pf-popover.ts
@@ -351,6 +351,9 @@ export class PfPopover extends LitElement {
   };
 
   #outsideClick(event: MouseEvent) {
+    if (this.#hideDialog) {
+      return;
+    }
     const path = event.composedPath();
     if (!path.includes(this) && !path.includes(this.#referenceTrigger as HTMLElement)) {
       this.hide();
diff --git a/elements/pf-select/pf-option.css b/elements/pf-select/pf-option.css
@@ -15,7 +15,7 @@
 :host(:focus) #outer,
 :host(:hover) #outer,
 #outer.selected {
-  background-color: var(--_pf-option-selected-background-color, var(--rh-color-gray-20, #e0e0e0));
+  background-color: var(--_pf-option-selected-background-color, var(--pf-global--BackgroundColor--200, #e0e0e0));
 }
 
 #outer {
diff --git a/elements/pf-select/pf-select.css b/elements/pf-select/pf-select.css
@@ -5,7 +5,7 @@
 	color: var(--pf-global--Color--100, #151515);
   --_pf-option-checkboxes-display: none;
   --_pf-option-svg-display: block;
-	--_pf-option-selected-background-color: var(--rh-color-gray-20, #e0e0e0);
+	--_pf-option-selected-background-color: var(--pf-global--BackgroundColor--200, #e0e0e0);
 	/** Select toggle top padding */
 	--pf-c-select__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
 	/** Select toggle right padding */
diff --git a/elements/pf-table/context.ts b/elements/pf-table/context.ts
@@ -2,4 +2,4 @@ import { createContextWithRoot } from '@patternfly/pfe-core/functions/context.js
 
 export const thRoleContext: {
   __context__: unknown;
-} = createContextWithRoot<'rowheader' | 'colheader'>('pf-th-role');
+} = createContextWithRoot<'rowheader' | 'columnheader'>('pf-th-role');
diff --git a/elements/pf-table/pf-th.ts b/elements/pf-table/pf-th.ts
@@ -51,7 +51,7 @@ export class PfTh extends LitElement {
   @property() key!: string;
 
   @consume({ context: thRoleContext })
-  private contextualRole: 'colheader' | 'rowheader' = 'rowheader';
+  private contextualRole: 'columnheader' | 'rowheader' = 'rowheader';
 
   override connectedCallback(): void {
     super.connectedCallback();
diff --git a/elements/pf-table/pf-thead.ts b/elements/pf-table/pf-thead.ts
@@ -14,7 +14,7 @@ import { provide } from '@lit/context';
 export class PfThead extends LitElement {
   static readonly styles: CSSStyleSheet[] = [styles];
 
-  @provide({ context: thRoleContext }) private thRowContext = 'colheader';
+  @provide({ context: thRoleContext }) private thRowContext = 'columnheader';
 
   connectedCallback(): void {
     super.connectedCallback();
diff --git a/elements/pf-table/pf-tr.ts b/elements/pf-table/pf-tr.ts
@@ -109,7 +109,9 @@ export class PfTr extends LitElement {
         <pf-td id="toggle-cell">
           <pf-button id="toggle-button"
                      aria-expanded=${String(this.expanded) as 'true' | 'false'}
+                     aria-controls=${ifDefined(this.expanded ? 'expansion' : undefined)}
                      plain
+                     label="Details"
                      @click=${this.#onClick}>
             <pf-icon id="toggle-icon"
                      icon="angle-right"
diff --git a/elements/pf-tabs/pf-tabs.ts b/elements/pf-tabs/pf-tabs.ts
@@ -1,5 +1,6 @@
 import { html, LitElement, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
+import { eventOptions } from 'lit/decorators/event-options.js';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
 import { provide } from '@lit/context';
@@ -180,7 +181,7 @@ export class PfTabs extends LitElement {
           <!-- tablist -->
           <div id="tabs" part="tabs" role="tablist">
             <!-- Must contain one or more \`<pf-tab>\` -->
-            <slot name="tab" @slotchange="${this.#onSlotChange}" @scroll="${this.#overflow.onScroll}"></slot>
+            <slot name="tab" @slotchange="${this.#onSlotChange}" @scroll="${this.onScroll}"></slot>
           </div>
           ${!this.#overflow.showScrollButtons ? '' : html`
           <button id="nextTab" tabindex="-1"
@@ -201,6 +202,11 @@ export class PfTabs extends LitElement {
     `;
   }
 
+  @eventOptions({ passive: true })
+  private onScroll() {
+    this.#overflow.onScroll();
+  }
+
   #scrollLeft() {
     this.#overflow.scrollLeft();
   }
diff --git a/elements/pf-tabs/test/pf-tabs.spec.ts b/elements/pf-tabs/test/pf-tabs.spec.ts
@@ -52,6 +52,16 @@ describe('<pf-tabs>', function() {
 
     beforeEach(updateComplete);
 
+    it('should show the first tab as selected in the accessibility tree', async function() {
+      const snapshot = await a11ySnapshot();
+      const tabs = snapshot.children?.filter(x => x.role === 'tab') ?? [];
+      const [first, ...rest] = tabs;
+      expect(first).to.have.property('selected', true);
+      for (const tab of rest) {
+        expect(tab).to.not.have.property('selected', true);
+      }
+    });
+
     it('should apply aria attributes on initialization', function() {
       const tabs = element.querySelectorAll('pf-tab');
       const panels = element.querySelectorAll('pf-tab-panel');
@@ -121,6 +131,15 @@ describe('<pf-tabs>', function() {
       it('should hide previously active panel', function() {
         expect(element.querySelector('pf-tab-panel')).to.have.attribute('hidden');
       });
+
+      it('should show the second tab as selected in the accessibility tree', async function() {
+        const snapshot = await a11ySnapshot();
+        const tabs = snapshot.children?.filter(x => x.role === 'tab') ?? [];
+        const [first, second, third] = tabs;
+        expect(first).to.not.have.property('selected', true);
+        expect(second).to.have.property('selected', true);
+        expect(third).to.not.have.property('selected', true);
+      });
     });
 
     describe('setting `activeIndex` to 2', function() {
diff --git a/tools/create-element/.npmignore b/tools/create-element/.npmignore
@@ -0,0 +1,4 @@
+# Override .gitignore so that compiled .js and .d.ts files
+# are included in the published package via the "files" field
+# in package.json. Without this, newer npm versions apply
+# .gitignore patterns as a filter even when "files" is set.
diff --git a/tools/create-element/package.json b/tools/create-element/package.json
@@ -34,6 +34,7 @@
     "templates/**/*"
   ],
   "scripts": {
+    "prepack": "tsc -b .",
     "test": "echo 'unit tests for PFE generator not written yet'"
   },
   "bugs": {
diff --git a/tsconfig.esbuild.json b/tsconfig.esbuild.json
@@ -9,7 +9,16 @@
     "**/demo/*.d.ts",
     "**/_temp/**/*",
     "**/*.story.*",
-    "**/test/*_e2e*"
+    "**/test/*_e2e*",
+    "elements/**/*.js",
+    "elements/**/*.d.ts",
+    "elements/**/*.js.map",
+    "core/**/*.js",
+    "core/**/*.d.ts",
+    "core/**/*.js.map",
+    "tools/**/*.js",
+    "tools/**/*.d.ts",
+    "tools/**/*.js.map"
   ],
   "compilerOptions": {
     "allowJs": true,

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@patternfly/elements": patch
 +---
++
 +`<pf-back-to-top>`: fixed background color during hover and focus.