decidim-core 0.31.3 → 0.31.5

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

@@ -0,0 +1,187 @@
+/* global jest */
+/* eslint max-lines: ["error", 400] */
+
+import DropdownController from "src/decidim/controllers/dropdown/controller";
+
+jest.mock("a11y-dropdown-component", () => ({
+  render: jest.fn(),
+  destroy: jest.fn()
+}));
+
+describe("DropdownController", () => {
+  let element = null;
+  let dropdownMenuEl = null;
+  let controller = null;
+
+  const createController = (controllerElement) => {
+    const ControllerClass = DropdownController;
+    const instance = Object.create(ControllerClass.prototype);
+    Reflect.defineProperty(instance, "element", {
+      get: () => controllerElement,
+      configurable: true
+    });
+    return instance;
+  };
+
+  beforeEach(() => {
+    window.matchMedia = jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      addListener: jest.fn(),
+      removeListener: jest.fn()
+    }));
+
+    document.body.innerHTML = `
+      <button
+        id="dropdown-trigger"
+        data-controller="dropdown"
+        data-target="dropdown-menu"
+        data-open-md="true"
+        data-auto-close="true"
+      >
+        Dropdown Trigger
+      </button>
+      <ul id="dropdown-menu" class="dropdown-menu">
+        <li><a href="/link1">Link 1</a></li>
+        <li><a href="/link2">Link 2</a></li>
+        <li><a href="/link3">Link 3</a></li>
+      </ul>
+    `;
+
+    element = document.getElementById("dropdown-trigger");
+    dropdownMenuEl = document.getElementById("dropdown-menu");
+    controller = createController(element);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    Reflect.deleteProperty(window, "matchMedia");
+  });
+
+  describe("removeAriaRoles", () => {
+    it("removes role attribute from dropdown menu", () => {
+      dropdownMenuEl.setAttribute("role", "menu");
+
+      controller.removeAriaRoles();
+
+      expect(dropdownMenuEl.getAttribute("role")).toBeNull();
+    });
+
+    it("removes aria-labelledby attribute from dropdown menu", () => {
+      dropdownMenuEl.setAttribute("aria-labelledby", "trigger");
+
+      controller.removeAriaRoles();
+
+      expect(dropdownMenuEl.getAttribute("aria-labelledby")).toBeNull();
+    });
+
+    it("removes tabindex attribute from dropdown menu", () => {
+      dropdownMenuEl.setAttribute("tabindex", "-1");
+
+      controller.removeAriaRoles();
+
+      expect(dropdownMenuEl.getAttribute("tabindex")).toBeNull();
+    });
+
+    it("removes role from li elements", () => {
+      const li = dropdownMenuEl.querySelector("li");
+      li.setAttribute("role", "none");
+
+      controller.removeAriaRoles();
+
+      expect(li.getAttribute("role")).toBeNull();
+    });
+
+    it("removes role from all li elements", () => {
+      const listItems = dropdownMenuEl.querySelectorAll("li");
+      listItems.forEach((li) => {
+        li.setAttribute("role", "none");
+      });
+
+      controller.removeAriaRoles();
+
+      listItems.forEach((li) => {
+        expect(li.getAttribute("role")).toBeNull();
+      });
+    });
+
+    it("removes role from anchor elements", () => {
+      const anchor = dropdownMenuEl.querySelector("a");
+      anchor.setAttribute("role", "menuitem");
+
+      controller.removeAriaRoles();
+
+      expect(anchor.getAttribute("role")).toBeNull();
+    });
+
+    it("removes tabindex from anchor elements", () => {
+      const anchor = dropdownMenuEl.querySelector("a");
+      anchor.setAttribute("tabindex", "-1");
+
+      controller.removeAriaRoles();
+
+      expect(anchor.getAttribute("tabindex")).toBeNull();
+    });
+
+    it("handles missing dropdown menu gracefully", () => {
+      const mockElement = document.createElement("button");
+      mockElement.dataset.target = "nonexistent-menu";
+      const mockController = createController(mockElement);
+
+      expect(() => {
+        mockController.removeAriaRoles();
+      }).not.toThrow();
+    });
+
+    it("handles elements without the attributes gracefully", () => {
+      expect(() => {
+        controller.removeAriaRoles();
+      }).not.toThrow();
+
+      expect(dropdownMenuEl.getAttribute("role")).toBeNull();
+    });
+  });
+
+  describe("data-add-aria-roles option", () => {
+    it("keeps role menu when data-add-aria-roles is true", () => {
+      element.setAttribute("data-add-aria-roles", "true");
+      dropdownMenuEl.setAttribute("role", "menu");
+      dropdownMenuEl.querySelector("li").setAttribute("role", "none");
+      dropdownMenuEl.querySelector("a").setAttribute("role", "menuitem");
+      const testController = createController(element);
+
+      testController.connect();
+
+      expect(dropdownMenuEl.getAttribute("role")).toBe("menu");
+      expect(dropdownMenuEl.querySelector("li").getAttribute("role")).toBe("none");
+      expect(dropdownMenuEl.querySelector("a").getAttribute("role")).toBe("menuitem");
+    });
+
+    it("keeps role menu when data-add-aria-roles is not set (default)", () => {
+      dropdownMenuEl.setAttribute("role", "menu");
+      dropdownMenuEl.querySelector("li").setAttribute("role", "none");
+      dropdownMenuEl.querySelector("a").setAttribute("role", "menuitem");
+      const testController = createController(element);
+
+      testController.connect();
+
+      expect(dropdownMenuEl.getAttribute("role")).toBe("menu");
+      expect(dropdownMenuEl.querySelector("li").getAttribute("role")).toBe("none");
+      expect(dropdownMenuEl.querySelector("a").getAttribute("role")).toBe("menuitem");
+    });
+
+    it("removes role menu when data-add-aria-roles is false", () => {
+      element.setAttribute("data-add-aria-roles", "false");
+      dropdownMenuEl.setAttribute("role", "menu");
+      dropdownMenuEl.querySelector("li").setAttribute("role", "none");
+      dropdownMenuEl.querySelector("a").setAttribute("role", "menuitem");
+      const testController = createController(element);
+
+      testController.connect();
+
+      expect(dropdownMenuEl.getAttribute("role")).toBeNull();
+      expect(dropdownMenuEl.querySelector("li").getAttribute("role")).toBeNull();
+      expect(dropdownMenuEl.querySelector("a").getAttribute("role")).toBeNull();
+    });
+  });
+});

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

