decidim-core 0.30.6 → 0.30.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d2d2e573802976d0b68a5ec56528a5ba499416c443101bba31fee2d2f1af9e6
-  data.tar.gz: f172339288312c74d88a376805b12eed9aea1ea97c7e049978c3d94a4ab99f38
+  metadata.gz: 5110ff22ed67aef95bf387023ec7d18d9602a92944c82c2ab9373e786c04393c
+  data.tar.gz: b754a2b2ddb4a72ae07dcd384203d61454ced7f6a3a41a4f80a5bb501b3dc310
 SHA512:
-  metadata.gz: eb126980873b650eaa4c89d208bbd0d266df4da01196f60621211e896501e615329f1e35e34251c66f8e7f67b71d4df6cfaefe38eb4343f69d7d65437b62f51e
-  data.tar.gz: 3204e02c1097ee49b967bfd558fd51b32f3faa6d3ee9352590e6c98c0020c86590c383756b0b5694c97fe3e4b6689fcbecb422e15b2bae929656533a5908af9b
+  metadata.gz: 3659a2a34d2531735e1a03710329261952c724361d0661bb9cf02c7a2acc76c2516266e8030a82e4dcc40789361d67845f1421addfcbf0f1fe4e0743a1288572
+  data.tar.gz: 9ec948751168cd3f4a8cc2b768be6a118cd22b47aecb0712fa64a1c01d58a5cdf2b7f2f20963fdd0eec2384a41753bbaec558016f533bfab7176227df6f3cadd

data/app/cells/decidim/content_blocks/highlighted_elements_with_cell_for_list_cell.rb

@@ -19,10 +19,14 @@ module Decidim
         @list_cell ||= cell(
           list_cell_path,
           published_components.one? ? published_components.first : published_components,
-          **model.settings.to_h, see_all_path:
+          **model.settings.to_h, **extra_list_cell_options, see_all_path:
         )
       end
 
+      def extra_list_cell_options
+        {}
+      end
+
       def see_all_path; end
     end
   end

data/app/cells/decidim/content_blocks/participatory_space_metadata/content.erb

@@ -2,9 +2,9 @@
   <% metadata_valued_items.each do |item| %>
     <div class="participatory-space__metadata-item">
       <div class="participatory-space__metadata-item-title">
-        <span><%= item[:title] %></span>
+        <p><%= item[:title] %></p>
       </div>
-      <span><%= item[:value] %></span>
+      <p><%= item[:value] %></p>
     </div>
   <% end %>
 </div>

data/app/cells/decidim/report_button/already_reported_modal.erb

@@ -1,7 +1,7 @@
 <%= decidim_modal id: modal_id, class: "flag-modal" do %>
   <div data-dialog-container>
     <%= icon "flag-line" %>
-    <h2 tabindex="-1" data-dialog-title><%= t("decidim.shared.flag_modal.title") %></h2>
+    <h2 id="dialog-title-<%= modal_id %>" tabindex="-1" data-dialog-title><%= t("decidim.shared.flag_modal.title") %></h2>
     <div>
       <div class="form__wrapper flag-modal__form">
         <p class="flag-modal__form-description"><%= t("decidim.shared.flag_modal.already_reported") %></p>

data/app/cells/decidim/report_button/flag_modal.erb

@@ -2,7 +2,7 @@
   <%= form_for report_form, builder:, url: report_path, method: :post, html: { id: nil } do |f| %>
     <div data-dialog-container>
       <%= icon "flag-line" %>
-      <h2 tabindex="-1" data-dialog-title><%= t("decidim.shared.flag_modal.title") %></h2>
+      <h2 id="dialog-title-<%= modal_id %>" tabindex="-1" data-dialog-title><%= t("decidim.shared.flag_modal.title") %></h2>
       <div>
         <div class="form__wrapper flag-modal__form">
           <p id="dialog-desc-<%= modal_id %>" class="flag-modal__form-description"><%= t("decidim.shared.flag_modal.description") %></p>

data/app/cells/decidim/report_user_button/already_reported_modal.erb

@@ -1,7 +1,7 @@
 <%= decidim_modal id: modal_id, class: "flag-user-modal" do %>
   <div data-dialog-container>
     <%= icon "flag-line" %>
