decidim-core 0.26.5 → 0.27.0.rc1

data/app/packs/src/decidim/form_filter.component.test.js

@@ -1,4 +1,4 @@
-/* global spyOn, jest */
+/* global spyOn */
 /* eslint-disable id-length */
 window.$ = $;
 
@@ -7,20 +7,6 @@ import DataPicker from "./data_picker"
 
 const FormFilterComponent = require("./form_filter.component_for_testing.js");
 
-const expectedPushState = (state, filters) => {
-  const queryString = Object.keys(filters).map((key) => {
-    const name = `filter[${key}]`;
-    const val = filters[key];
-    if (Array.isArray(val)) {
-      return val.map((v) => `${encodeURIComponent(`${name}[]`)}=${encodeURIComponent(v)}`).join("&");
-    }
-
-    return `${encodeURIComponent(name)}=${encodeURIComponent(val)}`;
-  }).join("&");
-
-  return [state, null, `/filters?${queryString}`];
-}
-
 describe("FormFilterComponent", () => {
   const selector = "form#new_filter";
   let subject = null;
@@ -29,10 +15,6 @@ describe("FormFilterComponent", () => {
   beforeEach(() => {
     let form = `
       <form id="new_filter" action="/filters" method="get">
-        <fieldset>
-          <input id="filter_search_text_cont" placeholder="Search" data-disable-dynamic-change="true" type="search" name="filter[search_text_cont]">
-        </fieldset>
-
         <fieldset>
           <div id="filter_somerandomid_scope_id" class="data-picker picker-multiple" data-picker-name="filter[scope_id]">
             <div class="picker-values">
@@ -85,25 +67,11 @@ describe("FormFilterComponent", () => {
     `;
     $("body").append(form);
 
-    const $form = $(document).find("form");
-
     window.Decidim = window.Decidim || {};
 
     window.theDataPicker = new DataPicker($(".data-picker"));
     window.theCheckBoxesTree = new CheckBoxesTree();
-    window.Rails = {
-      fire: (htmlElement, event) => {
-        // Hack to call trigger on the correct instance of the form, as fetching
-        // with the selector does not work.
-        if (htmlElement === $form[0]) {
-          $form.trigger(event);
-        }
-      }
-    };
-
-    subject = new FormFilterComponent($form);
-
-    jest.useFakeTimers();
+    subject = new FormFilterComponent($(document).find("form"));
   });
 
   it("exists", () => {
@@ -120,19 +88,7 @@ describe("FormFilterComponent", () => {
 
   describe("when mounted", () => {
     beforeEach(() => {
-      // Jest doesn't implement listening on the form submit event so we need
-      // to hack it.
-      const originalOn = subject.$form.on.bind(subject.$form);
-      jest.spyOn(subject.$form, "on").mockImplementation((...args) => {
-        if (args[0] === "submit") {
-          subject.$form.submitHandler = args[1];
-        } else if (args[0] === "change" && typeof args[1] === "string") {
-          subject.$form.changeHandler = args[2];
-        } else {
-          originalOn(...args);
-        }
-      });
-
+      spyOn(subject.$form, "on");
       subject.mountComponent();
     });
 
@@ -144,98 +100,8 @@ describe("FormFilterComponent", () => {
       expect(subject.mounted).toBeTruthy();
     });
 
-    it("binds the form change and submit events", () => {
+    it("binds the form change event", () => {
       expect(subject.$form.on).toHaveBeenCalledWith("change", "input:not([data-disable-dynamic-change]), select:not([data-disable-dynamic-change])", subject._onFormChange);
-      expect(subject.$form.on).toHaveBeenCalledWith("submit", subject._onFormSubmit);
-    });
-
-    describe("form changes", () => {
-      beforeEach(() => {
-        spyOn(window.history, "pushState");
-
-        // This is a hack to be able to trigger the events even somewhat close
-        // to an actual situation. In real browser environment the change events
-        // would be triggered by the input/select elements but to simplify the
-        // test implementation, we trigger them directly on the form.
-        const originalTrigger = subject.$form.trigger.bind(subject.$form);
-        jest.spyOn(subject.$form, "trigger").mockImplementation((...args) => {
-          if (args[0] === "submit") {
-            subject.$form.submitHandler(
-              $.event.fix(new CustomEvent("submit", { bubbles: true, cancelable: true }))
-            );
-          } else if (args[0] === "change") {
-            subject.$form.changeHandler();
-          } else {
-            originalTrigger(...args);
-          }
-
-          jest.runAllTimers();
-        });
-      });
-
-      it("does not save the state in case there were no changes to previous state", () => {
-        subject.$form.trigger("change");
-
-        expect(window.history.pushState).not.toHaveBeenCalled();
-      });
-
-      it("saves the state after dynamic form changes", () => {
-        $("#filter_somerandomid_category_id").val(2);
-
-        subject.$form.trigger("change");
-
-        const state = {
-          "filter_somerandomid_scope_id": [
-            {
-              "text": "Scope 1",
-              "url": "picker_url_1",
-              "value": "3"
-            },
-            {
-              "text": "Scope 2",
-              "url": "picker_url_2",
-              "value": "4"
-            }
-          ]
-        };
-        const filters = {
-          "search_text_cont": "",
-          "scope_id": [3, 4],
-          "category_id": 2,
-          "state": [""]
-        };
-        expect(window.history.pushState).toHaveBeenCalledWith(...expectedPushState(state, filters));
-      });
-
-      it("saves the state after form submission through input element", () => {
-        const textInput = document.getElementById("filter_search_text_cont");
-        textInput.value = "search";
-
-        subject.$form.trigger("submit");
-
-        const state = {
-          "filter_somerandomid_scope_id": [
-            {
-              "text": "Scope 1",
-              "url": "picker_url_1",
-              "value": "3"
-            },
-            {
-              "text": "Scope 2",
-              "url": "picker_url_2",
-              "value": "4"
-            }
-          ]
-        }
-        const filters = {
-          "search_text_cont": "search",
-          "scope_id": [3, 4],
-          "category_id": 1,
-          "state": [""]
-        }
-
-        expect(window.history.pushState).toHaveBeenCalledWith(...expectedPushState(state, filters));
-      });
     });
 
     describe("onpopstate event", () => {
@@ -265,14 +131,6 @@ describe("FormFilterComponent", () => {
         expect(checked.map((input) => input.value)).toEqual(["", "accepted", "evaluating"]);
         expect(checked.filter((input) => input.indeterminate).map((input) => input.value)).toEqual([""]);
       });
-
-      it("does not save the state", () => {
-        spyOn(window.history, "pushState");
-
-        window.onpopstate({ isTrusted: true, state: scopesPickerState});
-
-        expect(window.history.pushState).not.toHaveBeenCalled();
-      });
     });
   });
 
@@ -287,9 +145,8 @@ describe("FormFilterComponent", () => {
       expect(subject.mounted).toBeFalsy();
     });
 
-    it("unbinds the form change and submit events", () => {
+    it("unbinds the form change event", () => {
       expect(subject.$form.off).toHaveBeenCalledWith("change", "input, select", subject._onFormChange);
-      expect(subject.$form.off).toHaveBeenCalledWith("submit", subject._onFormSubmit);
     });
   });
 

data/app/packs/src/decidim/form_filter.js

@@ -23,7 +23,6 @@ export default class FormFilterComponent {
 
     this._updateInitialState();
     this._onFormChange = delayed(this, this._onFormChange.bind(this));
-    this._onFormSubmit = delayed(this, this._onFormSubmit.bind(this));
     this._onPopState = this._onPopState.bind(this);
 
     if (window.Decidim.PopStateHandler) {
@@ -43,7 +42,6 @@ export default class FormFilterComponent {
     if (this.mounted) {
       this.mounted = false;
       this.$form.off("change", "input, select", this._onFormChange);
-      this.$form.off("submit", this._onFormSubmit);
 
       unregisterCallback(`filters-${this.id}`)
     }
@@ -64,7 +62,6 @@ export default class FormFilterComponent {
         contentContainer = this.$form.data("remoteFill");
       }
       this.$form.on("change", "input:not([data-disable-dynamic-change]), select:not([data-disable-dynamic-change])", this._onFormChange);
-      this.$form.on("submit", this._onFormSubmit);
 
       this.currentFormRequest = null;
       this.$form.on("ajax:beforeSend", (e) => {
@@ -257,16 +254,14 @@ export default class FormFilterComponent {
 
     // Only one instance should submit the form on browser history navigation
     if (this.popStateSubmiter) {
-      Rails.fire(this.$form[0], "submit", { from: "pop" });
+      Rails.fire(this.$form[0], "submit");
     }
 
     this.changeEvents = true;
   }
 
   /**
-   * Handles the logic to decide whether the form should be submitted or not
-   * after a form change event. The form is only submitted when changes have
-   * occurred.
+   * Handles the logic to update the current location after a form change event.
    * @private
    * @returns {Void} - Returns nothing.
    */
@@ -275,7 +270,7 @@ export default class FormFilterComponent {
       return;
     }
 
-    const [newPath] = this._currentStateAndPath();
+    const [newPath, newState] = this._currentStateAndPath();
     const path = this._getLocation(false);
 
     if (newPath === path) {
@@ -283,23 +278,6 @@ export default class FormFilterComponent {
     }
 
     Rails.fire(this.$form[0], "submit");
-  }
-
-  /**
-   * Saves the current state of the search on form submit to update the search
-   * parameters to the URL and store the picker states.
-   * @private
-   * @param {jQuery.Event} ev The event that caused the form to submit.
-   * @returns {Void} - Returns nothing.
-   */
-  _onFormSubmit(ev) {
-    const eventDetail = ev.originalEvent.detail;
-    if (eventDetail && eventDetail.from === "pop") {
-      return;
-    }
-
-    const [newPath, newState] = this._currentStateAndPath();
-
     pushState(newPath, newState);
     this._saveFilters(newPath);
   }
@@ -336,7 +314,7 @@ export default class FormFilterComponent {
    * @returns {String} - Returns a unique identifier
    */
   _getUID() {
-    return `filter-form-${new Date().getUTCMilliseconds()}-${Math.floor(Math.random() * 10000000)}`;
+    return `filter-form-${new Date().setUTCMilliseconds()}-${Math.floor(Math.random() * 10000000)}`;
   }
 
   /**

data/app/packs/src/decidim/geocoding.js

@@ -1,43 +1,20 @@
-import Tribute from "src/decidim/vendor/tribute"
+import AutoComplete from "src/decidim/autocomplete";
 
 $(() => {
   $("[data-decidim-geocoding]").each((_i, el) => {
     const $input = $(el);
-    const $fieldContainer = $input.parent();
 
-    $fieldContainer.addClass("has-tribute");
-
-    const tribute = new Tribute(
-      {
-        autocompleteMode: true,
-        // autocompleteSeparator: / \+ /, // See below, requires Tribute update
-        allowSpaces: true,
-        positionMenu: false,
-        replaceTextSuffix: "",
-        menuContainer: $fieldContainer.get(0),
-        noMatchTemplate: null,
-        values: (text, cb) => {
-          $input.trigger("geocoder-suggest.decidim", [text, cb]);
-        }
+    const autoComplete = new AutoComplete(el, {
+      mode: "single",
+      dataMatchKeys: ["value"],
+      dataSource: (query, callback) => {
+        $input.trigger("geocoder-suggest.decidim", [query, callback]);
       }
-    );
-
-    // Port https://github.com/zurb/tribute/pull/406
-    // This changes the autocomplete separator from space to " + " so that
-    // we can do searches such as "streetname 4" including a space. Otherwise
-    // this would do two separate searches for "streetname" and "4".
-    tribute.range.getLastWordInText = (text) => {
-      const final = text.replace(/\u00A0/g, " ");
-      const wordsArray = final.split(/ \+ /);
-      const worldsCount = wordsArray.length - 1;
-
-      return wordsArray[worldsCount].trim();
-    };
-
-    tribute.attach($input.get(0));
+    });
+    el.addEventListener("selection", autoComplete);
 
-    $input.on("tribute-replaced", function(ev) {
-      const selectedItem = ev.detail.item.original;
+    $input.on("selection", (event) => {
+      const selectedItem = event.detail.selection.value;
       $input.trigger("geocoder-suggest-select.decidim", [selectedItem]);
 
       // Not all geocoding autocomplete APIs include the coordinates in the
@@ -48,7 +25,5 @@ $(() => {
         $input.trigger("geocoder-suggest-coordinates.decidim", [selectedItem.coordinates]);
       }
     });
-
-    $input.data("geocoder-tribute", tribute);
   });
 });

data/app/packs/src/decidim/identity_selector_dialog.js

@@ -1,6 +1,6 @@
 /**
  * Makes the #select-identity-button to open a popup for the user to
- * select with which identity he wants to perform an action.
+ * select with which identity they want to perform an action.
  *
  */
 $(() => {

data/app/packs/src/decidim/impersonation.js

@@ -1,11 +1,11 @@
-import moment from "moment"
+import dayjs from "dayjs"
 
 $(() => {
   const $impersonationWarning = $(".impersonation-warning");
   if ($impersonationWarning.length) {
-    const endsAt = moment($impersonationWarning.data("session-ends-at"));
+    const endsAt = dayjs($impersonationWarning.data("session-ends-at"));
     const exitInterval = setInterval(() => {
-      const diff = (endsAt - moment()) / 60000;
+      const diff = (endsAt - dayjs()) / 60000;
       const diffInMinutes = Math.round(diff);
       $impersonationWarning.find(".minutes").html(diffInMinutes);
 

data/app/packs/src/decidim/input_character_counter.js

@@ -1,4 +1,14 @@
 const COUNT_KEY = "%count%";
+// How often SR announces the message in relation to maximum characters. E.g.
+// if max characters is 1000, screen reader announces the remaining characters
+// every 100 (= 0.1 * 1000) characters. This will be "floored" to the closest
+// 100 if the maximum characters > 100. E.g. if max characters is 5500, the
+// threshold is 500 (= Math.floor(550 / 100) * 100). With 100 or less
+// characters, this ratio is omitted and the announce threshold is always set to
+// 10.
+const SR_ANNOUNCE_THRESHOLD_RATIO = 0.1;
+// The number of characters left after which every keystroke will be announced.
+const SR_ANNOUNCE_EVERY_THRESHOLD = 10;
 const DEFAULT_MESSAGES = {
   charactersAtLeast: {
     one: `at least ${COUNT_KEY} character`,
@@ -21,15 +31,35 @@ export default class InputCharacterCounter {
     this.$target = $(this.$input.data("remaining-characters"));
     this.minCharacters = parseInt(this.$input.attr("minlength"), 10);
     this.maxCharacters = parseInt(this.$input.attr("maxlength"), 10);
+    this.describeByCounter = typeof this.$input.attr("aria-describedby") === "undefined";
 
-    if (this.$target.length < 1) {
-      let targetId = null;
+    // Define the closest length for the input "gaps" defined by the threshold.
+    if (this.maxCharacters > 10) {
+      if (this.maxCharacters > 100) {
+        this.announceThreshold = Math.floor(this.maxCharacters * SR_ANNOUNCE_THRESHOLD_RATIO / 100) * 100;
+      } else {
+        this.announceThreshold = 10;
+      }
+
+      // The number of characters left after which every keystroke will be announced.
+      this.announceEveryThreshold = SR_ANNOUNCE_EVERY_THRESHOLD;
+    } else {
+      this.announceThreshold = 1;
+      this.announceEveryThreshold = 1;
+    }
+
+    let targetId = this.$target.attr("id");
+    if (typeof targetId === "undefined") {
       if (this.$input.attr("id") && this.$input.attr("id").length > 0) {
         targetId = `${this.$input.attr("id")}_characters`;
       } else {
         targetId = `characters_${Math.random().toString(36).substr(2, 9)}`;
       }
+    }
 
+    if (this.$target.length > 0) {
+      this.$target.attr("id", targetId)
+    } else {
       this.$target = $(`<span id="${targetId}" class="form-input-extra-before" />`)
 
       // If input is a hidden for WYSIWYG editor add it at the end
@@ -48,11 +78,35 @@ export default class InputCharacterCounter {
       }
     }
 
+    this.updateInputLength();
+    this.previousInputLength = this.inputLength;
+
     if (this.$target.length > 0 && (this.maxCharacters > 0 || this.minCharacters > 0)) {
+      // Create the screen reader target element. We don't want to constantly
+      // announce every change to screen reader, only occasionally.
+      this.$srTarget = $(
+        `<span role="status" id="${targetId}_sr" class="show-for-sr remaining-character-count-sr" />`
+      );
+      this.$target.before(this.$srTarget);
+      this.$target.attr("aria-hidden", "true");
+      this.setDescribedBy(true);
+
       this.bindEvents();
     }
   }
 
+  setDescribedBy(active) {
+    if (!this.describeByCounter) {
+      return;
+    }
+
+    if (active) {
+      this.$input.attr("aria-describedby", this.$srTarget.attr("id"));
+    } else {
+      this.$input.removeAttr("aria-describedby");
+    }
+  }
+
   bindEvents() {
     // In WYSIWYG editors (Quill) we need to find the active editor from the
     // DOM node. Quill has the experimental "find" method that should work
@@ -69,17 +123,109 @@ export default class InputCharacterCounter {
     this.$input.on("keyup", () => {
       this.updateStatus();
     });
+    this.$input.on("input", () => {
+      this.updateInputLength();
+      this.checkScreenReaderUpdate();
+      // If the input is "described by" the character counter, some screen
+      // readers (NVDA) announce the status twice when it is updated. By
+      // removing the aria-describedby attribute while the user is typing makes
+      // the screen reader announce the status only once.
+      this.setDescribedBy(false);
+    });
+    this.$input.on("focus", () => {
+      this.updateScreenReaderStatus();
+    });
+    this.$input.on("blur", () => {
+      this.updateScreenReaderStatus();
+      this.setDescribedBy(true);
+    });
     if (this.$input.get(0) !== null) {
       this.$input.get(0).addEventListener("emoji.added", () => {
         this.updateStatus();
       });
     }
     this.updateStatus();
+    this.updateScreenReaderStatus();
   }
 
-  updateStatus() {
-    const numCharacters = this.$input.val().length;
+  getInputLength() {
+    return this.inputLength;
+  }
+
+  updateInputLength() {
+    this.previousInputLength = this.inputLength;
+    this.inputLength = this.$input.val().length;
+  }
+
+  /**
+   * This compares the current inputLength to the previous value and decides
+   * whether the user is currently adding or deleting characters from the view.
+   *
+   * @returns {String} The input direction either "ins" for insert or "del" for
+   *   delete.
+   */
+  getInputDirection() {
+    if (this.inputLength < this.previousInputLength) {
+      return "del";
+    }
+
+    return "ins";
+  }
+
+  getScreenReaderLength() {
+    const currentLength = this.getInputLength();
+    if (this.maxCharacters < 10) {
+      return currentLength;
+    } else if (this.maxCharacters - currentLength <= this.announceEveryThreshold) {
+      return currentLength;
+    }
+
+    const srLength = currentLength - currentLength % this.announceThreshold;
+
+    // Prevent the screen reader telling too many characters left if the user
+    // deletes a characters. This can cause confusing experience e.g. when the
+    // user is closing the maximum amount of characters, so if the previous
+    // announcement was "10 characters left" and the user removes one character,
+    // the screen reader would announce "100 characters left" next time (when
+    // they actually have only 11 characters left). Similar when they are
+    // deleting a character at 900 characters, the screen reader would announce
+    // "1000 characters left" even when they only have 901 characters left.
+    if (this.getInputDirection() === "del") {
+      // The first branch makes sure that if the SR length matches the actual
+      // length, it will be always announced.
+      if (srLength === currentLength) {
+        return srLength;
+      // The second branch checks that if we are at the final threshold, we
+      // should not announce "0 characters left" when the user deletes more than
+      // the "announce after every stroke" limit (this.announceEveryThreshold).
+      } else if (this.maxCharacters - srLength === this.announceThreshold) {
+        return this.announcedAt || currentLength;
+      // The third branch checks that when deleting characters, we should
+      // announce the next threshold to get accurate annoucement. E.g. when we
+      // have 750 characters left and the user deletes 100 characters at once,
+      // we should announce "700 characters left" after that deletion.
+      } else if (srLength < currentLength) {
+        return srLength + this.announceThreshold;
+      }
+    // This fixes an issue in the following situation:
+    // 1. 750 characters left
+    // 2. Delete 100 characters in a row
+    // 3. SR: "800 characters left" (actual 850)
+    // 4. Type one additional character
+    // 5. Without this, SR would announce "900 characters left" = confusing
+    } else if (srLength < this.announcedAt) {
+      return this.announcedAt;
+    }
+
+    return srLength;
+  }
+
+  getMessages(currentLength = null) {
     const showMessages = [];
+    let inputLength = currentLength;
+    if (inputLength === null) {
+      inputLength = this.getInputLength()
+    }
 
     if (this.minCharacters > 0) {
       let message = MESSAGES.charactersAtLeast.other;
@@ -90,7 +236,7 @@ export default class InputCharacterCounter {
     }
 
     if (this.maxCharacters > 0) {
-      const remaining = this.maxCharacters - numCharacters;
+      const remaining = this.maxCharacters - inputLength;
       let message = MESSAGES.charactersLeft.other;
       if (remaining === 1) {
         message = MESSAGES.charactersLeft.one;
@@ -101,12 +247,36 @@ export default class InputCharacterCounter {
       showMessages.push(message.replace(COUNT_KEY, remaining));
     }
 
-    this.$target.text(showMessages.join(", "));
+    return showMessages;
+  }
+
+  updateStatus() {
+    this.$target.text(this.getMessages().join(", "));
+  }
+
+  checkScreenReaderUpdate() {
+    if (this.maxCharacters < 1) {
+      return;
+    }
+
+    const currentLength = this.getScreenReaderLength();
+    if (currentLength === this.announcedAt) {
+      return;
+    }
+
+    this.announcedAt = currentLength;
+    this.updateScreenReaderStatus(currentLength);
+  }
+
+  updateScreenReaderStatus(currentLength = null) {
+    this.$srTarget.text(this.getMessages(currentLength).join(", "));
   }
 }
 
 const createCharacterCounter = ($input) => {
-  $input.data("remaining-characters-counter", new InputCharacterCounter($input));
+  if (typeof $input !== "undefined" && $input.length) {
+    $input.data("remaining-characters-counter", new InputCharacterCounter($input));
+  }
 }
 
 $(() => {