decidim-core 0.32.0.rc2 → 0.32.0

data/app/packs/src/decidim/controllers/breadcrumb_truncate/controller.js

@@ -0,0 +1,172 @@
+import { Controller } from "@hotwired/stimulus"
+
+const ELLIPSIS = "..."
+const PREFERRED_MIN_WIDTH = 96
+const ABSOLUTE_MIN_WIDTH = 24
+
+export default class extends Controller {
+  static get targets() {
+    return ["item", "text"]
+  }
+
+  connect() {
+    this.originalTexts = this.textTargets.map((target) => target.textContent.trim())
+    this.refresh = this.refresh.bind(this)
+
+    this.resizeObserver = new ResizeObserver(() => this.refresh())
+    this.resizeObserver.observe(this.element)
+    window.addEventListener("resize", this.refresh)
+
+    this.refresh()
+  }
+
+  disconnect() {
+    this.resizeObserver?.disconnect()
+    window.removeEventListener("resize", this.refresh)
+  }
+
+  refresh() {
+    if (!this.hasTextTarget) {
+      return
+    }
+
+    if (this.hasItemTarget) {
+      this.refreshGroup()
+      return
+    }
+
+    this.truncateItem(this.element, this.textTarget, this.originalTexts[0])
+  }
+
+  refreshGroup() {
+    this.itemTargets.forEach((item, index) => this.resetItem(item, this.textTargets[index], this.originalTexts[index]))
+
+    if (this.element.clientWidth <= 0) {
+      return
+    }
+
+    if (!this.isOverflowing(this.element)) {
+      return
+    }
+
+    const candidates = this.itemTargets.map((item, index) => ({
+      item,
+      text: this.textTargets[index],
+      originalText: this.originalTexts[index],
+      width: item.scrollWidth
+    })).sort((left, right) => right.width - left.width)
+
+    candidates.forEach((candidate) => {
+      if (!this.isOverflowing(this.element)) {
+        return
+      }
+
+      this.shrinkCandidate(candidate, PREFERRED_MIN_WIDTH)
+
+      if (this.isOverflowing(this.element)) {
+        this.shrinkCandidate(candidate, ABSOLUTE_MIN_WIDTH)
+      }
+    })
+  }
+
+  shrinkCandidate(candidate, minimumWidth) {
+    const overflow = this.element.scrollWidth - this.element.clientWidth
+
+    if (overflow <= 0) {
+      return
+    }
+
+    const minWidth = Math.min(candidate.width, minimumWidth)
+    const shrinkableWidth = candidate.width - minWidth
+
+    if (shrinkableWidth <= 0) {
+      return
+    }
+
+    const reduction = Math.min(overflow, shrinkableWidth)
+    const nextWidth = candidate.width - reduction
+
+    candidate.item.style.flex = `0 1 ${nextWidth}px`
+    candidate.item.style.maxWidth = `${nextWidth}px`
+    candidate.item.style.minWidth = "0"
+
+    this.truncateItem(candidate.item, candidate.text, candidate.originalText)
+    candidate.width = nextWidth
+  }
+
+  resetItem(item, text, originalText) {
+    item.style.removeProperty("flex")
+    item.style.removeProperty("max-width")
+    item.style.removeProperty("min-width")
+    item.removeAttribute("title")
+    text.textContent = originalText
+  }
+
+  truncateItem(item, text, originalText) {
+    if (item.clientWidth <= 0) {
+      return
+    }
+
+    text.textContent = originalText
+
+    if (!this.isOverflowing(item)) {
+      item.removeAttribute("title")
+      return
+    }
+
+    const words = originalText.split(/\s+/).filter(Boolean)
+    let visibleText = ""
+
+    for (let index = 0; index < words.length; index += 1) {
+      let nextText = words[index]
+
+      if (visibleText) {
+        nextText = `${visibleText} ${words[index]}`
+      }
+
+      text.textContent = `${nextText}${ELLIPSIS}`
+
+      if (this.isOverflowing(item)) {
+        break
+      }
+
+      visibleText = nextText
+    }
+
+    if (!visibleText) {
+      visibleText = this.truncateSingleWord(item, text, words[0] || "")
+    }
+
+    if (visibleText === originalText) {
+      text.textContent = visibleText
+    } else {
+      text.textContent = `${visibleText}${ELLIPSIS}`
+    }
+
+    item.setAttribute("title", originalText)
+  }
+
+  truncateSingleWord(item, text, word) {
+    let visibleText = ""
+
+    for (let index = 0; index < word.length; index += 1) {
+      text.textContent = `${visibleText}${word[index]}${ELLIPSIS}`
+
+      if (this.isOverflowing(item)) {
+        break
+      }
+
+      visibleText += word[index]
+    }
+
+    if (!visibleText && word) {
+      return word[0]
+    }
+
+    return visibleText
+  }
+
+  isOverflowing(element) {
+    return element.scrollWidth > element.clientWidth
+  }
+}

