@cfpb/cfpb-design-system 4.3.2 → 4.4.0

package/src/components/cfpb-tables/table.scss

@@ -80,7 +80,10 @@
       margin-top: 0;
       margin-bottom: math.div(5px, $base-font-size-px) + em;
       content: attr(data-label);
-      line-height: 1.83333333;
+
+      // Yeilds 1.83333333
+      // TODO: Research alternative to this magic number
+      line-height: math.div(11,6);
 
       // h5 size.
       font-size: math.div($size-v, $base-font-size-px) + em;

package/src/elements/cfpb-form-search/cfpb-form-search.component.scss

@@ -45,6 +45,16 @@
       border: 1px solid var(--pacific);
       border-top: 0;
       width: calc(100% - 2px);
+
+      &::after {
+        position: absolute;
+        content: '';
+        display: block;
+        width: 100%;
+        height: 1px;
+        bottom: -1px;
+        border-bottom: 1px solid var(--pacific);
+      }
     }
 
     .popup.show {

package/src/elements/cfpb-form-search/index.js

@@ -131,8 +131,6 @@ export class CfpbFormSearch extends LitElement {
     evt.preventDefault();
     if (this.disabled) return;
 
-    console.log(this.value);
-
     if (this.value !== '') {
       this.#internals.setFormValue(this.value);
       this.#internals.form?.requestSubmit();
@@ -148,7 +146,7 @@ export class CfpbFormSearch extends LitElement {
         <div class="container">
           <cfpb-form-search-input
             ?name=${this.name}
-            ?value=${this.value}
+            .value=${this.value}
             ?placeholder=${this.placeholder}
             title=${this.title}
             ?maxlength=${this.maxlength}

package/src/elements/cfpb-form-search-input/cfpb-form-search-input.component.scss

@@ -14,11 +14,14 @@
   // Private vars
   --input-border: var(--input-border-default);
 
+  display: flex;
+
   .o-search-input {
     position: relative;
     display: flex;
     width: initial;
     flex: 0 1 100%;
+    align-items: center;
 
     // Add a min-width for the default width of the text input + clear button,
     // so that when the clear button appears it doesn't bump the input width.
@@ -33,12 +36,7 @@
     label {
       position: absolute;
       left: 10px;
-      align-self: center;
       cursor: pointer;
-      line-height: math.div(
-        14.4px,
-        $base-font-size-px
-      ); // 9px vertically centers icon.
     }
 
     // This line-height settings is taken from base.scss.
@@ -175,6 +173,11 @@
   .o-search-input {
     border-color: transparent;
 
+    input {
+      padding-top: math.div(5px, $base-font-size-px) + em;
+      padding-bottom: math.div(5px, $base-font-size-px) + em;
+    }
+
     &:hover,
     &:focus-within {
       border-color: transparent;

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

@@ -139,7 +139,7 @@ export class CfpbList extends LitElement {
 
       // Remove prior listener if present.
       const prev = this.#clickListeners.get(item);
-      if (prev) item.removeEventListener('click-item', prev);
+      if (prev) item.removeEventListener('item-click', prev);
 
       // Listener that toggles the item before handling.
       const listener = (evt) => {
@@ -148,7 +148,7 @@ export class CfpbList extends LitElement {
         this.#handleToggle(item, item.checked, index);
       };
 
-      item.addEventListener('click-item', listener);
+      item.addEventListener('item-click', listener);
       this.#clickListeners.set(item, listener);
 
       // Track focus index.

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

@@ -47,7 +47,7 @@ describe('<cfpb-list> tests', () => {
     expect(list.checkedItems).toContain(list.items[0]);
     expect(list.checkedItems).toContain(list.items[1]);
 
-    const event = new CustomEvent('click-item', {
+    const event = new CustomEvent('item-click', {
       bubbles: true,
       composed: true,
     });
@@ -57,7 +57,7 @@ describe('<cfpb-list> tests', () => {
     expect(list.checkedItems).toEqual([list.items[1]]);
   });
 
-  test('click-item toggles single selection', async () => {
+  test('item-click toggles single selection', async () => {
     list.childData = JSON.stringify([{ value: 'A' }, { value: 'B' }]);
     await list.updateComplete;
 
@@ -66,7 +66,7 @@ describe('<cfpb-list> tests', () => {
 
     list.items[0].checked = true;
     list.items[0].dispatchEvent(
-      new CustomEvent('click-item', { bubbles: true, composed: true }),
+      new CustomEvent('item-click', { bubbles: true, composed: true }),
     );
 
     expect(list.checkedItems).toEqual([list.items[0]]);
@@ -74,7 +74,7 @@ describe('<cfpb-list> tests', () => {
 
     list.items[0].checked = false;
     list.items[0].dispatchEvent(
-      new CustomEvent('click-item', { bubbles: true, composed: true }),
+      new CustomEvent('item-click', { bubbles: true, composed: true }),
     );
     expect(list.checkedItems).toEqual([]);
   });
@@ -86,7 +86,7 @@ describe('<cfpb-list> tests', () => {
     const listenerSpy = jest.fn();
     list.addEventListener('item-click', listenerSpy);
 
-    const event = new CustomEvent('click-item', {
+    const event = new CustomEvent('item-click', {
       bubbles: true,
       composed: true,
     });

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

@@ -49,7 +49,7 @@ export class CfpbListItem extends LitElement {
       this.addEventListener('keydown', this.#onKeyDown);
     }
 
-    this.addEventListener('click', this.#onClick);
+    this.addEventListener('pointerdown', this.#onClick);
   }
 
   connectedCallback() {
@@ -102,7 +102,7 @@ export class CfpbListItem extends LitElement {
     // … Otherwise, toggle the checked state.
     this.checked = !this.checked;
     this.dispatchEvent(
-      new CustomEvent('click-item', {
+      new CustomEvent('item-click', {
         detail: { checked: this.checked, value: this.value },
         bubbles: true,
         composed: true,

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

@@ -64,7 +64,11 @@
   .o-select {
     position: relative;
     display: grid;
-    grid-template-columns: 1fr 38px;
+    grid-template-columns: 1fr 35px;
+
+    // Height should be 35px (33px + 1px top and bottom border).
+    min-height: 33px;
+    border: 1px solid var(--select-border);
 
     &:hover {
       border-color: var(--select-border-hover);
@@ -83,25 +87,15 @@
     // Header
     //
 
-    &__header {
+    &__cues {
       padding: 0;
       border: 0;
       background-color: transparent;
       cursor: pointer;
 
       display: flex;
-
-      // Single select.
-      &:has(.o-select__label) {
-        justify-content: space-between;
-        align-items: center;
-        gap: 10px;
-      }
-
-      // Multiselect.
-      cfpb-form-search-input {
-        width: 100%;
-      }
+      justify-content: space-evenly;
+      align-items: center;
 
       .o-select__cue-close,
       .o-select__cue-open {
@@ -110,10 +104,12 @@
 
       &[aria-expanded='false'] .o-select__cue-open {
         display: block;
+        margin-top: -1px;
       }
 
       &[aria-expanded='true'] .o-select__cue-close {
         display: block;
+        margin-top: -5px;
       }
     }
 
@@ -121,11 +117,11 @@
       padding: 6.5px 10px;
     }
 
-    // Using the button element with .o-select__header requires setting
+    // Using the button element with .o-select__cues requires setting
     // an explicit width.
-    button.o-select__header {
-      width: 100%;
-      text-align: left;
+    button.o-select__cues {
+      background: var(--select-icon-bg-default);
+      border-left: 1px solid var(--select-border-default);
     }
 
     //
@@ -133,22 +129,15 @@
     //
 
     &__label {
-      // Grow to available width.
-      flex-grow: 1;
-      padding: math.div(7px, $base-font-size-px) + em
-        math.div(10px, $base-font-size-px) + em;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 10px;
+      padding-left: math.div(10px, $base-font-size-px) + em;
 
       cursor: pointer;
     }
 
-    &__cues {
-      align-self: center;
-      background: var(--select-icon-bg-default);
-      border-left: 1px solid var(--select-border-default);
-      padding: math.div(7px, $base-font-size-px) + em
-        math.div(10px, $base-font-size-px) + em;
-    }
-
     &__content {
       box-sizing: border-box;
       overflow-x: hidden;
@@ -167,28 +156,6 @@
       }
     }
 
-    //
-    // select with a border modifier
-    //
-
-    &--border {
-      border: 1px solid var(--select-border);
-    }
-
-    @media print {
-      // Hide the interactive select cues when printing
-      &__header[aria-expanded='true'] &__cue-close,
-      &__header[aria-expanded='false'] &__cue-open {
-        display: none;
-      } // Ensure all selects are expanded when printing.
-      // To accommodate print stylesheets that display the raw URL after links,
-      // set an enormous max height to accommodate selects that have a lot of links.
-      &__content[aria-expanded='false'] {
-        display: block;
-        max-height: 99999px !important;
-      }
-    }
-
     &--down {
       &::before {
         bottom: -1px;
@@ -207,12 +174,26 @@
       }
     }
   }
+
+  @media print {
+    // Hide the interactive select cues when printing
+    &__cues[aria-expanded='true'] &__cue-close,
+    &__cues[aria-expanded='false'] &__cue-open {
+      display: none;
+    } // Ensure all selects are expanded when printing.
+    // To accommodate print stylesheets that display the raw URL after links,
+    // set an enormous max height to accommodate selects that have a lot of links.
+    &__content[aria-expanded='false'] {
+      display: block;
+      max-height: 99999px !important;
+    }
+  }
 }
 
 // The drop-down is expanded.
 :host([open]) {
   .o-select {
-    // The divider between __header and __content.
+    // The divider between input and content.
     &::before {
       position: absolute;
       z-index: 11;
@@ -229,10 +210,6 @@
 html[lang='ar'] {
   :host {
     .o-select {
-      &__header {
-        text-align: right;
-      }
-
       &__cues {
         text-align: left;
       }

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

@@ -82,6 +82,10 @@ export class CfpbSelect extends LitElement {
       this.#eventProxy.onFocus();
     });
 
+    this.addEventListener('blur', () => {
+      this.#eventProxy.onBlur(this);
+    });
+
     this.addEventListener('keydown', (evt) => {
       this.#eventProxy.onKeyDown(evt, this);
     });
@@ -160,7 +164,12 @@ export class CfpbSelect extends LitElement {
   }
 
   #onClear() {
+    this.#flyoutMenu.suspend();
+    this.isExpanded = false;
     this.#list.value.showAllItems();
+    this.#noResults = false;
+    this.requestUpdate();
+    this.#flyoutMenu.resume();
   }
 
   #initFlyoutMenu() {
@@ -264,7 +273,7 @@ export class CfpbSelect extends LitElement {
   }
 
   #onTagClick(evt) {
-    this.#eventProxy?.onTagClick(evt, this);
+    this.#eventProxy?.onTagClick(evt, this, this.#tagGroup.value);
   }
 
   render() {
@@ -288,27 +297,27 @@ export class CfpbSelect extends LitElement {
         : nothing}
 
       <div
-        class="o-select o-select--border"
+        class="o-select"
         data-js-hook="behavior_flyout-menu"
         ${ref(this.#root)}
       >
         ${this.#renderInput()}
 
         <button
-          class="o-select__header"
+          tabindex=${this.multiple ? '-1' : '0'}
+          class="o-select__cues"
           title="Expand content"
           data-js-hook="behavior_flyout-menu_trigger"
           ${ref(this.#headerDom)}
+          @click=${this.#onClick}
         >
-          <span class="o-select__cues" @click=${this.#onClick}>
-            <span class="o-select__cue-open" role="img" aria-label="Show">
-              ${unsafeSVG(expandIcon)}
-              <span class="u-visually-hidden">Show</span>
-            </span>
-            <span class="o-select__cue-close" role="img" aria-label="Hide">
-              ${unsafeSVG(collapseIcon)}
-              <span class="u-visually-hidden">Hide</span>
-            </span>
+          <span class="o-select__cue-open" role="img" aria-label="Show">
+            ${unsafeSVG(expandIcon)}
+            <span class="u-visually-hidden">Show</span>
+          </span>
+          <span class="o-select__cue-close" role="img" aria-label="Hide">
+            ${unsafeSVG(collapseIcon)}
+            <span class="u-visually-hidden">Hide</span>
           </span>
         </button>
         <div
@@ -317,6 +326,7 @@ export class CfpbSelect extends LitElement {
           ${ref(this.#contentDom)}
         >
           <cfpb-list
+            tabindex=${this.#noResults ? '-1' : '0'}
             @item-click=${this.#onItemClick}
             ?multiple=${this.multiple}
             .childData=${this.optionList}

package/src/elements/cfpb-select/multiple-select-event-proxy.js

@@ -6,6 +6,15 @@ export class MultipleSelectEventProxy {
     this.flyout = flyout;
   }
 
+  onFocus() {
+    this.input.focus();
+  }
+
+  onBlur() {
+    // In multiselect, blur happens when inside the list, so we ignore any
+    // blur actions.
+  }
+
   onClick(evt, host) {
     const target = evt.currentTarget;
 
@@ -19,10 +28,9 @@ export class MultipleSelectEventProxy {
   onItemClick(evt, host) {
     host.optionList = this.list.childData ?? [];
     evt.currentTarget.focusItemAt(evt.detail.index);
-    //host.requestUpdate();
   }
 
-  onTagClick(evt, host) {
+  async onTagClick(evt, host, tagGroup) {
     const remaining =
       this.tagGroup.tagList.filter((tag) => tag !== evt.detail.target) ?? [];
 
@@ -31,7 +39,10 @@ export class MultipleSelectEventProxy {
       checked: remaining.some((tag) => tag.value === item.value),
     }));
 
-    //host.requestUpdate();
+    // Wait for tagGroup items to refresh.
+    await host.updateComplete;
+
+    tagGroup.focus();
   }
 
   onKeyDown(evt, host) {
@@ -40,13 +51,15 @@ export class MultipleSelectEventProxy {
     if (focused === 'CFPB-FORM-SEARCH-INPUT') {
       switch (evt.key) {
         case 'Tab':
-          evt.preventDefault();
           if (evt.shiftKey) {
-            if (host.isExpanded) host.isExpanded = false;
-            this.input.focus();
-          } else {
-            if (!host.isExpanded) host.isExpanded = true;
-            this.list.focusItemAt(0);
+            if (host.isExpanded) {
+              evt.preventDefault();
+              host.isExpanded = false;
+              this.input.focus();
+            } else if (this.tagGroup.tagList.length > 0) {
+              evt.preventDefault();
+              this.tagGroup.focus();
+            }
           }
           break;
         case 'ArrowDown':
@@ -59,14 +72,11 @@ export class MultipleSelectEventProxy {
           host.isExpanded = !host.isExpanded;
           break;
       }
-    }
-
-    if (focused === 'CFPB-LIST-ITEM') {
+    } else if (focused === 'CFPB-LIST-ITEM') {
       switch (evt.key) {
         case 'Tab':
           if (evt.shiftKey) {
             if (this.list.focusedIndex === 0) {
-              //host.shadowRoot.activeElement.blur();
               evt.preventDefault();
               this.list.focusItemAt(-1);
               this.input.focus();
@@ -81,8 +91,4 @@ export class MultipleSelectEventProxy {
       host.isExpanded = false;
     }
   }
-
-  onFocus() {
-    this.input.focus();
-  }
 }

package/src/elements/cfpb-select/single-select-event-proxy.js

@@ -5,6 +5,14 @@ export class SingleSelectEventProxy {
     this.header = header;
   }
 
+  onFocus() {
+    this.header.focus();
+  }
+
+  onBlur(host) {
+    host.isExpanded = false;
+  }
+
   onClick(evt, host) {
     if (evt.currentTarget.classList.contains('o-select__label')) {
       this.header.focus();
@@ -24,7 +32,6 @@ export class SingleSelectEventProxy {
       checked: item.value === selected,
     }));
 
-    //host.requestUpdate();
     host.isExpanded = false;
   }
 
@@ -40,8 +47,4 @@ export class SingleSelectEventProxy {
       }
     }
   }
-
-  onFocus() {
-    // Additional actions done on focus can be added here.
-  }
 }

package/src/elements/cfpb-tag-filter/index.js

@@ -28,6 +28,13 @@ export class CfpbTagFilter extends LitElement {
     this.value = '';
   }
 
+  async focus() {
+    // Wait for UI to settle.
+    await this.updateComplete;
+
+    this.shadowRoot.querySelector('button').focus();
+  }
+
   #onClick() {
     this.dispatchEvent(
       new CustomEvent('tag-click', {

package/src/elements/cfpb-tag-group/index.js

@@ -78,6 +78,14 @@ export class CfpbTagGroup extends LitElement {
     }
   }
 
+  async focus() {
+    // Wait for tagList to update.
+    await this.updateComplete;
+
+    const firstChild = this.tagList[0];
+    if (firstChild) firstChild.focus();
+  }
+
   #renderTagsFromData(arr) {
     if (!Array.isArray(arr)) return;
 
@@ -315,6 +323,7 @@ export class CfpbTagGroup extends LitElement {
     );
 
     this.#refreshTagList();
+    this.focus();
   }
 
   /**

package/src/elements/cfpb-tag-topic/index.js

@@ -34,6 +34,13 @@ export class CfpbTagTopic extends LitElement {
     this.siblingOfJumpLink = false;
   }
 
+  async focus() {
+    // Wait for UI to settle.
+    await this.updateComplete;
+
+    this.shadowRoot.querySelector('.a-tag-topic').focus();
+  }
+
   get #tagClass() {
     let tagClass = 'a-tag-topic';
 

package/src/elements/cfpb-utilities/media-query-service.js

@@ -12,7 +12,7 @@ export class MediaQueryService extends EventTarget {
 
   /**
    *
-   * @param {Record<string, {min: number, max?: number}} [breakpoints]
+   * @param {Record<string, {min: number, max?: number}>} [breakpoints]
    *   A map of breakpoint name -> { min: px, optional max: px }.
    *   If not provided, default breakpoints are used.
    */

package/src/elements/cfpb-utilities/parse-child-data.js

@@ -4,7 +4,7 @@
  *   - JS arrays
  *   - JSON strings
  *   - JSON-like strings with single quotes
- * @param {Array | string} input
+ * @param {Array | string} input - An array or JSON string.
  * @param {object} options - optional settings.
  * @param {boolean} options.allowSingleQuotes - default true.
  * @returns {Array|null} Parsed array/string, or null if invalid.