@cfpb/cfpb-design-system 4.3.2 → 5.0.0

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,
     });
@@ -157,9 +157,11 @@ describe('<cfpb-list> tests', () => {
   });
 
   test('invalid childData logs error', async () => {
+    // eslint-disable-next-line no-console
     console.error = jest.fn();
     list.childData = 'not-json';
     await list.updateComplete;
+    // eslint-disable-next-line no-console
     expect(console.error).toHaveBeenCalled();
   });
 

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

@@ -1,4 +1,4 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import styles from './cfpb-list-item.component.scss';
 import { ref, createRef } from 'lit/directives/ref.js';
 import { CfpbCheckboxIcon } from '../cfpb-checkbox-icon';
@@ -8,9 +8,7 @@ import { CfpbCheckboxIcon } from '../cfpb-checkbox-icon';
  * @slot - The text for the list item.
  */
 export class CfpbListItem extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   #checkboxIcon = createRef();
   #value;
@@ -49,7 +47,7 @@ export class CfpbListItem extends LitElement {
       this.addEventListener('keydown', this.#onKeyDown);
     }
 
-    this.addEventListener('click', this.#onClick);
+    this.addEventListener('pointerdown', this.#onClick);
   }
 
   connectedCallback() {
@@ -102,7 +100,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-pagination/index.js

@@ -1,8 +1,8 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import styles from './cfpb-pagination.component.scss';
-import leftIcon from '../../components/cfpb-icons/icons/left.svg';
-import rightIcon from '../../components/cfpb-icons/icons/right.svg';
+import leftIcon from '../../components/cfpb-icons/icons/left.svg?raw';
+import rightIcon from '../../components/cfpb-icons/icons/right.svg?raw';
 import { I18nService, MediaQueryService } from '../cfpb-utilities/';
 
 /**
@@ -15,9 +15,7 @@ export class CfpbPagination extends LitElement {
   #isMobile;
   #i18n;
 
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   /**
    * @property {number} currentPage - The currently selected page.

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;
@@ -206,13 +173,27 @@
         top: unset;
       }
     }
+
+    @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

@@ -1,9 +1,9 @@
-import { html, LitElement, css, unsafeCSS, nothing } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import styles from './cfpb-select.component.scss';
-import expandIcon from '../../components/cfpb-icons/icons/down.svg';
-import collapseIcon from '../../components/cfpb-icons/icons/up.svg';
+import expandIcon from '../../components/cfpb-icons/icons/down.svg?raw';
+import collapseIcon from '../../components/cfpb-icons/icons/up.svg?raw';
 import { CfpbFormSearchInput } from '../cfpb-form-search-input';
 import { SearchService } from '../cfpb-utilities/search-service.js';
 import { MaxHeightTransition } from '../../utilities/transition/max-height-transition';
@@ -20,9 +20,7 @@ import { MultipleSelectEventProxy } from './multiple-select-event-proxy.js';
  * @slot - The main content for the select.
  */
 export class CfpbSelect extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   #eventProxy;
   #flyoutMenu;
@@ -82,6 +80,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 +162,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 +271,7 @@ export class CfpbSelect extends LitElement {
   }
 
   #onTagClick(evt) {
-    this.#eventProxy?.onTagClick(evt, this);
+    this.#eventProxy?.onTagClick(evt, this, this.#tagGroup.value);
   }
 
   render() {
@@ -288,27 +295,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 +324,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

@@ -1,7 +1,7 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import styles from './cfpb-tag-filter.component.scss';
-import icon from '../../components/cfpb-icons/icons/error.svg';
+import icon from '../../components/cfpb-icons/icons/error.svg?raw';
 
 /**
  *
@@ -9,9 +9,7 @@ import icon from '../../components/cfpb-icons/icons/error.svg';
  * @slot - The content for the filter tag.
  */
 export class CfpbTagFilter extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   /**
    * @property {string} for - Associate the label with an ID elsewhere.
@@ -28,6 +26,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

@@ -1,4 +1,4 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import styles from './cfpb-tag-group.component.scss';
 import { parseChildData } from '../cfpb-utilities/parse-child-data';
 
@@ -12,14 +12,12 @@ const SUPPORTED_TAG_LIST = ['CFPB-TAG-FILTER', 'CFPB-TAG-TOPIC'];
  *   The tag group has a list of tags in the lightDOM that gets re-written
  *   inside an unordered list in the shadowDOM so that it is read out
  *   as a list of items in VoiceOver.
- * @attribute {string} lang - The element's language.
- * @fires addtag - A tag was added to the group.
- * @fires removetag - A tag was removed from the group.
+ * @fires CfpbTagGroup#event:"tag-added" - A tag was added to the group.
+ * @fires CfpbTagGroup#event:"tag-click" - A tag was clicked.
+ * @fires CfpbTagGroup#event:"tag-removed" - A tag was removed to the group.
  */
 export class CfpbTagGroup extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   /**
    * @property {string} childData - Structure data to create child components.
@@ -78,6 +76,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;
 
@@ -192,7 +198,7 @@ export class CfpbTagGroup extends LitElement {
 
   /**
    * Add a tag to the light and dark DOM.
-   * @param {*} tag - The tag to add.
+   * @param {HTMLElement} tag - The tag to add.
    * @param {number} index - The position at which to add the tag.
    * @returns {boolean} false if the tag is already in the light DOM.
    */
@@ -207,11 +213,12 @@ export class CfpbTagGroup extends LitElement {
     this.#insertIntoShadowDom(tag, index);
 
     this.#refreshTagList();
+    return true;
   }
 
   /**
    * Add a tag to the light DOM.
-   * @param {*} tag - The tag to add.
+   * @param {HTMLElement} tag - The tag to add.
    * @param {number} index - The position at which to add the tag.
    */
   #insertIntoLightDom(tag, index) {
@@ -224,7 +231,7 @@ export class CfpbTagGroup extends LitElement {
 
   /**
    * Add a tag to the shadow DOM.
-   * @param {*} tag - The tag to add.
+   * @param {HTMLElement} tag - The tag to add.
    * @param {number} index - The position at which to add the tag.
    */
   #insertIntoShadowDom(tag, index) {
@@ -267,7 +274,7 @@ export class CfpbTagGroup extends LitElement {
   }
 
   /**
-   * @param {*} tag - The tag to add.
+   * @param {HTMLElement} tag - The tag to add.
    * @returns {string} A unique ID.
    */
   #tagIdentifier(tag) {
@@ -277,7 +284,7 @@ export class CfpbTagGroup extends LitElement {
   /**
    * Remove a filter tag from the light DOM.
    * This is private because it's called by the mutation observer.
-   * @param {*} tag - The tag to remove.
+   * @param {HTMLElement} tag - The tag to remove.
    * @returns {boolean} false if the wrapped tag was not found.
    */
   #removeTagNode(tag) {
@@ -315,11 +322,13 @@ export class CfpbTagGroup extends LitElement {
     );
 
     this.#refreshTagList();
+    this.focus();
+    return true;
   }
 
   /**
    * Remove a filter tag from the light and dark DOM.
-   * @param {*} tag - The tag to remove.
+   * @param {HTMLElement} tag - The tag to remove.
    */
   removeTag(tag) {
     // Support passing in either light DOM <tag> or shadow DOM <li> if needed
@@ -332,18 +341,18 @@ export class CfpbTagGroup extends LitElement {
 
   /**
    * Get light and dark DOM.
-   * @param {Node} node - The tag to remove.
-   * @returns {Node|null} The tag node.
+   * @param {HTMLElement} tag - The tag to remove.
+   * @returns {HTMLElement|null} The tag node.
    */
-  #getLightDomTag(node) {
+  #getLightDomTag(tag) {
     // If node is a wrapped shadow DOM <li>, get the orignal tag inside it.
-    if (node.tagName === 'LI' && node.shadowRoot) {
+    if (tag.tagName === 'LI' && tag.shadowRoot) {
       // unlikely scenario if you don't expose shadow nodes externally.
-      return node.querySelector('cfpb-tag-filter');
+      return tag.querySelector('cfpb-tag-filter');
     }
 
     // If node is already a light DOM tag or child <cfpb-tag-group>, return it.
-    if (this.contains(node)) return node;
+    if (this.contains(tag)) return tag;
 
     return null;
   }

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

@@ -1,4 +1,4 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
+import { html, LitElement } from 'lit';
 import styles from './cfpb-tag-topic.component.scss';
 
 /**
@@ -7,9 +7,7 @@ import styles from './cfpb-tag-topic.component.scss';
  * @slot - The content for the topic tag.
  */
 export class CfpbTagTopic extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
+  static styles = styles;
 
   /**
    * @property {string} href - href attribute, if this is a topic link.
@@ -34,6 +32,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';