data/app/packs/src/decidim/controllers/form_validator/form_validator.js

@@ -419,13 +419,13 @@ class FormValidator {
       return true;
     }
 
-    checkboxGroup.forEach((checkboxElement) => {
-      if (isValid) {
-        this.removeInputErrorClasses(checkboxElement);
-      } else {
+    if (isValid) {
+      this.removeCheckboxGroupErrorClasses(groupName);
+    } else {
+      checkboxGroup.forEach((checkboxElement) => {
         this.addInputErrorClasses(checkboxElement, ["required"]);
-      }
-    });
+      });
+    }
 
     return isValid;
   }

data/app/packs/src/decidim/controllers/form_validator/form_validator.test.js

@@ -1,4 +1,4 @@
-/* eslint max-lines: ["error", 690] */
+/* eslint max-lines: ["error", 712] */
 /* global jest */
 /**
  * @jest-environment jsdom
@@ -253,6 +253,28 @@ describe("FormValidator", () => {
       const isValidTwo = validatorInstance.validateCheckboxGroup("multiCheckboxes");
       expect(isValidTwo).toBe(true);
     });
+
+    it("should remove error classes once for the group, not per checkbox", () => {
+      formElement.innerHTML = `
+        <fieldset>
+          <input type="checkbox" id="cb-1" name="largeGroup" value="1" required>
+          <input type="checkbox" id="cb-2" name="largeGroup" value="2" required>
+          <input type="checkbox" id="cb-3" name="largeGroup" value="3" required>
+        </fieldset>
+        <button type="submit">Submit</button>
+      `;
+      validatorInstance = new FormValidator(formElement);
+      formElement.querySelector("#cb-1").checked = true;
+
+      const removeGroupSpy = jest.spyOn(validatorInstance, "removeCheckboxGroupErrorClasses");
+      const removeInputSpy = jest.spyOn(validatorInstance, "removeInputErrorClasses");
+
+      const isValid = validatorInstance.validateCheckboxGroup("largeGroup");
+
+      expect(isValid).toBe(true);
+      expect(removeGroupSpy).toHaveBeenCalledTimes(1);
+      expect(removeInputSpy).not.toHaveBeenCalled();
+    });
   });
 
   describe("Custom Validators", () => {

data/app/packs/src/decidim/controllers/main_menu/controller.js

@@ -2,6 +2,14 @@ import { Controller } from "@hotwired/stimulus"
 
 const OPEN_DELAY_MS = 50
 
+const FOCUSABLE_SELECTORS = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex='-1'])"
+
+const getFocusableElements = (container) => {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTORS)).filter(
+    (el) => el.offsetParent !== null
+  );
+}
+
 /**
  * Main menu dropdown controller and traps page scroll while the menu is open.
  *
@@ -24,6 +32,7 @@ export default class extends Controller {
     this.handleButtonClick = this.handleButtonClick.bind(this)
     this.handleKeydown = this.handleKeydown.bind(this)
     this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this)
+    this.focusTrapHandler = this.focusTrapHandler.bind(this)
 
     this.menuButton.addEventListener("click", this.handleButtonClick)
     this.menuContainer.addEventListener("click", this.handleContainerClick)
@@ -96,6 +105,23 @@ export default class extends Controller {
     return this.menuContainer.getAttribute("aria-hidden") === "true"
   }
 
+  focusTrapHandler(event) {
+    if (event.key !== "Tab") {
+      return;
+    }
+    const focusable = getFocusableElements(this.menuContainer);
+    if (focusable.length === 0) {
+      return;
+    }
+    if (event.shiftKey && document.activeElement === focusable[0]) {
+      event.preventDefault();
+      focusable[focusable.length - 1].focus({ preventScroll: true });
+    } else if (!event.shiftKey && document.activeElement === focusable[focusable.length - 1]) {
+      event.preventDefault();
+      focusable[0].focus({ preventScroll: true });
+    }
+  }
+
   openMenu() {
     if (typeof this.previousBodyOverflow === "undefined") {
       this.previousBodyOverflow = document.body.style.overflow;
@@ -104,9 +130,16 @@ export default class extends Controller {
     this.element.setAttribute("aria-expanded", "true")
     this.menuContainer.setAttribute("aria-hidden", "false")
     this.menuContainer.setAttribute("aria-modal", "true")
+    this.menuContainer.addEventListener("keydown", this.focusTrapHandler)
+
+    const focusable = getFocusableElements(this.menuContainer);
+    if (focusable.length > 0) {
+      focusable[0].focus({ preventScroll: true });
+    }
   }
 
   closeMenu() {
+    this.menuContainer.removeEventListener("keydown", this.focusTrapHandler)
     document.body.style.overflow = this.previousBodyOverflow ?? ""
     this.element.setAttribute("aria-expanded", "false")
     this.menuContainer.setAttribute("aria-hidden", "true")

data/app/packs/src/decidim/controllers/main_menu/main_menu.test.js

@@ -20,6 +20,8 @@ describe("MainMenuController", () => {
         Menu
       </button>
       <div id="main-menu-container" aria-hidden="true">
+        <a href="/link">Link</a>
+        <button>Action</button>
         <div id="main-menu-item"></div>
       </div>
       <button id="main-menu-close">Close</button>
@@ -165,6 +167,81 @@ describe("MainMenuController", () => {
     })
   })
 
+  describe("focusTrapHandler", () => {
+    beforeEach(() => {
+      jest.spyOn(HTMLElement.prototype, "offsetParent", "get").mockReturnValue(menuContainer)
+      controller.openMenu()
+    })
+
+    afterEach(() => {
+      controller.closeMenu()
+    })
+
+    it("focuses the first focusable element when menu opens", () => {
+      const focusable = menuContainer.querySelectorAll("a[href], button:not([disabled])")
+      const firstEl = focusable[0]
+      expect(document.activeElement).toBe(firstEl)
+    })
+
+    it("cycles focus to first element when Tab is pressed on last focusable element", () => {
+      const focusable = menuContainer.querySelectorAll("a[href], button:not([disabled])")
+      expect(focusable.length).toBeGreaterThan(1)
+      const lastEl = focusable[focusable.length - 1]
+      const firstEl = focusable[0]
+
+      lastEl.focus()
+      const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true })
+      jest.spyOn(event, "preventDefault")
+      jest.spyOn(firstEl, "focus")
+
+      menuContainer.dispatchEvent(event)
+
+      expect(event.preventDefault).toHaveBeenCalled()
+      expect(firstEl.focus).toHaveBeenCalledWith({ preventScroll: true })
+    })
+
+    it("cycles focus to last element when Shift+Tab is pressed on first focusable element", () => {
+      const focusable = menuContainer.querySelectorAll("a[href], button:not([disabled])")
+      expect(focusable.length).toBeGreaterThan(1)
+      const firstEl = focusable[0]
+      const lastEl = focusable[focusable.length - 1]
+
+      firstEl.focus()
+      const event = new KeyboardEvent("keydown", { key: "Tab", shiftKey: true, bubbles: true })
+      jest.spyOn(event, "preventDefault")
+      jest.spyOn(lastEl, "focus")
+
+      menuContainer.dispatchEvent(event)
+
+      expect(event.preventDefault).toHaveBeenCalled()
+      expect(lastEl.focus).toHaveBeenCalledWith({ preventScroll: true })
+    })
+
+    it("does nothing when a non-Tab key is pressed", () => {
+      const event = new KeyboardEvent("keydown", { key: "Enter", bubbles: true })
+      jest.spyOn(event, "preventDefault")
+
+      menuContainer.dispatchEvent(event)
+
+      expect(event.preventDefault).not.toHaveBeenCalled()
+    })
+
+    it("does nothing when there are no focusable elements", () => {
+      controller.closeMenu()
+      menuContainer.innerHTML = ""
+      controller.openMenu()
+
+      const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true })
+      expect(() => menuContainer.dispatchEvent(event)).not.toThrow()
+    })
+
+    it("removes the keydown handler when menu is closed", () => {
+      const spy = jest.spyOn(menuContainer, "removeEventListener")
+      controller.closeMenu()
+      expect(spy).toHaveBeenCalledWith("keydown", controller.focusTrapHandler)
+    })
+  })
+
   describe("disconnect", () => {
     it("removes listeners and closes the menu if open", () => {
       const buttonSpy = jest.spyOn(menuButton, "removeEventListener")