-    <h2 tabindex="-1" data-dialog-title><%= t("decidim.shared.flag_user_modal.title") %></h2>
+    <h2 id="dialog-title-<%= modal_id %>" tabindex="-1" data-dialog-title><%= t("decidim.shared.flag_user_modal.title") %></h2>
     <div>
       <div class="form__wrapper flag-modal__form">
         <p class="flag-modal__form-description"><%= t("decidim.shared.flag_user_modal.already_reported") %></p>

data/app/cells/decidim/report_user_button/flag_modal.erb

@@ -2,7 +2,7 @@
   <%= form_for report_form, builder:, url: report_path, method: :post, html: { id: nil } do |f| %>
     <div data-dialog-container>
       <%= icon "flag-line" %>
-      <h2 tabindex="-1" data-dialog-title><%= t("decidim.shared.flag_user_modal.title") %></h2>
+      <h2 id="dialog-title-<%= modal_id %>" tabindex="-1" data-dialog-title><%= t("decidim.shared.flag_user_modal.title") %></h2>
       <div>
         <div class="form__wrapper flag-modal__form">
           <p class="flag-modal__form-description"><%= t("decidim.shared.flag_user_modal.description") %></p>

data/app/cells/decidim/statistic/show.erb

@@ -1,8 +1,8 @@
 <div class="statistic <%= stat_dom_class %>" data-statistic>
-  <span class="statistic__title" title="<%= stat_title %>">
+  <p class="statistic__title" title="<%= stat_title %>">
     <%= stat_title %>
-  </span>
-  <span class="statistic__number">
+  </p>
+  <p class="statistic__number">
     <%= stat_number %>
-  </span>
+  </p>
 </div>

data/app/cells/decidim/upload_modal/files.erb

@@ -1,9 +1,9 @@
 <div class="upload-modal__files-container upload-container-for-<%= attribute %> <%= with_title %>">
   <div>
-    <%= label %>
+    <%= options[:paragraph] == true ? paragraph : label %>
 
     <% if options[:help_text].present? %>
-      <span class="help-text"><%= options[:help_text] %></span>
+      <p class="help-text"><%= options[:help_text] %></p>
     <% end %>
 
     <%# NOTE: this block is about wrapping a default image for the avatar with the new styles,
@@ -33,16 +33,20 @@
           <% end %>
 
           <% if has_title? %>
-            <span><%= title_for(attachment) %></span>
+            <p><%= title_for(attachment) %></p>
           <% else %>
             <% if attachment_blob&.image? %>
-              <span><%= title_for(attachment) %></span>
+              <p><%= title_for(attachment) %></p>
             <% else %>
               <%= link_to title_for(attachment), file_attachment_path(attachment), class: "w-full break-all mb-2" %>
             <% end %>
           <% end %>
           <% if attachment_blob.present? %>
-            <%= form.hidden_field attribute, value: attachment_blob.signed_id, id: "hidden_#{attribute}_#{attachment_blob.id}" %>
+            <% if is_persisted_attachment %>
+              <%= form.hidden_field attribute, value: attachment.id, id: "hidden_#{attribute}_#{attachment.id}" %>
+            <% else %>
+              <%= form.hidden_field attribute, value: attachment_blob.signed_id, id: "hidden_#{attribute}_#{attachment_blob.id}" %>
+            <% end %>
           <% end %>
         </div>
       <% end %>

data/app/cells/decidim/upload_modal_cell.rb

@@ -30,6 +30,10 @@ module Decidim
       form.send(:custom_label, attribute, options[:label], { required: required?, for: nil })
     end
 
+    def paragraph
+      form.send(:custom_paragraph, attribute, options[:label], { required: required? })
+    end
+
     def button_label
       return button_edit_label if attachments.count.positive?
 
@@ -124,7 +128,16 @@ module Decidim
       @attachments = begin
         attachments = options[:attachments] || form.object.send(attribute)
         attachments = Array(attachments).compact_blank
-        attachments.map { |attachment| attachment.is_a?(String) ? ActiveStorage::Blob.find_signed(attachment) : attachment }
+        attachments.map do |attachment|
+          case attachment
+          when String
+            ActiveStorage::Blob.find_signed(attachment)
+          when Integer
+            Decidim::Attachment.find_by(id: attachment)
+          else
+            attachment
+          end
+        end.compact
       end
     end
 

