@cfpb/cfpb-design-system 4.3.0 → 4.3.1

package/src/elements/cfpb-list/index.js

@@ -9,12 +9,14 @@ export class CfpbList extends LitElement {
     ${unsafeCSS(styles)}
   `;
 
+  #internalSync = false;
   #container = createRef();
   #items = [];
   #checkedItems = [];
   #visibleItems = [];
-  #focusedIndex = 0;
-  #internalSync = false;
+
+  // index in visibleItems
+  #focusedIndex = -1;
 
   // WeakMap to store per-item click listeners.
   #clickListeners = new WeakMap();
@@ -50,7 +52,6 @@ export class CfpbList extends LitElement {
       const parsed = parseChildData(this.childData);
       if (parsed) this.#renderItemsFromData(parsed);
     }
-
     if (changedProps.has('type')) {
       this.#applyTypeToItems();
     }
@@ -62,15 +63,12 @@ export class CfpbList extends LitElement {
   get items() {
     return this.#items;
   }
-
   get checkedItems() {
     return this.#checkedItems;
   }
-
   get visibleItems() {
     return this.#visibleItems;
   }
-
   get visibleCheckedItems() {
     return this.#visibleItems.filter((item) => item.checked);
   }
@@ -79,13 +77,12 @@ export class CfpbList extends LitElement {
   // RENDER ITEMS
   // -------------------------
   #renderItemsFromData(itemsArray) {
-    // Remove all children except <template> and <noscript>.
     [...this.children].forEach((child) => {
       if (child.tagName !== 'TEMPLATE' && child.tagName !== 'NOSCRIPT')
         child.remove();
     });
 
-    let firstChecked;
+    let firstChecked = null;
     itemsArray.forEach((data) => {
       const item = document.createElement('cfpb-list-item');
       item.textContent = data.value ?? '';
@@ -93,11 +90,12 @@ export class CfpbList extends LitElement {
       if ('hidden' in data) item.hidden = data.hidden;
       if ('href' in data) item.href = data.href;
       item.type = data.type ?? this.type;
+
       if (this.multiple) {
         if ('checked' in data) item.checked = data.checked;
       } else if (!firstChecked && data.checked) {
-        firstChecked = true;
-        if ('checked' in data) item.checked = true;
+        firstChecked = item;
+        item.checked = true;
       }
 
       this.appendChild(item);
@@ -136,7 +134,7 @@ export class CfpbList extends LitElement {
 
     // Assign tabindex, role, listeners.
     this.#items.forEach((item, index) => {
-      item.setAttribute('tabindex', index === 0 ? '0' : '-1');
+      item.setAttribute('tabindex', '-1');
       item.setAttribute('role', 'option');
 
       // Remove prior listener if present.
@@ -147,7 +145,6 @@ export class CfpbList extends LitElement {
       const listener = (evt) => {
         // Prevent actual click bubbling to list container.
         evt.stopPropagation();
-
         this.#handleToggle(item, item.checked, index);
       };
 
@@ -156,7 +153,8 @@ export class CfpbList extends LitElement {
 
       // Track focus index.
       item.addEventListener('focus', () => {
-        this.#focusedIndex = index;
+        const visIndex = this.#visibleItems.indexOf(item);
+        if (visIndex !== -1) this.#focusedIndex = visIndex;
       });
     });
 
@@ -181,7 +179,6 @@ export class CfpbList extends LitElement {
       checked: item.checked,
       disabled: item.disabled,
     }));
-
     this.#internalSync = true;
     this.childData = data;
     this.#internalSync = false;
@@ -199,9 +196,8 @@ export class CfpbList extends LitElement {
     if (this.multiple) {
       if (isChecked) {
         // Add if not already present.
-        if (!this.#checkedItems.includes(element)) {
+        if (!this.#checkedItems.includes(element))
           this.#checkedItems.push(element);
-        }
       } else {
         // Remove cleanly.
         this.#checkedItems = this.#checkedItems.filter(
@@ -224,6 +220,11 @@ export class CfpbList extends LitElement {
 
     this.#syncChildDataFromItems();
 
+    window.queueMicrotask(() => {
+      const visIndex = this.#visibleItems.indexOf(element);
+      this.focusItemAt(visIndex !== -1 ? visIndex : -1);
+    });
+
     this.dispatchEvent(
       new CustomEvent('item-click', {
         detail: { index, value: element.value, element },
@@ -242,31 +243,31 @@ export class CfpbList extends LitElement {
    * @returns {Array} List of visible list items.
    */
   filterItems(queryList) {
-    let firstIndex = 0;
     this.#visibleItems = [];
+    let firstVisibleIndex = -1;
 
-    this.items.forEach((item) => {
-      const valueLower = item.value.toLowerCase();
+    this.#items.forEach((item) => {
       const matches = queryList.some((q) =>
-        valueLower.includes(q.toLowerCase()),
+        item.value.toLowerCase().includes(q.toLowerCase()),
       );
-      if (!matches) firstIndex++;
-      else this.#visibleItems.push(item);
       item.hidden = !matches;
+      if (matches) {
+        if (firstVisibleIndex === -1)
+          firstVisibleIndex = this.#visibleItems.length;
+        this.#visibleItems.push(item);
+      }
     });
 
-    this.#focusedIndex = firstIndex;
-
+    this.#focusedIndex = firstVisibleIndex;
     this.#broadcastFiltered();
 
     return this.#visibleItems;
   }
 
   showAllItems() {
-    this.items.forEach((item) => (item.hidden = false));
+    this.#items.forEach((item) => (item.hidden = false));
+    this.#visibleItems = [...this.#items];
     this.#focusedIndex = 0;
-    this.#visibleItems = this.#items;
-
     this.#broadcastFiltered();
   }
 
@@ -285,41 +286,58 @@ export class CfpbList extends LitElement {
     );
   }
 
+  #focusContainer() {
+    this.#container.value.focus();
+    this.#focusedIndex = -1;
+  }
+
+  /**
+   * Focus a visible item by index.
+   * Pass -1 to move focus to the list container (no active item).
+   * @param {number} index - The index of the item to focus.
+   * @returns {undefined} If nothing to focus.
+   */
   focusItemAt(index) {
-    const visibleItems = this.items.filter((item) => !item.hidden);
-    if (!visibleItems.length) return;
+    // No active item (sentinel or invalid input).
+    const visibleItems = this.#visibleItems;
+    if (
+      !visibleItems.length ||
+      index == null ||
+      typeof index !== 'number' ||
+      Number.isNaN(index) ||
+      index === -1
+    ) {
+      this.#focusContainer();
+      return;
+    }
 
     const normalizedIndex =
       ((index % visibleItems.length) + visibleItems.length) %
       visibleItems.length;
-    const item = visibleItems[normalizedIndex];
-    item.focus();
+    visibleItems[normalizedIndex].focus();
     this.#focusedIndex = normalizedIndex;
   }
 
   #onFocus(evt) {
     // If the focus is on the container itself (not an item), set index to -1.
-    if (evt.target === this.#container.value) {
-      this.#focusedIndex = -1;
-    }
+    if (evt.target === this.#container.value) this.#focusContainer();
   }
 
-  // -------------------------
-  // KEYBOARD NAVIGATION
-  // -------------------------
   #onKeyDown(evt) {
-    const visibleItems = this.items.filter((item) => !item.hidden);
+    const visibleItems = this.#visibleItems;
     if (!visibleItems.length) return;
     const last = visibleItems.length - 1;
 
     switch (evt.key) {
       case 'ArrowDown':
         evt.preventDefault();
-        this.focusItemAt(this.#focusedIndex + 1);
+        this.focusItemAt(this.#focusedIndex < 0 ? 0 : this.#focusedIndex + 1);
         break;
       case 'ArrowUp':
         evt.preventDefault();
-        this.focusItemAt(this.#focusedIndex - 1);
+        this.focusItemAt(
+          this.#focusedIndex < 0 ? last : this.#focusedIndex - 1,
+        );
         break;
       case 'Home':
         evt.preventDefault();
@@ -332,6 +350,10 @@ export class CfpbList extends LitElement {
     }
   }
 
+  get focusedIndex() {
+    return this.#focusedIndex;
+  }
+
   render() {
     return html`
       <div

package/src/elements/cfpb-list/index.spec.js

@@ -27,7 +27,6 @@ describe('<cfpb-list> tests', () => {
     await list.updateComplete;
 
     expect(list.items.length).toBe(3);
-    // Only first checked stays true in single select
     expect(list.items[0].checked).toBe(true);
     expect(list.items[1].checked).toBe(false);
     expect(list.items[2].checked).toBe(false);
@@ -48,7 +47,6 @@ describe('<cfpb-list> tests', () => {
     expect(list.checkedItems).toContain(list.items[0]);
     expect(list.checkedItems).toContain(list.items[1]);
 
-    // Uncheck an item
     const event = new CustomEvent('click-item', {
       bubbles: true,
       composed: true,
@@ -61,13 +59,11 @@ describe('<cfpb-list> tests', () => {
 
   test('click-item toggles single selection', async () => {
     list.childData = JSON.stringify([{ value: 'A' }, { value: 'B' }]);
-
     await list.updateComplete;
 
     const clickSpy = jest.fn();
     list.addEventListener('item-click', clickSpy);
 
-    // Click first item
     list.items[0].checked = true;
     list.items[0].dispatchEvent(
       new CustomEvent('click-item', { bubbles: true, composed: true }),
@@ -76,7 +72,6 @@ describe('<cfpb-list> tests', () => {
     expect(list.checkedItems).toEqual([list.items[0]]);
     expect(clickSpy).toHaveBeenCalledTimes(1);
 
-    // Click again to uncheck
     list.items[0].checked = false;
     list.items[0].dispatchEvent(
       new CustomEvent('click-item', { bubbles: true, composed: true }),
@@ -91,7 +86,6 @@ describe('<cfpb-list> tests', () => {
     const listenerSpy = jest.fn();
     list.addEventListener('item-click', listenerSpy);
 
-    // Trigger click-item event
     const event = new CustomEvent('click-item', {
       bubbles: true,
       composed: true,
@@ -127,24 +121,27 @@ describe('<cfpb-list> tests', () => {
 
     list.filterItems(['C']); // only C visible
 
-    list.focusItemAt(0);
-    expect(document.activeElement.value).toBe('C');
+    const container = list.shadowRoot.querySelector('div');
+    container.focus();
+    expect(document.activeElement.tagName).toBe('CFPB-LIST');
 
-    // Press ArrowDown, should wrap to same visible item
-    list.shadowRoot
-      .querySelector('div')
-      .dispatchEvent(
-        new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }),
-      );
+    // ArrowDown → first visible
+    container.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }),
+    );
     expect(document.activeElement.value).toBe('C');
 
-    // Press ArrowUp
-    list.shadowRoot
-      .querySelector('div')
-      .dispatchEvent(
-        new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }),
-      );
+    // ArrowDown → wrap
+    container.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }),
+    );
     expect(document.activeElement.value).toBe('C');
+
+    // ArrowUp → wrap
+    container.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }),
+    );
+    expect(document.activeElement.tagName).toBe('CFPB-LIST');
   });
 
   test('showAllItems unhides all items', async () => {
@@ -163,7 +160,55 @@ describe('<cfpb-list> tests', () => {
     console.error = jest.fn();
     list.childData = 'not-json';
     await list.updateComplete;
-
     expect(console.error).toHaveBeenCalled();
   });
+
+  // -------------------------------
+  // focusItemAt sentinel tests
+  // -------------------------------
+
+  test('focusItemAt(-1) focuses the container', async () => {
+    list.childData = JSON.stringify([{ value: 'A' }, { value: 'B' }]);
+    await list.updateComplete;
+    list.focusItemAt(-1);
+    expect(document.activeElement.tagName).toBe('CFPB-LIST');
+  });
+
+  test('focusItemAt(null) focuses the container', async () => {
+    list.childData = JSON.stringify([{ value: 'A' }]);
+    await list.updateComplete;
+    list.focusItemAt(null);
+    expect(document.activeElement.tagName).toBe('CFPB-LIST');
+  });
+
+  test('focusItemAt(undefined) focuses the container', async () => {
+    list.childData = JSON.stringify([{ value: 'A' }]);
+    await list.updateComplete;
+    list.focusItemAt(undefined);
+    expect(document.activeElement.tagName).toBe('CFPB-LIST');
+  });
+
+  test('ArrowDown from container focuses first visible item', async () => {
+    list.childData = JSON.stringify([{ value: 'A' }, { value: 'B' }]);
+    await list.updateComplete;
+
+    const container = list.shadowRoot.querySelector('div');
+    container.focus();
+    container.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }),
+    );
+    expect(document.activeElement.value).toBe('A');
+  });
+
+  test('ArrowUp from container focuses last visible item', async () => {
+    list.childData = JSON.stringify([{ value: 'A' }, { value: 'B' }]);
+    await list.updateComplete;
+
+    const container = list.shadowRoot.querySelector('div');
+    container.focus();
+    container.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }),
+    );
+    expect(document.activeElement.value).toBe('B');
+  });
 });

