@pagefind/component-ui 1.5.0-alpha.3 → 1.5.0-beta.1

package/components/pagefind-filter-dropdown.ts

@@ -113,6 +113,7 @@ export class PagefindFilterDropdown extends PagefindElement {
     this.triggerEl.id = triggerId;
     this.triggerEl.className = "pf-dropdown-trigger";
     if (this.wrapLabels) this.triggerEl.classList.add("wrap");
+    this.triggerEl.setAttribute("role", "combobox");
     this.triggerEl.setAttribute("aria-haspopup", "listbox");
     this.triggerEl.setAttribute("aria-expanded", "false");
     this.triggerEl.setAttribute("aria-controls", menuId);
@@ -151,7 +152,6 @@ export class PagefindFilterDropdown extends PagefindElement {
       this.singleSelect ? "false" : "true",
     );
     this.optionsEl.setAttribute("aria-labelledby", triggerId);
-    this.optionsEl.setAttribute("tabindex", "-1");
     this.menuEl.appendChild(this.optionsEl);
 
     this.wrapperEl.appendChild(this.menuEl);
@@ -180,12 +180,13 @@ export class PagefindFilterDropdown extends PagefindElement {
     this.triggerEl.addEventListener("focus", () =>
       this.instance?.triggerLoad(),
     );
-    this.triggerEl.addEventListener("keydown", (e) =>
-      this.handleTriggerKeydown(e),
-    );
-    this.optionsEl.addEventListener("keydown", (e) =>
-      this.handleMenuKeydown(e),
-    );
+    this.triggerEl.addEventListener("keydown", (e) => {
+      if (this.isOpen) {
+        this.handleMenuKeydown(e);
+      } else {
+        this.handleTriggerKeydown(e);
+      }
+    });
 
     this.isRendered = true;
   }
@@ -214,10 +215,11 @@ export class PagefindFilterDropdown extends PagefindElement {
     this.triggerEl.setAttribute("aria-expanded", "true");
     this.triggerEl.classList.add("open");
 
-    if (this.activeIndex < 0 && this.optionElements.length > 0) {
-      this.setActiveIndex(0);
+    // Always apply visual focus when opening if there are options
+    if (this.optionElements.length > 0) {
+      const targetIndex = this.activeIndex >= 0 ? this.activeIndex : 0;
+      this.setActiveIndex(targetIndex);
     }
-    this.optionsEl.focus();
 
     const navigateText =
       this.instance?.translate("keyboard_navigate") || "navigate";
@@ -250,7 +252,7 @@ export class PagefindFilterDropdown extends PagefindElement {
     this.triggerEl.setAttribute("aria-expanded", "false");
     this.triggerEl.classList.remove("open");
 
-    this.optionsEl.removeAttribute("aria-activedescendant");
+    this.triggerEl?.removeAttribute("aria-activedescendant");
 
     for (const { el } of this.optionElements) {
       el.classList.remove("pf-dropdown-option-focused");
@@ -348,7 +350,7 @@ export class PagefindFilterDropdown extends PagefindElement {
     const option = this.optionElements[index];
 
     option.el.classList.add("pf-dropdown-option-focused");
-    this.optionsEl.setAttribute("aria-activedescendant", option.el.id);
+    this.triggerEl?.setAttribute("aria-activedescendant", option.el.id);
 
     this.scrollToCenter(option.el);
   }
@@ -524,6 +526,8 @@ export class PagefindFilterDropdown extends PagefindElement {
   }
 
   toggleOption(value: string): void {
+    const wasSelected = this.selectedValues.has(value);
+
     if (this.singleSelect) {
       if (this.selectedValues.has(value)) {
         this.selectedValues.clear();
@@ -540,6 +544,13 @@ export class PagefindFilterDropdown extends PagefindElement {
       }
     }
 
+    // Announce selection change for screen readers
+    const isNowSelected = this.selectedValues.has(value);
+    if (isNowSelected !== wasSelected) {
+      const action = isNowSelected ? "selected" : "deselected";
+      this.instance?.announceRaw(`${value} ${action}`);
+    }
+
     this.updateOptionStates();
     this.updateBadge();
 

package/components/pagefind-input.ts

@@ -57,11 +57,10 @@ export class PagefindInput extends PagefindElement {
       this.removeAttribute("dir");
     }
 
-    const wrapper = document.createElement("form");
+    const wrapper = document.createElement("search");
     wrapper.className = "pf-input-wrapper";
     wrapper.setAttribute("role", "search");
     wrapper.setAttribute("aria-label", searchLabel);
-    wrapper.setAttribute("action", "javascript:void(0);");
 
     const label = document.createElement("label");
     label.setAttribute("for", inputId);
@@ -72,16 +71,31 @@ export class PagefindInput extends PagefindElement {
     this.inputEl = document.createElement("input");
     this.inputEl.id = inputId;
     this.inputEl.className = "pf-input";
+    this.inputEl.setAttribute("type", "search");
+    this.inputEl.setAttribute("autocomplete", "off");
     this.inputEl.setAttribute("autocapitalize", "none");
     this.inputEl.setAttribute("enterkeyhint", "search");
     this.inputEl.setAttribute("placeholder", placeholderText);
     if (this.autofocus) {
       this.inputEl.setAttribute("autofocus", "autofocus");
     }
+
+    const hintId = this.instance!.generateId("pf-input-hint");
+    const hintText =
+      this.instance?.translate("input_hint") ||
+      "Results will appear as you type";
+    const hint = document.createElement("span");
+    hint.id = hintId;
+    hint.setAttribute("data-pf-sr-hidden", "true");
+    hint.textContent = hintText;
+    this.inputEl.setAttribute("aria-describedby", hintId);
+
     wrapper.appendChild(this.inputEl);
+    wrapper.appendChild(hint);
 
     this.clearEl = document.createElement("button");
     this.clearEl.className = "pf-input-clear";
+    this.clearEl.setAttribute("type", "button");
     this.clearEl.setAttribute("data-pf-suppressed", "true");
     this.clearEl.textContent = clearText;
     wrapper.appendChild(this.clearEl);

package/components/pagefind-modal-trigger.ts

@@ -84,6 +84,12 @@ export class PagefindModalTrigger extends PagefindElement {
     this.buttonEl.setAttribute("aria-haspopup", "dialog");
     this.buttonEl.setAttribute("aria-expanded", "false");
     this.buttonEl.setAttribute("aria-label", this.placeholder || "Search");
+    this.buttonEl.setAttribute(
+      "aria-keyshortcuts",
+      this.isMac
+        ? `Meta+${this.shortcut.toUpperCase()}`
+        : `Control+${this.shortcut.toUpperCase()}`,
+    );
 
     const icon = document.createElement("span");
     icon.className = "pf-trigger-icon";

package/components/pagefind-modal.ts

@@ -46,7 +46,6 @@ export class PagefindModal extends PagefindElement {
     this.dialogEl = document.createElement("dialog");
     this.dialogEl.className = "pf-modal";
     this.dialogEl.id = dialogId;
-    this.dialogEl.setAttribute("aria-modal", "true");
     this.dialogEl.setAttribute("aria-label", searchLabel);
 
     if (hasChildren && children) {

package/components/pagefind-results.ts

@@ -68,7 +68,7 @@ const DEFAULT_RESULT_TEMPLATE = `<li class="pf-result">
   {{/if}}
 </li>`;
 
-const DEFAULT_PLACEHOLDER_TEMPLATE = `<li class="pf-result">
+const DEFAULT_PLACEHOLDER_TEMPLATE = `<li class="pf-result" aria-hidden="true">
   <div class="pf-result-card">
     <div class="pf-skeleton pf-skeleton-image"></div>
     <div class="pf-result-content">
@@ -393,6 +393,15 @@ export class PagefindResults extends PagefindElement {
                 : "many_results";
           const priority = count === 0 ? "assertive" : "polite";
           instance.announce(key, { SEARCH_TERM: term, COUNT: count }, priority);
+        } else if (instance.faceted) {
+          const key =
+            count === 0
+              ? "total_zero_results"
+              : count === 1
+                ? "total_one_result"
+                : "total_many_results";
+          const priority = count === 0 ? "assertive" : "polite";
+          instance.announce(key, { COUNT: count }, priority);
         }
 
         const resultRenderer = this.getResultRenderer();
@@ -485,14 +494,14 @@ export class PagefindResults extends PagefindElement {
         if (index < anchors.length - 1) {
           const next = anchors[index + 1];
           next.focus();
-          this.scrollToCenter(next);
+          this.scrollToCenter(next, e.repeat);
         }
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
         if (index > 0) {
           const prev = anchors[index - 1];
           prev.focus();
-          this.scrollToCenter(prev);
+          this.scrollToCenter(prev, e.repeat);
         } else {
           // At first anchor, go back to input
           this.instance?.focusPreviousInput(document.activeElement as Element);
@@ -549,7 +558,7 @@ export class PagefindResults extends PagefindElement {
     });
   }
 
-  private scrollToCenter(el: HTMLElement): void {
+  private scrollToCenter(el: HTMLElement, instant: boolean = false): void {
     const container = this.intersectionEl || nearestScrollParent(el);
     if (!container || !(container instanceof HTMLElement)) return;
     if (container === document.body || container === document.documentElement)
@@ -560,7 +569,10 @@ export class PagefindResults extends PagefindElement {
     const elRelativeTop = elRect.top - containerRect.top + container.scrollTop;
     const targetScroll =
       elRelativeTop - container.clientHeight / 2 + el.offsetHeight / 2;
-    container.scrollTo({ top: targetScroll, behavior: "smooth" });
+    container.scrollTo({
+      top: targetScroll,
+      behavior: instant ? "instant" : "smooth",
+    });
   }
 
   clearSelection(): void {

package/components/pagefind-searchbox.ts

@@ -174,7 +174,8 @@ export class PagefindSearchbox extends PagefindElement {
   containerEl: HTMLElement | null = null;
   inputEl: HTMLInputElement | null = null;
   dropdownEl: HTMLElement | null = null;
-  resultsEl: HTMLUListElement | null = null;
+  resultsEl: HTMLElement | null = null;
+  statusEl: HTMLElement | null = null;
   footerEl: HTMLElement | null = null;
 
   isOpen: boolean = false;
@@ -303,13 +304,18 @@ export class PagefindSearchbox extends PagefindElement {
       this.removeAttribute("dir");
     }
 
-    this.resultsEl = document.createElement("ul");
+    this.resultsEl = document.createElement("div");
     this.resultsEl.id = resultsId;
     this.resultsEl.className = "pf-searchbox-results";
     this.resultsEl.setAttribute("role", "listbox");
     this.resultsEl.setAttribute("aria-label", resultsLabel);
     this.dropdownEl.appendChild(this.resultsEl);
 
+    this.statusEl = document.createElement("div");
+    this.statusEl.className = "pf-searchbox-status";
+    this.statusEl.hidden = true;
+    this.dropdownEl.appendChild(this.statusEl);
+
     if (this.showKeyboardHints) {
       this.footerEl = document.createElement("div");
       this.footerEl.className = "pf-searchbox-footer";
@@ -491,33 +497,33 @@ export class PagefindSearchbox extends PagefindElement {
   }
 
   private showLoadingState(): void {
-    if (!this.resultsEl) return;
+    if (!this.resultsEl || !this.statusEl) return;
     this.isLoading = true;
     this.resultsEl.innerHTML = "";
+    this.resultsEl.setAttribute("aria-busy", "true");
 
     const searchingText =
       this.instance?.translate("searching", { SEARCH_TERM: this.searchTerm }) ||
       "Searching...";
 
-    const loadingEl = document.createElement("div");
-    loadingEl.className = "pf-searchbox-loading";
-    loadingEl.textContent = searchingText;
-    this.resultsEl.appendChild(loadingEl);
+    this.statusEl.textContent = searchingText;
+    this.statusEl.className = "pf-searchbox-status pf-searchbox-loading";
+    this.statusEl.hidden = false;
   }
 
   private showEmptyState(): void {
-    if (!this.resultsEl) return;
+    if (!this.resultsEl || !this.statusEl) return;
     this.resultsEl.innerHTML = "";
+    this.resultsEl.removeAttribute("aria-busy");
 
     const noResultsText =
       this.instance?.translate("zero_results", {
         SEARCH_TERM: this.searchTerm,
       }) || `No results for "${this.searchTerm}"`;
 
-    const emptyEl = document.createElement("div");
-    emptyEl.className = "pf-searchbox-empty";
-    emptyEl.textContent = noResultsText;
-    this.resultsEl.appendChild(emptyEl);
+    this.statusEl.textContent = noResultsText;
+    this.statusEl.className = "pf-searchbox-status pf-searchbox-empty";
+    this.statusEl.hidden = false;
 
     this.instance?.announce(
       "zero_results",
@@ -613,6 +619,13 @@ export class PagefindSearchbox extends PagefindElement {
   private handleResults(searchResult: PagefindSearchResult): void {
     this.isLoading = false;
 
+    if (this.resultsEl) {
+      this.resultsEl.removeAttribute("aria-busy");
+    }
+    if (this.statusEl) {
+      this.statusEl.hidden = true;
+    }
+
     for (const result of this.results) {
       result.cleanup();
     }

package/css/pagefind-component-ui.css

@@ -290,6 +290,16 @@ pagefind-modal-trigger {
     color: var(--pf-text-muted);
 }
 
+/* Hide native search clear button - we have our own */
+:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input::-webkit-search-decoration,
+:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input::-webkit-search-cancel-button,
+:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input::-webkit-search-results-button,
+:is(*, #\#):is(*, #\#):is(*, #\#) .pf-input::-webkit-search-results-decoration {
+    display: none;
+    appearance: none;
+    -webkit-appearance: none;
+}
+
 :is(*, #\#):is(*, #\#):is(*, #\#) .pf-input-clear {
     position: absolute;
     right: 2px;
@@ -1242,6 +1252,7 @@ pagefind-modal-trigger {
 :is(*, #\#):is(*, #\#):is(*, #\#) pagefind-keyboard-hints,
 :is(*, #\#):is(*, #\#):is(*, #\#) .pf-keyboard-hints {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: 16px;
     font-size: 12px;