data/app/commands/decidim/multiple_attachments_methods.rb

@@ -41,8 +41,9 @@ module Decidim
 
     def create_attachments(first_weight: 0)
       weight = first_weight
-      # Add the weights first to the old document
-      @form.documents.each do |document|
+      # Add the weights first to the old documents
+      document_ids = keep_ids
+      Decidim::Attachment.where(id: document_ids).each do |document|
         document.update!(weight:)
         weight += 1
       end
@@ -59,7 +60,7 @@ module Decidim
       documents = include_all_attachments ? documents_attached_to.attachments.with_attached_file : documents_attached_to.documents
 
       documents.each do |document|
-        document.destroy! if @form.documents.map(&:id).exclude? document.id
+        document.destroy! unless keep_ids.include?(document.id)
       end
 
       documents_attached_to.reload
@@ -98,5 +99,21 @@ module Decidim
     def blob(signed_id)
       ActiveStorage::Blob.find_signed(signed_id)
     end
+
+    def keep_ids
+      documents_array = Array(@form.documents)
+      documents_array.map do |doc|
+        case doc
+        when Decidim::Attachment
+          doc.id
+        when Integer
+          doc
+        when String
+          doc.match?(/\A\d+\z/) ? doc.to_i : nil
+        when Hash
+          (doc[:id] || doc["id"]).to_i
+        end
+      end.compact
+    end
   end
 end

data/app/jobs/decidim/find_and_update_descendants_job.rb

@@ -4,8 +4,14 @@ module Decidim
   # Update search indexes for each descendants of a given element
   class FindAndUpdateDescendantsJob < ApplicationJob
     queue_as :default
+    MAX_DEPTH = 5
+
+    def perform(element, current_depth = 0)
+      if current_depth >= MAX_DEPTH
+        Rails.logger.warn "Max depth of #{MAX_DEPTH} reached for element #{element.class.name} with id #{element.id}. Stopping recursion."
+        return
+      end
 
-    def perform(element)
       descendants_collector = components_for(element)
       descendants_collector << element.comments.to_a if element.respond_to?(:comments)
 
@@ -14,7 +20,7 @@ module Decidim
       descendants_collector.each do |descendants|
         next if descendants.blank?
 
-        Decidim::UpdateSearchIndexesJob.perform_later(descendants)
+        Decidim::UpdateSearchIndexesJob.perform_later(descendants, current_depth + 1)
       end
     end
 

data/app/jobs/decidim/update_search_indexes_job.rb

@@ -4,8 +4,8 @@ module Decidim
   class UpdateSearchIndexesJob < ApplicationJob
     queue_as :default
 
-    def perform(elements)
-      elements.each { |element| element.try(:try_update_index_for_search_resource) }
+    def perform(elements, current_depth = 0)
+      elements.each { |element| element.try(:try_update_index_for_search_resource, current_depth) }
     end
   end
 end

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

@@ -124,6 +124,13 @@ const createDropdown = (component) => {
  * @return {void}
  */
 const createDialog = (component) => {
+  const getFocusableElements = (container) => {
+    const selectors = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex='-1'])";
+    return Array.from(container.querySelectorAll(selectors)).filter(
+      (el) => el.offsetParent !== null
+    );
+  };
+
   const {
     dataset: { dialog, ...attrs }
   } = component;
@@ -145,11 +152,33 @@ const createDialog = (component) => {
     backdropSelector: `[data-dialog="${dialog}"]`,
     enableAutoFocus: false,
     onOpen: (params, trigger) => {
+      const keyHandler = (event) => {
+        if (event.key !== "Tab") {
+          return;
+        }
+        const focusable = getFocusableElements(params);
+        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 });
+        }
+      };
+      params._focusTrapHandler = keyHandler;
+      params.addEventListener("keydown", keyHandler);
       setFocusOnTitle(params);
       window.focusGuard.trap(params, trigger);
       params.dispatchEvent(new CustomEvent("open.dialog"));
     },
     onClose: (params) => {
+      if (params._focusTrapHandler) {
+        params.removeEventListener("keydown", params._focusTrapHandler);
+        Reflect.deleteProperty(params, "_focusTrapHandler");
+      }
       window.focusGuard.disable();
       params.dispatchEvent(new CustomEvent("close.dialog"));
     },