package/src/elements/cfpb-select/cfpb-select.component.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/base' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/base' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
 @use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icon';
 @use '../cfpb-utilities/transition/transition.scss' as *;

package/src/elements/cfpb-select/index.js

@@ -11,17 +11,20 @@ import { FlyoutMenu } from '../../utilities/behavior/flyout-menu';
 import { CfpbList } from '../cfpb-list';
 import { CfpbTagGroup } from '../cfpb-tag-group';
 
+import { SingleSelectEventProxy } from './single-select-event-proxy.js';
+import { MultipleSelectEventProxy } from './multiple-select-event-proxy.js';
+
 /**
  *
- * @element cfpb-button
- * @slot - The main content for the button.
+ * @element cfpb-select
+ * @slot - The main content for the select.
  */
 export class CfpbSelect extends LitElement {
   static styles = css`
     ${unsafeCSS(styles)}
   `;
 
-  // Flyout menu options.
+  #eventProxy;
   #flyoutMenu;
   #transition;
   #search;
@@ -32,7 +35,7 @@ export class CfpbSelect extends LitElement {
   #tagGroup = createRef();
   #list = createRef();
   #displayLabel = createRef();
-  #boundOnOutsideClick;
+  #boundOnOutsideFocus;
   #noResults = false;
 
   /**
@@ -64,23 +67,33 @@ export class CfpbSelect extends LitElement {
   constructor() {
     super();
 
+    this.multiple = false;
     this.options = [];
     this.selectedTexts = [];
     this.optionList = [];
 
-    this.#boundOnOutsideClick = this.#onOutsideClick.bind(this);
+    this.#boundOnOutsideFocus = this.#onFocusOutside.bind(this);
   }
 
   firstUpdated() {
     this.#initFlyoutMenu();
+
+    this.addEventListener('focus', () => {
+      this.#eventProxy.onFocus();
+    });
+
+    this.addEventListener('keydown', (evt) => {
+      this.#eventProxy.onKeyDown(evt, this);
+    });
   }
 
   disconnectedCallback() {
-    document.removeEventListener('pointerdown', this.#boundOnOutsideClick);
+    document.removeEventListener('pointerdown', this.#boundOnOutsideFocus);
+    document.removeEventListener('focusin', this.#boundOnOutsideFocus);
     super.disconnectedCallback();
   }
 
-  #onOutsideClick(evt) {
+  #onFocusOutside(evt) {
     const path = evt.composedPath();
     if (!path.includes(this)) {
       this.isExpanded = false;
@@ -104,14 +117,20 @@ export class CfpbSelect extends LitElement {
 
     // Extract list items (with their text or link info)
     const items = [...list[0].querySelectorAll('li')].map((li) => {
-      const checked = li.querySelector('b');
+      const checked =
+        li.hasAttribute('data-checked') || li.hasAttribute('checked');
+
+      const itemValue = li.textContent.trim();
+
       if (checked) {
+        if (!this.multiple) this.#displayLabel.value.textContent = itemValue;
         return {
-          value: li.textContent.trim(),
+          value: itemValue,
           checked: 'true',
         };
       }
-      return { value: li.textContent.trim() };
+
+      return { value: itemValue };
     });
 
     this.optionList = items;
@@ -192,6 +211,10 @@ export class CfpbSelect extends LitElement {
   }
 
   updated(changedProps) {
+    if (changedProps.has('multiple')) {
+      this.#eventProxy = this.#createEventProxy();
+    }
+
     if (changedProps.has('isExpanded')) {
       const oldVal = changedProps.get('isExpanded');
       const newVal = this.isExpanded;
@@ -199,81 +222,49 @@ export class CfpbSelect extends LitElement {
       if (newVal !== oldVal) {
         if (newVal) {
           this.#flyoutMenu.expand();
-          document.addEventListener('pointerdown', this.#boundOnOutsideClick);
+          document.addEventListener('pointerdown', this.#boundOnOutsideFocus);
+          document.addEventListener('focusin', this.#boundOnOutsideFocus);
         } else {
           this.#flyoutMenu.collapse();
           document.removeEventListener(
             'pointerdown',
-            this.#boundOnOutsideClick,
+            this.#boundOnOutsideFocus,
           );
+          document.removeEventListener('focusin', this.#boundOnOutsideFocus);
         }
       }
     }
   }
 
-  #onClick(evt) {
-    const target = evt.currentTarget;
-
-    if (this.multiple) {
-      if (target.tagName === 'CFPB-FORM-SEARCH-INPUT') {
-        if (this.isExpanded) this.#flyoutMenu.suspend();
-        else this.#flyoutMenu.expand();
-      } else {
-        this.#flyoutMenu.resume();
-      }
-    } else if (target.classList.contains('o-select__label')) {
-      this.#headerDom.value.focus();
-      this.isExpanded = !this.isExpanded;
-    }
-  }
-
-  #onItemClick() {
-    if (this.multiple) {
-      this.optionList = this.#list.value.childData;
-      this.requestUpdate();
-    } else {
-      const checkedItems = this.#list.value.checkedItems;
-      const selectedValue = checkedItems[0]?.value;
-
-      this.#displayLabel.value.innerHTML = selectedValue ? selectedValue : '';
-
-      // Update optionList so the selection persists.
-      this.optionList = this.optionList.map((item) => ({
-        ...item,
-        checked: item.value === selectedValue,
-      }));
-
-      this.requestUpdate();
-
-      // Now close the dropdown.
-      this.isExpanded = false;
+  #createEventProxy() {
+    const common = {
+      list: this.#list.value,
+      flyout: () => this.#flyoutMenu,
+    };
 
-      // Move focus back to the header.
-      if (this.multiple) this.#input.value.focus();
-      else this.#headerDom.value.focus();
-    }
+    return this.multiple
+      ? new MultipleSelectEventProxy({
+          ...common,
+          input: this.#input.value,
+          tagGroup: this.#tagGroup.value,
+        })
+      : new SingleSelectEventProxy({
+          ...common,
+          displayLabel: this.#displayLabel.value,
+          header: this.#headerDom.value,
+        });
   }
 
-  #onTagClick(evt) {
-    const tagList = this.#tagGroup.value.tagList.filter((item) => {
-      return item !== evt.detail.target;
-    });
-
-    this.optionList = this.optionList.map((item) => ({
-      ...item,
-      checked: !!tagList.find((tag) => tag.value === item.value),
-    }));
+  #onClick(evt) {
+    this.#eventProxy?.onClick(evt, this);
+  }
 
-    this.requestUpdate();
+  #onItemClick(evt) {
+    this.#eventProxy?.onItemClick(evt, this);
   }
 
-  #onKeyDown(evt) {
-    switch (evt.key) {
-      case 'ArrowDown':
-        evt.preventDefault();
-        this.#contentDom.value.querySelector('cfpb-list-item').focus();
-        break;
-    }
+  #onTagClick(evt) {
+    this.#eventProxy?.onTagClick(evt, this);
   }
 
   render() {
@@ -308,7 +299,6 @@ export class CfpbSelect extends LitElement {
           title="Expand content"
           data-js-hook="behavior_flyout-menu_trigger"
           ${ref(this.#headerDom)}
-          @keydown=${this.#onKeyDown}
         >
           <span class="o-select__cues" @click=${this.#onClick}>
             <span class="o-select__cue-open" role="img" aria-label="Show">