@md-plugins/search-ui 2.0.3 → 2.1.0

package/dist/index.d.mts

@@ -84,6 +84,7 @@ declare class MdSearchElement extends HTMLElementBase {
   private searchRequestId;
   private selectionStart;
   private selectionEnd;
+  private previouslyFocusedElement;
   connectedCallback(): void;
   disconnectedCallback(): void;
   attributeChangedCallback(name: string): void;

package/dist/index.d.ts

@@ -84,6 +84,7 @@ declare class MdSearchElement extends HTMLElementBase {
   private searchRequestId;
   private selectionStart;
   private selectionEnd;
+  private previouslyFocusedElement;
   connectedCallback(): void;
   disconnectedCallback(): void;
   attributeChangedCallback(name: string): void;

package/dist/index.mjs

@@ -558,6 +558,7 @@ var MdSearchElement = class extends HTMLElementBase {
 	searchRequestId = 0;
 	selectionStart = null;
 	selectionEnd = null;
+	previouslyFocusedElement = null;
 	connectedCallback() {
 		this.render();
 		globalThis.addEventListener?.("keydown", this.onGlobalKeydown);
@@ -575,6 +576,7 @@ var MdSearchElement = class extends HTMLElementBase {
 		this.render();
 	}
 	open() {
+		this.previouslyFocusedElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 		this.opened = true;
 		this.render();
 		this.focusInput();
@@ -582,6 +584,8 @@ var MdSearchElement = class extends HTMLElementBase {
 	close() {
 		this.opened = false;
 		this.render();
+		(this.previouslyFocusedElement ?? this.root.querySelector("[part=\"trigger\"]"))?.focus();
+		this.previouslyFocusedElement = null;
 	}
 	toggle() {
 		if (this.opened) this.close();
@@ -656,6 +660,21 @@ var MdSearchElement = class extends HTMLElementBase {
 			this.close();
 			return;
 		}
+		if (event.key === "Tab") {
+			const focusableElements = Array.from(this.root.querySelectorAll("[part=\"dialog\"] button:not([disabled]), [part=\"dialog\"] input:not([disabled])"));
+			const firstElement = focusableElements[0];
+			const lastElement = focusableElements.at(-1);
+			if (firstElement !== void 0 && lastElement !== void 0) {
+				if (event.shiftKey && this.root.activeElement === firstElement) {
+					event.preventDefault();
+					lastElement.focus();
+				} else if (event.shiftKey === false && this.root.activeElement === lastElement) {
+					event.preventDefault();
+					firstElement.focus();
+				}
+			}
+			return;
+		}
 		if (event.key === "ArrowDown") {
 			event.preventDefault();
 			this.setActiveIndex(this.activeIndex + 1, { scrollIntoView: true });
@@ -710,8 +729,10 @@ var MdSearchElement = class extends HTMLElementBase {
 		input.setAttribute("aria-expanded", this.results.length > 0 ? "true" : "false");
 		if (this.results.length === 0) {
 			input.removeAttribute("aria-activedescendant");
+			input.removeAttribute("aria-controls");
 			return;
 		}
+		input.setAttribute("aria-controls", `${this.elementId}-listbox`);
 		input.setAttribute("aria-activedescendant", `${this.elementId}-result-${this.activeIndex}`);
 	}
 	syncActiveResult(options = {}) {
@@ -772,6 +793,7 @@ var MdSearchElement = class extends HTMLElementBase {
                 class="result ${index === this.activeIndex ? "result--active" : ""}"
                 data-result-index="${index}"
                 role="option"
+                tabindex="-1"
                 aria-selected="${index === this.activeIndex ? "true" : "false"}"
               >
                 <div part="result-title" class="result__header">
@@ -830,7 +852,7 @@ var MdSearchElement = class extends HTMLElementBase {
               aria-label="${escapeHtml(this.searchLabel)}"
               aria-autocomplete="list"
               aria-expanded="${this.results.length > 0 ? "true" : "false"}"
-              aria-controls="${this.elementId}-listbox"
+              ${this.results.length > 0 ? `aria-controls="${this.elementId}-listbox"` : ""}
               ${activeResultId !== void 0 ? `aria-activedescendant="${activeResultId}"` : ""}
               autocomplete="off"
               spellcheck="false"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@md-plugins/search-ui",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "Framework-agnostic search UI and static search provider for md-plugins documentation search indexes.",
   "keywords": [
     "algolia",