rich-input 1.2.0 → 1.2.2

package/README.md

@@ -86,6 +86,7 @@ Nest `<datalist>` elements inside `<rich-input>` to configure keywords and autoc
     <option value="Kranky"></option>
     <option value="Madhouse Records"></option>
     <option value="Ninja Tune"></option>
+    <option value="Warp Records"></option>
     <option value="We Play House Recordings"></option>
     <option value="XL Recordings"></option>
   </datalist>
@@ -149,6 +150,10 @@ Datalists can be added, updated, or removed dynamically at runtime; `<rich-input
       <img src="assets/ninja-tune.jpg" height="50" width="50" alt="Ninja Tune Logo">
       Ninja Tune
     </option>
+    <option value="Warp Records">
+      <img src="assets/warp-records.png" height="50" width="50" alt="Warp Records Logo">
+      Warp Records
+    </option>
     <option value="We Play House Recordings">
       <img src="assets/we-play-house-recordings.jpg" height="50" width="50" alt="We Play House Recordings Logo">
       We Play House Recordings
@@ -245,7 +250,7 @@ In browsers without `OpaqueRange` that support the CSS Custom Highlight API (suc
 Values corresponding to configured keywords are registered into the global `CSS.highlights` registry and styled using standard CSS `::highlight(keyword)` pseudo-elements in your stylesheet:
 
 ```css