data/app/packs/src/decidim/a11y.test.js

@@ -0,0 +1,81 @@
+/* global jest */
+
+import { createDialog } from "src/decidim/a11y"
+
+describe("a11y dialog focus trap", () => {
+  const dialogHtml = `
+    <button id="open-btn" data-dialog-open="testDialog">Open</button>
+    <div id="test-dialog" data-dialog="testDialog">
+      <div data-dialog-container>
+        <h2 id="dialog-title-testDialog" tabindex="-1" data-dialog-title>Test Dialog</h2>
+        <a href="#">Link 1</a>
+        <button>Button 1</button>
+        <input type="text" />
+        <button>Button 2</button>
+        <a href="#">Link 2</a>
+      </div>
+      <div data-dialog-actions>
+        <button data-dialog-close="testDialog">Close</button>
+      </div>
+    </div>
+  `;
+
+  beforeEach(() => {
+    document.body.innerHTML = dialogHtml;
+    window.Decidim = {
+      currentDialogs: {}
+    };
+    window.focusGuard = {
+      trap: jest.fn(),
+      disable: jest.fn()
+    };
+  });
+
+  describe("keydown handler", () => {
+    let dialogEl = null;
+
+    beforeEach(() => {
+      const component = document.querySelector("[data-dialog]");
+      createDialog(component);
+      dialogEl = document.querySelector("[data-dialog='testDialog']");
+      // Get the dialog from Decidim.currentDialogs and open it
+      const dialog = window.Decidim.currentDialogs.testDialog;
+      dialog.open();
+    });
+
+    it("adds keydown handler on open", () => {
+      expect(dialogEl._focusTrapHandler).toBeDefined();
+    });
+
+    it("handles Tab key", () => {
+      const selectors = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex='-1'])";
+      const tabbableElements = Array.from(dialogEl.querySelectorAll(selectors)).filter(
+        (el) => el.offsetParent || el.offsetParent === null
+      );
+      tabbableElements[tabbableElements.length - 1].focus();
+
+      const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true });
+      const preventDefault = jest.fn();
+      event.preventDefault = preventDefault;
+
+      dialogEl.dispatchEvent(event);
+
+      expect(preventDefault).toHaveBeenCalled();
+    });
+  });
+
+  describe("onClose cleanup", () => {
+    it("removes the keydown handler on close", () => {
+      const component = document.querySelector("[data-dialog]");
+      createDialog(component);
+      const dialogEl = document.querySelector("[data-dialog='testDialog']");
+
+      const dialog = window.Decidim.currentDialogs.testDialog;
+      dialog.open();
+      expect(dialogEl._focusTrapHandler).toBeDefined();
+
+      dialog.close();
+      expect(dialogEl._focusTrapHandler).toBeUndefined();
+    });
+  });
+});

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

@@ -162,7 +162,9 @@ export const initializeConfirm = () => {
     return handleDocumentEvent(ev, [
       Rails.linkClickSelector,
       Rails.buttonClickSelector,
-      Rails.formInputClickSelector
+      Rails.formInputClickSelector,
+      'button[data-confirm][type="button"]',
+      "form button[data-confirm]"
     ]);
   });
   document.addEventListener("change", (ev) => {
@@ -180,6 +182,11 @@ export const initializeConfirm = () => {
     $(Rails.formInputClickSelector).on("click.confirm", (ev) => {
       handleConfirm(ev, getMatchingEventTarget(ev, Rails.formInputClickSelector));
     });
+
+    // Handle button[type="button"] with data-confirm inside forms
+    $('button[data-confirm][type="button"]').on("click.confirm", (ev) => {
+      handleConfirm(ev, ev.currentTarget);
+    });
   });
 };
 

data/app/packs/src/decidim/confirm.test.js