@@ -104,7 +104,7 @@ class FormValidator {
     let announceElement = this.element.querySelector(".sr-announce");
 
     if (announceElement) {
-      announceElement.remove();
+      return;
     }
 
     announceElement = document.createElement("div");
@@ -113,7 +113,7 @@ class FormValidator {
     this.element.prepend(announceElement);
 
     setTimeout(() => {
-      announceElement.textContent = getDictionary("forms.correct_errors");
+      announceElement.textContent = getDictionary("forms").correct_errors;
     }, 100);
   }
 
@@ -259,6 +259,7 @@ class FormValidator {
         this.removeInputErrorClasses(inputElement);
       } else {
         this.addInputErrorClasses(inputElement, failedValidatorNames);
+        this.announceFormErrorForScreenReader();
       }
     }
 

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

@@ -522,6 +522,11 @@ describe("FormValidator", () => {
       validatorInstance.validateSingleInput(textInput);
       expect(textInput.classList.contains("is-invalid-input")).toBe(true);
 
+      const announceElement = formElement.querySelector(".sr-announce");
+      expect(announceElement).toBeTruthy();
+      expect(announceElement.getAttribute("aria-live")).toBe("assertive");
+      expect(announceElement.classList.contains("sr-only")).toBe(true);
+
       // Reset validation
       validatorInstance.resetFormValidation();
 

data/app/packs/src/decidim/editor/extensions/image/index.js

@@ -80,7 +80,9 @@ export default Image.extend({
   addAttributes() {
     return {
       ...this.parent?.(),
-      width: { default: null }
+      width: { default: null },
+      href: { default: null },
+      target: { default: null }
     };
   },
 
@@ -92,13 +94,16 @@ export default Image.extend({
       ...this.parent?.(),
       imageDialog: () => async ({ dispatch }) => {
         if (dispatch) {
-          let { src, alt, width } = this.editor.getAttributes("image");
+          let { src, alt, width, href, target } = this.editor.getAttributes("image");
 
           this.editor.commands.toggleDialog(true);
-          const dialogState = await uploadDialog.toggle({ src, alt }, {
-            inputLabel: i18n.altLabel,
-            uploadHandler: async (file) => uploadImage(file, this.options.uploadImagesPath)
-          });
+          const dialogState = await uploadDialog.toggle(
+            { src, alt },
+            {
+              inputLabel: i18n.altLabel,
+              uploadHandler: async (file) => uploadImage(file, this.options.uploadImagesPath)
+            }
+          );
           this.editor.commands.toggleDialog(false);
 
           if (dialogState !== "save") {
@@ -113,8 +118,7 @@ export default Image.extend({
 
           src = uploadDialog.getValue("src");
           alt = uploadDialog.getValue("alt");
-
-          return this.editor.chain().setImage({ src, alt, width }).focus(null, { scrollIntoView: false }).run();
+          return this.editor.chain().setImage({ src, alt, width, href, target }).focus(null, { scrollIntoView: false }).run();
         }
 
         return true;
@@ -127,18 +131,52 @@ export default Image.extend({
   },
 
   parseHTML() {
-    return [{ tag: "div[data-image] img[src]:not([src^='data:'])" }];
+    return [
+      {
+        tag: "div[data-image] img[src]:not([src^='data:'])",
+        getAttrs: (dom) => {
+          // Check if the image's parent div is wrapped in a link
+          const imageDiv = dom.closest("div[data-image]");
+          const link = imageDiv?.parentElement;
+          if (link && link.tagName === "A" && link.hasAttribute("href")) {
+            const attrs = { href: link.getAttribute("href") };
+            if (link.hasAttribute("target")) {
+              attrs.target = link.getAttribute("target");
+            }
+            return attrs;
+          }
+          return {};
+        }
+      }
+    ];
   },
 
   renderHTML({ HTMLAttributes }) {
-    return [
+    const { href, target, ...imgAttributes } = HTMLAttributes;
+    const imageContent = [
       "div",
       { "class": "editor-content-image", "data-image": "" },
       [
         "img",
-        mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)
+        mergeAttributes(this.options.HTMLAttributes, imgAttributes)
       ]
     ];
+
+    if (href) {
+      const anchorAttributes = { href };
+      const anchorTarget = target;
+      if (anchorTarget) {
+        anchorAttributes.target = anchorTarget;
+        anchorAttributes.rel = "noopener noreferrer";
+      }
+      return [
+        "a",
+        anchorAttributes,
+        imageContent
+      ];
+    }
+
+    return imageContent;
   },
 
   addProseMirrorPlugins() {

data/app/packs/src/decidim/editor/extensions/image/node_view.js

@@ -62,7 +62,9 @@ export default (self) => {
     const img = contentDOM.querySelector("img");
     let activeResizeControl = null,
         currentHeight = null,
+        currentHref = node.attrs.href,
         currentSrc = node.attrs.src,
+        currentTarget = node.attrs.target,
         currentWidth = null,
         naturalHeight = img.naturalHeight,
         naturalWidth = img.naturalWidth,
@@ -185,7 +187,13 @@ export default (self) => {
           return false;
         }
 
-        const { alt, src, title, width } = updatedNode.attrs;
+        const { alt, src, title, width, href, target } = updatedNode.attrs;
+
+        // If the href or target changed, we need to recreate the node because the
+        // structure changes (wrapped in <a> vs not wrapped)
+        if (href !== currentHref || target !== currentTarget) {
+          return false;
+        }
 
         // We set the value through an attribute change here because otherwise
         // we would trigger a mutation in the DOM which causes the update method

data/app/packs/src/decidim/editor/extensions/link/bubble_menu.js

@@ -1,25 +1,53 @@
-import { PluginKey } from "prosemirror-state";
+import { NodeSelection, PluginKey } from "prosemirror-state";
 
 import { getDictionary } from "src/decidim/refactor/moved/i18n";
 import BubbleMenu from "src/decidim/editor/common/bubble_menu";
 
 class LinkBubbleMenu extends BubbleMenu {
-  shouldDisplay() {
-    return this.editor.isActive("link");
+  shouldDisplay(view) {
+    if (this.editor.isActive("link")) {
+      return true;
+    }
+
+    const selection = view.state.selection;
+    return this.isImage(selection) && Boolean(selection.node.attrs.href);
   }
 
-  display() {
-    const { href } = this.editor.getAttributes("link");
-    this.element.querySelector("[data-linkbubble-value]").textContent = href;
+  display(view) {
+    if (this.editor.isActive("link")) {
+      const { href } = this.editor.getAttributes("link");
+      this.updateHref(href);
+      return;
+    }
+
+    const selection = view.state.selection;
+    if (this.isImage(selection)) {
+      this.bubble.style.zIndex = "10";
+      this.updateHref(selection.node.attrs.href);
+    }
   }
 
   handleAction(action) {
     if (action === "remove") {
+      const { selection } = this.editor.state;
+      if (this.isImage(selection)) {
+        this.editor.chain().focus(null, { scrollIntoView: false }).updateAttributes("image", { href: null, target: null }).run();
+        return;
+      }
+
       this.editor.chain().focus(null, { scrollIntoView: false }).unsetLink().run();
     } else {
       this.editor.commands.linkDialog();
     }
   }
+
+  updateHref(href) {
+    this.element.querySelector("[data-linkbubble-value]").textContent = href;
+  }
+
+  isImage(selection) {
+    return selection instanceof NodeSelection && selection.node.type.name === "image";
+  }
 }
 
 const createElement = () => {

data/app/packs/src/decidim/editor/extensions/link/index.js

@@ -1,5 +1,5 @@
 import Link from "@tiptap/extension-link";
-import { Plugin } from "prosemirror-state";
+import { Plugin, NodeSelection } from "prosemirror-state";
 
 import { getDictionary } from "src/decidim/refactor/moved/i18n";
 import InputDialog from "src/decidim/editor/common/input_dialog";
@@ -40,31 +40,55 @@ export default Link.extend({
       ...this.parent?.(),
 
       toggleLinkBubble: () => ({ dispatch }) => {
+        const { selection } = this.editor.state;
+        const isImageSelection = selection instanceof NodeSelection && selection.node.type.name === "image";
+        const imageHasLink = isImageSelection && Boolean(selection.node.attrs.href);
+
         if (dispatch) {
-          if (this.editor.isActive("link")) {
-            this.storage.bubbleMenu.show();
+          if (this.editor.isActive("link") || (isImageSelection && imageHasLink)) {
+            this.storage.bubbleMenu.handleSelectionChange(this.editor.view);
             return true;
           }
 
           this.storage.bubbleMenu.hide();
           return false;
         }
+
+        if (isImageSelection) {
+          return imageHasLink;
+        }
+
         return this.editor.isActive("link");
       },
 
       linkDialog: () => async ({ dispatch, commands }) => {
         if (dispatch) {
-          // If the cursor is within the link but the link is not selected, the
-          // link would not be correctly updated. Also if only a part of the
-          // link is selected, the link would be split to separate links, only
-          // the current selection getting the updated link URL.
-          commands.extendMarkRange("link");
+          const { state } = this.editor;
+          const { selection } = state;
+          const isImageSelection = selection instanceof NodeSelection && selection.node.type.name === "image";
+          const nodeType = (() => {
+            if (isImageSelection) {
+              return "image";
+            }
+            return "link";
+          })();
+
+          if (!isImageSelection) {
+            // If the cursor is within the link but the link is not selected, the
+            // link would not be correctly updated. Also if only a part of the
+            // link is selected, the link would be split to separate links, only
+            // the current selection getting the updated link URL.
+            commands.extendMarkRange("link");
+          }
 
           this.storage.bubbleMenu.hide();
 
           const { allowTargetControl } = this.options;
 
-          let { href, target } = this.editor.getAttributes("link");
+          let href = null;
+          let target = null;
+
+          ({ href, target } = this.editor.getAttributes(nodeType));
 
           const inputs = { href: { type: "text", label: i18n.hrefLabel } };
           if (allowTargetControl) {
@@ -88,16 +112,25 @@ export default Link.extend({
             target = null;
           }
 
+          const buildChain = () => this.editor.chain().focus(null, { scrollIntoView: false });
+
           if (dialogState !== "save") {
-            this.editor.chain().focus(null, { scrollIntoView: false }).toggleLinkBubble().run();
+            buildChain().toggleLinkBubble().run();
             return false;
           }
 
           if (!href || href.trim().length < 1) {
-            return this.editor.chain().focus(null, { scrollIntoView: false }).unsetLink().run();
+            if (isImageSelection) {
+              return buildChain().updateAttributes("image", { href: null, target: null }).run();
+            }
+            return buildChain().unsetLink().run();
+          }
+
+          if (isImageSelection) {
+            return buildChain().updateAttributes("image", { href: href, target }).toggleLinkBubble().run();
           }
 
-          return this.editor.chain().focus(null, { scrollIntoView: false }).setLink({ href, target }).toggleLinkBubble().run();
+          return buildChain().setLink({ href: href, target }).toggleLinkBubble().run();
         }
 
         return true;

data/app/packs/src/decidim/editor/test/extensions/image_links.test.js

@@ -0,0 +1,161 @@
+/* global jest, global */
+
+import { createBasicEditor, updateContent, sleep } from "src/decidim/editor/test/helpers";
+
+import Dialog from "src/decidim/editor/extensions/dialog";
+import Image from "src/decidim/editor/extensions/image";
+import uploadTemplates from "src/decidim/editor/test/fixtures/upload_templates";
+
+class DummyDialog {
+  constructor(element) { this.element = element; }
+
+  open() { this.element.dataset.dialogOpen = true; }
+
+  close() { this.element.dataset.dialogOpen = null; }
+}
+
+// Not implemented in Jest
+global.Touch = class Touch {
+  constructor(options) {
+    this.pageX = options.pageX;
+    this.pageY = options.pageY;
+  }
+}
+
+describe("Image (links)", () => {
+  let editor = null;
+  let editorElement = null;
+  let uploadDialogElement = null;
+
+  beforeEach(() => {
+    document.body.innerHTML = "";
+
+    const dialogWrapper = document.createElement("div");
+    dialogWrapper.innerHTML = uploadTemplates.redesign;
+    uploadDialogElement = dialogWrapper.firstElementChild;
+    uploadDialogElement.dataset.dialog = "testDialog";
+    uploadDialogElement.dialog = new DummyDialog(uploadDialogElement);
+    window.Decidim.currentDialogs = { testDialog: uploadDialogElement.dialog };
+    document.body.append(uploadDialogElement);
+
+    editor = createBasicEditor({
+      extensions: [Dialog, Image.configure({ uploadDialogSelector: "#upload_dialog", uploadImagesPath: "/editor_images", contentTypes: ["image/png"] })]
+    });
+    editorElement = editor.view.dom;
+
+    const csrf = document.createElement("meta");
+    csrf.setAttribute("name", "csrf-token");
+    csrf.setAttribute("content", "abcdef0123456789");
+    document.head.append(csrf);
+
+    global.fetch = jest.fn(() => Promise.resolve({ ok: true, json: () => Promise.resolve({ url: "/path/to/image.jpg" }) }));
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("allows setting an image with href and target attributes", async () => {
+    editorElement.focus();
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: "https://example.com", target: "_blank" });
+    await sleep(0);
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <a href="https://example.com" target="_blank" rel="noopener noreferrer">
+        <div class="editor-content-image" data-image="">
+          <img src="/path/to/image.jpg" alt="Test image">
+        </div>
+      </a>
+    `);
+  });
+
+  it("allows setting an image with href but no target", async () => {
+    editorElement.focus();
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: "https://example.com" });
+    await sleep(0);
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <a href="https://example.com">
+        <div class="editor-content-image" data-image="">
+          <img src="/path/to/image.jpg" alt="Test image">
+        </div>
+      </a>
+    `);
+  });
+
+  it("parses existing HTML with linked images", async () => {
+    editorElement.focus();
+    await updateContent(editorElement,
+      '<a href="https://example.com" target="_blank"><div class="editor-content-image" data-image=""><img src="/path/to/image.jpg" alt="Test image"></div></a>',
+      editor
+    );
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <a href="https://example.com" target="_blank" rel="noopener noreferrer">
+        <div class="editor-content-image" data-image="">
+          <img src="/path/to/image.jpg" alt="Test image">
+        </div>
+      </a>
+    `);
+  });
+
+  it("parses existing HTML with linked images without target", async () => {
+    editorElement.focus();
+    await updateContent(editorElement,
+      '<a href="https://example.com"><div class="editor-content-image" data-image=""><img src="/path/to/image.jpg" alt="Test image"></div></a>',
+      editor
+    );
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <a href="https://example.com">
+        <div class="editor-content-image" data-image="">
+          <img src="/path/to/image.jpg" alt="Test image">
+        </div>
+      </a>
+    `);
+  });
+
+  it("allows updating image link attributes", async () => {
+    editorElement.focus();
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: "https://example.com", target: "_blank" });
+    await sleep(0);
+
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: "https://docs.example.com" });
+    await sleep(0);
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <a href="https://docs.example.com">
+        <div class="editor-content-image" data-image="">
+          <img src="/path/to/image.jpg" alt="Test image">
+        </div>
+      </a>
+    `);
+  });
+
+  it("allows removing link from image", async () => {
+    editorElement.focus();
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: "https://example.com", target: "_blank" });
+    await sleep(0);
+
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image", href: null, target: null });
+    await sleep(0);
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <div class="editor-content-image" data-image="">
+        <img src="/path/to/image.jpg" alt="Test image">
+      </div>
+    `);
+  });
+
+  it("renders images without links correctly", async () => {
+    editorElement.focus();
+    editor.commands.setImage({ src: "/path/to/image.jpg", alt: "Test image" });
+    await sleep(0);
+
+    expect(editor.getHTML()).toMatchHtml(`
+      <div class="editor-content-image" data-image="">
+        <img src="/path/to/image.jpg" alt="Test image">
+      </div>
+    `);
+  });
+});