-/* Style the value set in label:"XL Recordings" */
+/* Style the value set in label:"Warp Records" */
 ::highlight(label) {
   background-color: oklch(0.92 0.08 240);
   color: oklch(0.28 0.14 240);
@@ -282,7 +287,7 @@ In browsers using the `[contenteditable]` fallback inside Shadow DOM (such as Sa
 For self-contained widgets or instance-specific style overrides, `<rich-input>` also supports an optional embedded `<style>` block as a direct child, which is automatically injected into the shadow root:
 
 ```html
-<rich-input value='artist:"Aphex Twin" label:"XL Recordings"'>
+<rich-input value='artist:"Aphex Twin" label:"Warp Records"'>
   <style>
     ::highlight(label) {
       background-color: #dbeafe;

package/components/rich-input.js

@@ -283,6 +283,7 @@ TEMPLATE.innerHTML = `
       aria-autocomplete="list"
       aria-expanded="false"
       aria-haspopup="listbox"
+      aria-controls="ri-listbox"
     />
     <button part="clear-button" type="button" class="clear-button" aria-label="Clear search query" hidden>
       <svg viewBox="0 0 20 20" fill="currentColor">
@@ -296,13 +297,17 @@ TEMPLATE.innerHTML = `
     part="popover suggestions"
     class="popover"
     popover="manual"
-    role="listbox"
-    aria-label="Search suggestions"
   >
     <div part="suggestions-header" class="popover-header">
-      <span part="suggestions-title" class="popover-title">Suggestions</span>
+      <span id="ri-listbox-label" part="suggestions-title" class="popover-title">Suggestions</span>
     </div>
-    <ul part="suggestions-list" class="suggestions-list" role="presentation"></ul>
+    <ul
+      id="ri-listbox"
+      part="suggestions-list"
+      class="suggestions-list"
+      role="listbox"
+      aria-labelledby="ri-listbox-label"
+    ></ul>
   </div>
 
   <slot style="display: none;"></slot>
@@ -361,6 +366,8 @@ export class RichInput extends HTMLElement {
       'autofocus',
       'required',
       'highlight-quotes',
+      'aria-label',
+      'aria-labelledby',
     ];
   }
 
@@ -383,6 +390,7 @@ export class RichInput extends HTMLElement {
       editableDiv.setAttribute('aria-autocomplete', 'list');
       editableDiv.setAttribute('aria-expanded', 'false');
       editableDiv.setAttribute('aria-haspopup', 'listbox');
+      editableDiv.setAttribute('aria-controls', 'ri-listbox');
       editableDiv.setAttribute('spellcheck', 'false');
       editableDiv.setAttribute('tabindex', '0');
       existingInput.replaceWith(editableDiv);
@@ -416,6 +424,7 @@ export class RichInput extends HTMLElement {
     this._onClick = this._onClick.bind(this);
     this._onSelectionChange = this._onSelectionChange.bind(this);
     this._onClearClick = this._onClearClick.bind(this);
+    this._onClearMouseDown = (e) => e.preventDefault();
     this._onSlotChange = this._onSlotChange.bind(this);
     this._onGlobalClick = this._onGlobalClick.bind(this);
     this._onGlobalResizeOrScroll = this._onGlobalResizeOrScroll.bind(this);
@@ -453,6 +462,7 @@ export class RichInput extends HTMLElement {
     this._input.addEventListener('focus', this._onFocus);
     this._input.addEventListener('blur', this._onBlur);
     this._input.addEventListener('click', this._onClick);
+    this._clearBtn.addEventListener('mousedown', this._onClearMouseDown);
     this._clearBtn.addEventListener('click', this._onClearClick);
 
     // Global events
@@ -475,6 +485,7 @@ export class RichInput extends HTMLElement {
       this._internals.setFormValue(this._input.value);
     }
 
+    this._syncAccessibleName();
     this._updateClearButton();
     this.updateHighlights();
   }
@@ -494,6 +505,7 @@ export class RichInput extends HTMLElement {
     this._input.removeEventListener('focus', this._onFocus);
     this._input.removeEventListener('blur', this._onBlur);
     this._input.removeEventListener('click', this._onClick);
+    this._clearBtn.removeEventListener('mousedown', this._onClearMouseDown);
     this._clearBtn.removeEventListener('click', this._onClearClick);
 
     document.removeEventListener('click', this._onGlobalClick);
@@ -518,6 +530,9 @@ export class RichInput extends HTMLElement {
       }
     } else if (name === 'placeholder') {
       this._input.placeholder = newValue || '';
+      this._syncAccessibleName();
+    } else if (name === 'aria-label' || name === 'aria-labelledby') {
+      this._syncAccessibleName();
     } else if (name === 'disabled') {
       this._input.disabled = newValue !== null;
     } else if (name === 'readonly') {
@@ -535,6 +550,25 @@ export class RichInput extends HTMLElement {
     }
   }
 
+  _syncAccessibleName() {
+    if (!this._input) return;
+    if (this.hasAttribute('aria-label')) {
+      this._input.setAttribute('aria-label', this.getAttribute('aria-label'));
+    } else if (this._internals?.labels?.length > 0) {
+      const labelText = Array.from(this._internals.labels)
+        .map((l) => l.textContent.trim())
+        .filter(Boolean)
+        .join(' ');
+      if (labelText) {
+        this._input.setAttribute('aria-label', labelText);
+      }
+    } else if (this.hasAttribute('placeholder')) {
+      this._input.setAttribute('aria-label', this.getAttribute('placeholder'));
+    } else {
+      this._input.setAttribute('aria-label', 'Search');
+    }
+  }
+
   // --- Form Associated Lifecycle ---
   formResetCallback() {
     this.value = this.getAttribute('value') || '';
@@ -949,6 +983,7 @@ export class RichInput extends HTMLElement {
     this.updateHighlights();
     // Delay closing so click events on popover items can fire
     setTimeout(() => {
+      if (this._isFocused) return;
       this.hideSuggestions();
       this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
     }, 150);
@@ -1079,9 +1114,9 @@ export class RichInput extends HTMLElement {
     if (!this._isPopoverOpen()) {
       try {
         this._popover.showPopover();
-        this._input.setAttribute('aria-expanded', 'true');
       } catch (e) {}
     }
+    this._input.setAttribute('aria-expanded', 'true');
 
     // Position popover at the start of the current OpaqueRange (or via mirror-div fallback when OpaqueRange is unsupported)
     const currentRange = this._getCurrentOpaqueRange();
@@ -1190,10 +1225,14 @@ export class RichInput extends HTMLElement {
       const isAct = i === this._selectedIndex;
       items[i].classList.toggle('active', isAct);
       items[i].setAttribute('aria-selected', isAct ? 'true' : 'false');
+      items[i].setAttribute('part', `suggestion-item${isAct ? ' suggestion-item-active' : ''}`);
       if (isAct) {
         this._input.setAttribute('aria-activedescendant', items[i].id);
       }
     }
+    if (this._selectedIndex === -1) {
+      this._input.removeAttribute('aria-activedescendant');
+    }
   }
 
   _applySelectedSuggestion() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rich-input",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "A rich input field with keyword-based autocomplete and in-input highlighting powered by <datalist>, OpaqueRange, and the Custom Highlight API",
   "type": "module",
   "main": "./index.js",

package/utils/query-parser.js

@@ -181,8 +181,8 @@ export function getCaretContext(inputStr, caretPos, configuredKeywords) {
   // 1. Caret is within a keyword token
   if (activeToken.type === 'keyword') {
     if (caretPos <= activeToken.colonIndex) {
-      // User is editing the keyword name
-      const query = inputStr.slice(activeToken.start, caretPos);
+      // User is editing the keyword name (filter based on full keyword name, not caret position)
+      const query = activeToken.keyword;
       return {
         mode: 'keyword',
         query,
@@ -193,17 +193,16 @@ export function getCaretContext(inputStr, caretPos, configuredKeywords) {
         tokens,
       };
     } else {
-      // User is editing the keyword value
+      // User is editing the keyword value (filter based on full value string, not caret position)
       const isQuoted = activeToken.quoted;
-      const innerStart = activeToken.innerStart;
-      const innerEnd = activeToken.innerEnd;
-      const valuePrefix = inputStr.slice(innerStart, Math.min(caretPos, innerEnd));
+      const value = activeToken.innerValue;
 
       return {
         mode: 'value',
         keyword: activeToken.keyword,
         keywordLower: activeToken.keywordLower,
-        valuePrefix,
+        valuePrefix: value,
+        query: value,
         quoted: isQuoted,
         quoteChar: activeToken.quoteChar || '"',
         isClosed: activeToken.isClosed,
@@ -216,9 +215,9 @@ export function getCaretContext(inputStr, caretPos, configuredKeywords) {
     }
   }
 
-  // 2. Caret is within a plain text token
+  // 2. Caret is within a plain text token (filter based on full word, not caret position)
   if (activeToken.type === 'text') {
-    const query = inputStr.slice(activeToken.start, caretPos);
+    const query = activeToken.raw;
     return {
       mode: 'keyword',
       query,