@@ -0,0 +1,225 @@
+/* global jest */
+
+jest.mock("src/decidim/icon", () => () => "<svg></svg>");
+
+describe("Confirm dialog for button[type='button']", () => {
+  let mockRails = null;
+  let mockDecidim = null;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    document.body.innerHTML = `
+      <div id="confirm-modal" style="display: none;">
+        <div data-dialog-title></div>
+        <div class="confirm-modal-icon"></div>
+        <div data-confirm-modal-content></div>
+        <button data-confirm-ok>Confirm</button>
+        <button data-confirm-cancel>Cancel</button>
+      </div>
+    `;
+
+    mockRails = {
+      linkClickSelector: "a[data-confirm]",
+      buttonClickSelector: "button[data-confirm]:not([form])",
+      formInputClickSelector: 'form button[type="submit"], form button:not([type])',
+      inputChangeSelector: "input[data-confirm], select[data-confirm]",
+      formSubmitSelector: "form[data-confirm]",
+      stopEverything: jest.fn(),
+      fire: jest.fn((el, event) => {
+        const evt = new CustomEvent(event);
+        el.dispatchEvent(evt);
+        return true;
+      }),
+      matches: function(element, selector) {
+        if (element instanceof Element) {
+          return element.matches(selector);
+        }
+        return false;
+      }
+    };
+
+    mockDecidim = {
+      currentDialogs: {
+        "confirm-modal": {
+          open: jest.fn(),
+          close: jest.fn()
+        }
+      }
+    };
+
+    window.Rails = mockRails;
+    window.Decidim = mockDecidim;
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  describe("selector matching for button[type='button'] with data-confirm", () => {
+    it("matches button[data-confirm][type='button'] selector", () => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.setAttribute("data-confirm", "Are you sure?");
+
+      expect(button.matches('button[data-confirm][type="button"]')).toBe(true);
+    });
+
+    it("matches form button[data-confirm] selector", () => {
+      const form = document.createElement("form");
+      const button = document.createElement("button");
+      button.setAttribute("data-confirm", "Are you sure?");
+      form.appendChild(button);
+
+      expect(button.matches("form button[data-confirm]")).toBe(true);
+    });
+
+    it("does not match regular button without data-confirm", () => {
+      const button = document.createElement("button");
+      button.type = "button";
+
+      expect(button.matches('button[data-confirm][type="button"]')).toBe(false);
+    });
+
+    it("does not match button[type='submit'] with the type='button' selector", () => {
+      const button = document.createElement("button");
+      button.type = "submit";
+      button.setAttribute("data-confirm", "Are you sure?");
+
+      expect(button.matches('button[data-confirm][type="button"]')).toBe(false);
+    });
+
+    it("matches button[type='button'] inside form", () => {
+      document.body.innerHTML = `
+        <form>
+          <button type="button" data-confirm="Test message">Click me</button>
+        </form>
+      `;
+
+      const button = document.querySelector('button[type="button"]');
+      expect(button.matches('button[data-confirm][type="button"]')).toBe(true);
+      expect(button.matches("form button[data-confirm]")).toBe(true);
+    });
+
+    it("does not match button[type='button'] without data-confirm inside form", () => {
+      document.body.innerHTML = `
+        <form>
+          <button type="button">Click me</button>
+        </form>
+      `;
+
+      const button = document.querySelector('button[type="button"]');
+      expect(button.matches('button[data-confirm][type="button"]')).toBe(false);
+      expect(button.matches("form button[data-confirm]")).toBe(false);
+    });
+  });
+
+  describe("initializeConfirm - selectors registration", () => {
+    it("adds click event listener with proper selectors including button[type='button'] support", async () => {
+      const { initializeConfirm } = await import("src/decidim/confirm.js");
+
+      const addEventListenerSpy = jest.spyOn(document, "addEventListener");
+
+      initializeConfirm();
+
+      expect(addEventListenerSpy).toHaveBeenCalledWith("click", expect.any(Function));
+    });
+
+    it("adds change event listener for input change selector", async () => {
+      const { initializeConfirm } = await import("src/decidim/confirm.js");
+
+      const addEventListenerSpy = jest.spyOn(document, "addEventListener");
+
+      initializeConfirm();
+
+      const changeHandlerCalls = addEventListenerSpy.mock.calls.filter(
+        (call) => call[0] === "change"
+      );
+      expect(changeHandlerCalls.length).toBeGreaterThan(0);
+    });
+
+    it("adds submit event listener for form submit selector", async () => {
+      const { initializeConfirm } = await import("src/decidim/confirm.js");
+
+      const addEventListenerSpy = jest.spyOn(document, "addEventListener");
+
+      initializeConfirm();
+
+      const submitHandlerCalls = addEventListenerSpy.mock.calls.filter(
+        (call) => call[0] === "submit"
+      );
+      expect(submitHandlerCalls.length).toBeGreaterThan(0);
+    });
+
+    it("adds DOMContentLoaded event listener for Foundation Abide compatibility", async () => {
+      const { initializeConfirm } = await import("src/decidim/confirm.js");
+
+      const addEventListenerSpy = jest.spyOn(document, "addEventListener");
+
+      initializeConfirm();
+
+      const turboLoadCalls = addEventListenerSpy.mock.calls.filter(
+        (call) => call[0] === "DOMContentLoaded"
+      );
+      expect(turboLoadCalls.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("handleDocumentEvent with button[type='button'] support", () => {
+    it("handles click on button[type='button'] with data-confirm and form attribute", async () => {
+      const { initializeConfirm } = await import("src/decidim/confirm.js");
+
+      document.body.innerHTML = `
+        <form id="my-form">
+          <button type="button" form="my-form" data-confirm="Are you sure?">Click me</button>
+        </form>
+      `;
+
+      const button = document.querySelector('button[type="button"]');
+      const openSpy = jest.spyOn(mockDecidim.currentDialogs["confirm-modal"], "open");
+
+      initializeConfirm();
+
+      button.click();
+
+      expect(openSpy).toHaveBeenCalled();
+    });
+
+    it("handles click on button[type='button'] with data-confirm outside form", async () => {
+      const { initializeConfirm } = await import("src/decidim/confirm.js");
+
+      document.body.innerHTML = `
+        <button type="button" data-confirm="Are you sure?">Click me</button>
+      `;
+
+      const button = document.querySelector('button[type="button"]');
+      const openSpy = jest.spyOn(mockDecidim.currentDialogs["confirm-modal"], "open");
+
+      initializeConfirm();
+
+      button.click();
+
+      expect(openSpy).toHaveBeenCalled();
+    });
+
+    it("does not trigger confirm for button without data-confirm attribute", async () => {
+      const { initializeConfirm } = await import("src/decidim/confirm.js");
+
+      document.body.innerHTML = `
+        <form>
+          <button type="button">Click me</button>
+        </form>
+      `;
+
+      const button = document.querySelector('button[type="button"]');
+      const openSpy = jest.spyOn(mockDecidim.currentDialogs["confirm-modal"], "open");
+
+      initializeConfirm();
+
+      button.click();
+
+      expect(openSpy).not.toHaveBeenCalled();
+    });
+  });
+});
+
+/* dummy end */

data/app/packs/src/decidim/direct_uploads/upload_field.js

@@ -79,7 +79,7 @@ const updateActiveUploads = (modal) => {
     const template = `
       <div ${attachmentIdOrHiddenField} data-filename="${escapeQuotes(file.name)}" data-title="${escapeQuotes(title)}">
         ${(/image/).test(file.type) && "<div><img src=\"data:,\" role=\"presentation\" /></div>" || ""}
-        <span>${escapeHtml(title)}</span>
+        <p>${escapeHtml(title)}</p>
         ${hidden}
       </div>
     `

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

@@ -78,16 +78,16 @@ export default class FocusGuard {
 
     let target = null;
     if (guard.dataset.position === "start") {
-      // Focus at the start guard, so focus the first focusable element after that
-      for (let ind = 0; ind < visibleNodes.length; ind += 1) {
+      // Focus at the start guard, so focus the last focusable element (cycle forward to end)
+      for (let ind = visibleNodes.length - 1; ind >= 0; ind -= 1) {
         if (!this.isFocusGuard(visibleNodes[ind]) && this.isFocusable(visibleNodes[ind])) {
           target = visibleNodes[ind];
           break;
         }
       }
     } else {
-      // Focus at the end guard, so focus the first focusable element after that
-      for (let ind = visibleNodes.length - 1; ind >= 0; ind -= 1) {
+      // Focus at the end guard, so focus the first focusable element (cycle back to start)
+      for (let ind = 0; ind < visibleNodes.length; ind += 1) {
         if (!this.isFocusGuard(visibleNodes[ind]) && this.isFocusable(visibleNodes[ind])) {
           target = visibleNodes[ind];
           break;