update USWDS to 3.10.0

* npm audit fix --force
* remove aria-label per USWDS guidance

app/views/admin/digital_products/_step_indicator.html.erb

@@ -45,7 +45,7 @@
     </div>
   </div>
 
-  <div class="usa-step-indicator" aria-label="progress">
+  <div class="usa-step-indicator">
     <ol class="usa-step-indicator__segments">
       <li class="usa-step-indicator__segment
         <%= "usa-step-indicator__segment--complete" if product.submitted? || product.published? || product.archived? || product.updated? %>

app/views/components/widget/_widget-uswds.js.erb

@@ -375,20 +375,88 @@ const displayList = el => {
   const inputValue = (inputEl.value || "").toLowerCase();
   const filter = comboBoxEl.dataset.filter || DEFAULT_FILTER;
   const regex = generateDynamicRegExp(filter, inputValue, comboBoxEl.dataset);
-  const options = [];
-  for (let i = 0, len = selectEl.options.length; i < len; i += 1) {
-    const optionEl = selectEl.options[i];
-    const optionId = `${listOptionBaseId}${options.length}`;
-    if (optionEl.value && (disableFiltering || isPristine || !inputValue || regex.test(optionEl.text))) {
-      if (selectEl.value && optionEl.value === selectEl.value) {
-        selectedItemId = optionId;
-      }
-      if (disableFiltering && !firstFoundId && regex.test(optionEl.text)) {
+  let options = [];
+  const optionsStartsWith = [];
+  const optionsContains = [];
+  const optionList = [...selectEl.options];
+
+  /**
+   * Builds and sorts options array.
+   *
+   * Option param is passed through regex test before passing into this function.
+   * When filtering is enabled, the array will be sorted by options that start with the query, followed by
+   * options that contain the query.
+   * When filtering is disabled, all options will be included in the array unsorted.
+   *
+   * These array items will populate the list that is displayed to the user after a search query is entered.
+   * Array attributes are also used to set option IDs and aria-setsize attributes.
+   *
+   * @param {HTMLOptionElement} option - Option element from select array
+   */
+  const buildOptionsArray = option => {
+    if (disableFiltering || isPristine) {
+      options.push(option);
+      return;
+    }
+    const matchStartsWith = option.text.toLowerCase().startsWith(inputValue);
+    if (matchStartsWith) {
+      optionsStartsWith.push(option);
+    } else {
+      optionsContains.push(option);
+    }
+    options = [...optionsStartsWith, ...optionsContains];
+  };
+
+  /**
+   * Compares option text to query using generated regex filter.
+   *
+   * @param {HTMLOptionElement} option
+   * @returns {boolean} - True when option text matches user input query.
+   */
+  const optionMatchesQuery = option => regex.test(option.text);
+
+  /**
+   * Logic check to determine if options array needs to be updated.
+   *
+   * @param {HTMLOptionElement} option
+   * @returns {boolean} - True when option has value && if filtering is disabled, combo box has an active selection,
+   * there is no inputValue, or if option matches user query
+   */
+  const arrayNeedsUpdate = option => option.value && (disableFiltering || isPristine || !inputValue || optionMatchesQuery(option));
+
+  /**
+   * Checks if firstFoundId should be assigned, which is then used to set itemToFocus.
+   *
+   * @param {HTMLOptionElement} option
+   * @return {boolean} - Returns true if filtering is disabled, no firstFoundId is assigned, and the option matches the query.
+   */
+  const isFirstMatch = option => disableFiltering && !firstFoundId && optionMatchesQuery(option);
+
+  /**
+   * Checks if isCurrentSelection should be assigned, which is then used to set itemToFocus.
+   *
+   * @param {HTMLOptionElement} option
+   * @returns {boolean} - Returns true if option.value matches selectEl.value.
+   */
+  const isCurrentSelection = option => selectEl.value && option.value === selectEl.value;
+
+  /**
+   * Update the array of options that should be displayed on the page.
+   * Assign an ID to each displayed option.
+   * Identify and assign the option that should receive focus.
+   */
+  optionList.forEach(option => {
+    if (arrayNeedsUpdate(option)) {
+      buildOptionsArray(option);
+      const optionId = `${listOptionBaseId}${options.indexOf(option)}`;
+      if (isFirstMatch(option)) {
         firstFoundId = optionId;
       }
-      options.push(optionEl);
+      if (isCurrentSelection(option)) {
+        selectedItemId = optionId;
+      }
     }
-  }
+  });
   const numOptions = options.length;
   const optionHtml = options.map((option, index) => {
     const optionId = `${listOptionBaseId}${index}`;
@@ -2893,14 +2961,14 @@ function toggleModal(event) {
     body
   } = document;
   const safeActive = !isActive();
-  const modalId = clickedElement ? clickedElement.getAttribute("aria-controls") : document.querySelector(`.${WRAPPER_CLASSNAME}.is-visible`);
-  const targetModal = safeActive ? document.getElementById(modalId) : document.querySelector(`.${WRAPPER_CLASSNAME}.is-visible`);
+  const modalId = clickedElement ? clickedElement.getAttribute("aria-controls") : document.querySelector(`.${WRAPPER_CLASSNAME}.${VISIBLE_CLASS}`);
+  const targetModal = safeActive ? document.getElementById(modalId) : document.querySelector(`.${WRAPPER_CLASSNAME}.${VISIBLE_CLASS}`);
 
   // if there is no modal we return early
   if (!targetModal) {
     return false;
   }
-  const openFocusEl = targetModal.querySelector(INITIAL_FOCUS) ? targetModal.querySelector(INITIAL_FOCUS) : targetModal.querySelector(MODAL);
+  const openFocusEl = targetModal.querySelector(INITIAL_FOCUS) ? targetModal.querySelector(INITIAL_FOCUS) : targetModal.querySelector(`.${MODAL_CLASSNAME}`);
   const returnFocus = document.getElementById(targetModal.getAttribute("data-opener"));
   const menuButton = body.querySelector(OPENERS);
   const forceUserAction = targetModal.getAttribute(FORCE_ACTION_ATTRIBUTE);
@@ -3204,7 +3272,6 @@ module.exports = (htmlDocument = document) => htmlDocument.activeElement;
 },{}],7:[function(require,module,exports){
 "use strict";
 
-const assign = require("object-assign");
 const Behavior = require("receptor/behavior");
 
 /**
@@ -3228,15 +3295,15 @@ const sequence = (...seq) => function callHooks(target = document.body) {
  * @param {object?} props
  * @return {receptor.behavior}
  */
-module.exports = (events, props) => Behavior(events, assign({
+module.exports = (events, props) => Behavior(events, {
   on: sequence("init", "add"),
-  off: sequence("teardown", "remove")
-}, props));
+  off: sequence("teardown", "remove"),
+  ...props
+});
 
-},{"object-assign":16,"receptor/behavior":17}],8:[function(require,module,exports){
+},{"receptor/behavior":17}],8:[function(require,module,exports){
 "use strict";
 
-const assign = require("object-assign");
 const {
   keymap
 } = require("receptor");
@@ -3289,10 +3356,11 @@ module.exports = (context, additionalKeyBindings = {}) => {
   //  TODO: In the future, loop over additional keybindings and pass an array
   // of functions, if necessary, to the map keys. Then people implementing
   // the focus trap could pass callbacks to fire when tabbing
-  const keyMappings = keymap(assign({
+  const keyMappings = keymap({
     Tab: tabEventHandler.tabAhead,
-    "Shift+Tab": tabEventHandler.tabBack
-  }, additionalKeyBindings));
+    "Shift+Tab": tabEventHandler.tabBack,
+    ...additionalKeyBindings
+  });
   const focusTrap = behavior({
     keydown: keyMappings
   }, {
@@ -3314,7 +3382,7 @@ module.exports = (context, additionalKeyBindings = {}) => {
   return focusTrap;
 };
 
-},{"./active-element":6,"./behavior":7,"./select":13,"object-assign":16,"receptor":22}],9:[function(require,module,exports){
+},{"./active-element":6,"./behavior":7,"./select":13,"receptor":22}],9:[function(require,module,exports){
 "use strict";
 
 // iOS detection from: http://stackoverflow.com/a/9039885/177710