decidim-core 0.32.0 → 0.32.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 50d3683adf392d4b4b2900c05d390051d922759af5aca3a012a0e2d6b1db501a
-  data.tar.gz: 6c44f0977cb804af860603ede5ad244515e6cc92d57071cfe594f687ee1c2a96
+  metadata.gz: 2c6e0e725b51232026afe0dfeb5bdf73eeaf07f88d346202d4854ef47c093908
+  data.tar.gz: ee494f4ab056b6f6debfe4590b885178eb39351e516efb9d98f174eab52b4a1e
 SHA512:
-  metadata.gz: '097e493989f0f1cdc7d260ba099d36810cb0f85266165a122a39aab7a7befe35560b6efa701c7672541c9016c06cacf455521a9e927fcc1e791bc9caec2d8bcf'
-  data.tar.gz: f9df0bd52556860de3d48910823fa559a6a0614eb6aaf7cd335c7e9362659a0ccdcc6be27f84f90d20da6e08f8fb6d6935132bafca33ffaf8d2053f25a015461
+  metadata.gz: d01d66392ab3be5f859ac9791375a83f9d810abd6ee909af6b1e8cf5d833da3a20806e8eed83c05142013d7c9166a12c31fa2ec128b6b4c9a61d8a5e34e7caba
+  data.tar.gz: '09c6891b8ab26cde54ead3bb2f0876c4cd04c88d3309c1855c3afce7c11297bfb95cf3d07e8dbabafa67a390882503f7b0595f4574f01c90050847392b217d31'

data/app/cells/decidim/comments_button_cell.rb

@@ -23,7 +23,9 @@ module Decidim
     end
 
     def path
-      "#add-comment-anchor"
+      return "#add-comment-anchor" if current_user
+
+      nil
     end
 
     def text
@@ -37,5 +39,11 @@ module Decidim
     def button_classes
       "button button__sm button__transparent-secondary add-comment-mobile"
     end
+
+    def html_options
+      return {} if current_user
+
+      { data: { "dialog-open": "loginModal" } }
+    end
   end
 end

data/app/cells/decidim/data_consent/category.erb

@@ -30,39 +30,26 @@
     <p><%= category[:description] %></p>
 
     <% if category[:items].present? %>
-    <div>
-      <div class="cookies__category-panel__tr">
-        <div class="cookies__category-panel__th">
-          <%= t("layouts.decidim.data_consent.details.columns.type") %>
-        </div>
-        <div class="cookies__category-panel__th">
-          <%= t("layouts.decidim.data_consent.details.columns.name") %>
-        </div>
-        <div class="cookies__category-panel__th">
-          <%= t("layouts.decidim.data_consent.details.columns.service") %>
-        </div>
-        <div class="cookies__category-panel__th">
-          <%= t("layouts.decidim.data_consent.details.columns.description") %>
-        </div>
-      </div>
-
-      <% category[:items].each do |item| %>
-        <div class="cookies__category-panel__tr">
-          <div class="cookies__category-panel__td">
-            <%= t("layouts.decidim.data_consent.details.types.#{item[:type]}") %>
-          </div>
-          <div class="cookies__category-panel__td">
-            <%= item[:name] %>
-          </div>
-          <div class="cookies__category-panel__td">
-            <%= t("layouts.decidim.data_consent.details.items.#{item[:name]}.service") %>
-          </div>
-          <div class="cookies__category-panel__td">
-            <%= t("layouts.decidim.data_consent.details.items.#{item[:name]}.description") %>
-          </div>
-        </div>
-      <% end %>
-    </div>
+    <table>
+      <thead>
+        <tr>
+          <th><%= t("layouts.decidim.data_consent.details.columns.type") %></th>
+          <th><%= t("layouts.decidim.data_consent.details.columns.name") %></th>
+          <th><%= t("layouts.decidim.data_consent.details.columns.service") %></th>
+          <th><%= t("layouts.decidim.data_consent.details.columns.description") %></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% category[:items].each do |item| %>
+          <tr>
+            <td><%= t("layouts.decidim.data_consent.details.types.#{item[:type]}") %></td>
+            <td><%= item[:name] %></td>
+            <td><%= t("layouts.decidim.data_consent.details.items.#{item[:name]}.service") %></td>
+            <td><%= t("layouts.decidim.data_consent.details.items.#{item[:name]}.description") %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
     <% end %>
   </div>
 </div>

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

@@ -1,8 +1,5 @@
-<nav role="navigation" aria-label="<%= t("layouts.decidim.footer.help") %>">
-  <h2 class="h4 mb-4"><%= t("layouts.decidim.footer.help") %></h2>
-  <ul class="space-y-4 break-inside-avoid">
-    <% topics.each do |topic| %>
-      <%= topic_item(topic, class: "font-semibold underline") %>
-    <% end %>
-  </ul>
-</nav>
+<ul>
+  <% topics.each do |topic| %>
+    <%= topic_item(topic, class: "font-semibold underline") %>
+  <% end %>
+</ul>

data/app/cells/decidim/share_widget/qr_code_modal.erb

@@ -2,7 +2,7 @@
   <div data-dialog-container>
     <div data-dialog-title>
       <%= icon "qr-code-line" %>
-      <h2 tabindex="-1"><%= t("decidim.share_widget.qr_code") %></h2>
+      <h2 id="dialog-title-qr-code-dialog" tabindex="-1"><%= t("decidim.share_widget.qr_code") %></h2>
     </div>
     <div class="content">
       <div>

data/app/helpers/decidim/menu_helper.rb

@@ -55,10 +55,8 @@ module Decidim
       @footer_menu ||= ::Decidim::FooterMenuPresenter.new(
         :menu,
         self,
-        element_class: "font-semibold underline",
         active_class: "is-active",
         role: false,
-        container_options: { class: "space-y-4 break-inside-avoid" },
         label: t("layouts.decidim.footer.decidim_title")
       )
     end

data/app/models/decidim/user.rb

@@ -21,8 +21,8 @@ module Decidim
 
     devise :invitable, :database_authenticatable, :registerable, :confirmable, :timeoutable,
            :recoverable, :trackable, :lockable,
-           :decidim_validatable, :decidim_newsletterable, :jwt_authenticatable,
-           :omniauthable, omniauth_providers: Decidim::OmniauthProvider.available.keys, jwt_revocation_strategy: Decidim::Api::JwtDenylist,
+           :decidim_validatable, :decidim_newsletterable,
+           :omniauthable, omniauth_providers: Decidim::OmniauthProvider.available.keys,
                           request_keys: [:env], reset_password_keys: [:decidim_organization_id, :email],
                           confirmation_keys: [:decidim_organization_id, :email]
     devise :rememberable if Decidim.enable_remember_me

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

@@ -1,36 +1,44 @@
 /* global jest */
 
 import AccordionController from "src/decidim/controllers/accordion/controller";
+import { screens } from "tailwindcss/defaultTheme"
 
 jest.mock("a11y-accordion-component", () => ({
   render: jest.fn(),
   destroy: jest.fn()
 }));
 
+const createController = (controllerElement) => {
+  const instance = Object.create(AccordionController.prototype);
+  Reflect.defineProperty(instance, "element", {
+    get: () => controllerElement,
+    configurable: true
+  });
+  return instance;
+};
+
 describe("AccordionController", () => {
   let controller = null;
   let accordionElement = null;
   let panel1 = null;
   let panel2 = null;
 
-  const createController = (controllerElement) => {
-    const ControllerClass = AccordionController;
-    const instance = Object.create(ControllerClass.prototype);
-    Reflect.defineProperty(instance, "element", {
-      get: () => controllerElement,
-      configurable: true
+  const mockMatchMedia = (matchesOrPredicate = false) => {
+    window.matchMedia = jest.fn().mockImplementation((query) => {
+      const matches = typeof matchesOrPredicate === "function"
+        ? matchesOrPredicate(query)
+        : matchesOrPredicate;
+      return {
+        matches,
+        media: query,
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn()
+      };
     });
-    return instance;
   };
 
   beforeEach(() => {
-    window.matchMedia = jest.fn().mockImplementation((query) => ({
-      matches: false,
-      media: query,
-      addListener: jest.fn(),
-      removeListener: jest.fn()
-    }));
-
+    mockMatchMedia(false);
     document.body.innerHTML = `
       <div id="test-accordion" data-controller="accordion">
         <button id="trigger-1" data-controls="panel-1">Trigger 1</button>
@@ -39,11 +47,9 @@ describe("AccordionController", () => {
         <div id="panel-2">Panel 2 Content</div>
       </div>
     `;
-
     accordionElement = document.getElementById("test-accordion");
     panel1 = document.getElementById("panel-1");
     panel2 = document.getElementById("panel-2");
-
     controller = createController(accordionElement);
   });
 
@@ -56,10 +62,8 @@ describe("AccordionController", () => {
     it("changes role from region to group when data-panel-role is group", () => {
       panel1.setAttribute("role", "region");
       panel2.setAttribute("role", "region");
-
       accordionElement.dataset.panelRole = "group";
       controller.fixPanelRole();
-
       expect(panel1.getAttribute("role")).toBe("group");
       expect(panel2.getAttribute("role")).toBe("group");
     });
@@ -67,52 +71,202 @@ describe("AccordionController", () => {
     it("removes role attribute when data-panel-role is none", () => {
       panel1.setAttribute("role", "region");
       panel2.setAttribute("role", "region");
-
       accordionElement.dataset.panelRole = "none";
       controller.fixPanelRole();
-
       expect(panel1.getAttribute("role")).toBeNull();
       expect(panel2.getAttribute("role")).toBeNull();
     });
 
-    it("does nothing when data-panel-role is not set", () => {
-      panel1.setAttribute("role", "region");
-      panel2.setAttribute("role", "region");
-
-      Reflect.deleteProperty(accordionElement.dataset, "panelRole");
-      controller.fixPanelRole();
-
-      expect(panel1.getAttribute("role")).toBe("region");
-      expect(panel2.getAttribute("role")).toBe("region");
-    });
-
-    it("does nothing when data-panel-role is empty", () => {
+    it("does nothing when data-panel-role is not set or empty", () => {
       panel1.setAttribute("role", "region");
-
-      accordionElement.dataset.panelRole = "";
       controller.fixPanelRole();
-
       expect(panel1.getAttribute("role")).toBe("region");
     });
 
     it("sets custom role value when data-panel-role is set", () => {
       panel1.setAttribute("role", "region");
-
       accordionElement.dataset.panelRole = "navigation";
       controller.fixPanelRole();
-
       expect(panel1.getAttribute("role")).toBe("navigation");
     });
 
     it("handles nonexistent panels gracefully", () => {
       accordionElement.dataset.panelRole = "group";
+      const trigger = document.createElement("button");
+      trigger.dataset.controls = "nonexistent-panel";
+      accordionElement.appendChild(trigger);
+      expect(() => controller.fixPanelRole()).not.toThrow();
+    });
+  });
 
-      const nonExistentTrigger = document.createElement("button");
-      nonExistentTrigger.dataset.controls = "nonexistent-panel";
-      accordionElement.appendChild(nonExistentTrigger);
+  describe("_applyBreakpointOpenAttributes", () => {
+    beforeEach(() => {
+      controller.initialize();
+    });
 
-      expect(() => controller.fixPanelRole()).not.toThrow();
+    it("removes data-open when no breakpoint matches and no original exists", () => {
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller._applyBreakpointOpenAttributes();
+      expect(accordionElement.querySelector("[data-controls]").hasAttribute("data-open")).toBe(false);
+    });
+
+    it("sets data-open from breakpoint attribute when viewport matches", () => {
+      mockMatchMedia((query) => query === `(min-width: ${screens.lg})`);
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller.initialize();
+      controller._applyBreakpointOpenAttributes();
+      expect(accordionElement.querySelector("[data-controls]").getAttribute("data-open")).toBe("true");
+    });
+
+    it("restores original data-open when breakpoint no longer matches", () => {
+      const lgQuery = `(min-width: ${screens.lg})`;
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open="false" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      const trigger = accordionElement.querySelector("[data-controls]");
+      controller.initialize();
+
+      mockMatchMedia((query) => query === lgQuery);
+      controller._applyBreakpointOpenAttributes();
+      expect(trigger.getAttribute("data-open")).toBe("true");
+
+      mockMatchMedia(() => false);
+      controller._applyBreakpointOpenAttributes();
+      expect(trigger.getAttribute("data-open")).toBe("false");
+    });
+
+    it("removes data-open when breakpoint stops matching and no original existed", () => {
+      const lgQuery = `(min-width: ${screens.lg})`;
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      const trigger = accordionElement.querySelector("[data-controls]");
+      controller.initialize();
+
+      mockMatchMedia((query) => query === lgQuery);
+      controller._applyBreakpointOpenAttributes();
+      expect(trigger.getAttribute("data-open")).toBe("true");
+
+      mockMatchMedia(() => false);
+      controller._applyBreakpointOpenAttributes();
+      expect(trigger.hasAttribute("data-open")).toBe(false);
+    });
+
+    it("applies the last matching breakpoint when multiple match", () => {
+      mockMatchMedia((query) =>
+        query === `(min-width: ${screens.sm})` || query === `(min-width: ${screens.lg})`
+      );
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-sm="false" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller.initialize();
+      controller._applyBreakpointOpenAttributes();
+      expect(accordionElement.querySelector("[data-controls]").getAttribute("data-open")).toBe("true");
+    });
+
+    it("leaves triggers without breakpoint attributes unchanged", () => {
+      controller.initialize();
+      controller._applyBreakpointOpenAttributes();
+      expect(accordionElement.querySelector("#trigger-1").hasAttribute("data-open")).toBe(false);
+      expect(accordionElement.querySelector("#trigger-2").hasAttribute("data-open")).toBe(false);
     });
   });
-});
 
+  describe("_listenForBreakpointChanges", () => {
+    beforeEach(() => {
+      controller.initialize();
+    });
+
+    it("registers change listeners for breakpoints with matching triggers", () => {
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller._listenForBreakpointChanges();
+      expect(window.matchMedia).toHaveBeenCalledWith(`(min-width: ${screens.lg})`);
+      expect(window.matchMedia.mock.results[0].value.addEventListener).toHaveBeenCalledWith("change", expect.any(Function));
+    });
+
+    it("skips breakpoints without matching triggers", () => {
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller._listenForBreakpointChanges();
+      expect(window.matchMedia).toHaveBeenCalledTimes(1);
+    });
+
+    it("registers nothing when there are no breakpoint triggers", () => {
+      controller._listenForBreakpointChanges();
+      expect(controller._mediaQueries.length).toBe(0);
+    });
+
+    it("registers listeners for multiple breakpoints", () => {
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-sm="true" data-open-lg="false">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller._listenForBreakpointChanges();
+      expect(window.matchMedia).toHaveBeenCalledWith(`(min-width: ${screens.sm})`);
+      expect(window.matchMedia).toHaveBeenCalledWith(`(min-width: ${screens.lg})`);
+      expect(controller._mediaQueries.length).toBe(2);
+    });
+  });
+
+  describe("_stopListeningForBreakpointChanges", () => {
+    beforeEach(() => {
+      controller.initialize();
+    });
+
+    it("removes all registered change listeners", () => {
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller._listenForBreakpointChanges();
+      const mql = window.matchMedia.mock.results[0].value;
+      controller._stopListeningForBreakpointChanges();
+      expect(mql.removeEventListener).toHaveBeenCalledWith("change", expect.any(Function));
+      expect(controller._mediaQueries.length).toBe(0);
+    });
+
+    it("does nothing when no listeners exist", () => {
+      expect(() => controller._stopListeningForBreakpointChanges()).not.toThrow();
+    });
+  });
+
+  describe("connect/disconnect/reconnect with breakpoints", () => {
+    beforeEach(() => {
+      controller.initialize();
+    });
+
+    it("connect applies breakpoint attributes and sets up listeners", () => {
+      const applySpy = jest.spyOn(controller, "_applyBreakpointOpenAttributes");
+      const listenSpy = jest.spyOn(controller, "_listenForBreakpointChanges");
+      controller.connect();
+      expect(applySpy).toHaveBeenCalled();
+      expect(listenSpy).toHaveBeenCalled();
+    });
+
+    it("disconnect tears down breakpoint listeners", () => {
+      const spy = jest.spyOn(controller, "_stopListeningForBreakpointChanges");
+      controller.disconnect();
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it("reconnect re-evaluates breakpoint attributes", () => {
+      const spy = jest.spyOn(controller, "_applyBreakpointOpenAttributes");
+      controller.reconnect({});
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -2,6 +2,9 @@ import { Controller } from "@hotwired/stimulus"
 import Accordions from "a11y-accordion-component";
 import { screens } from "tailwindcss/defaultTheme"
 export default class extends Controller {
+  initialize() {
+    this._originalOpenValues = new WeakMap();
+  }
 
   /**
    * Create accordion from a component
@@ -16,21 +19,8 @@ export default class extends Controller {
     accordionOptions.isMultiSelectable = this.element.dataset.multiselectable !== "false";
     accordionOptions.isCollapsible = this.element.dataset.collapsible !== "false";
 
-    // This snippet allows to change the OPEN data-attribute based on the current viewport
-    // Just include the breakpoint where the different value will be applied from.
-    // Ex:
-    // data-open="false" data-open-md="true"
-    Object.keys(screens).forEach((key) => {
-      if (!this.isScreenSize(key)) {
-        return;
-      }
-
-      const elementsToOpen = this.element.querySelectorAll(`[data-controls][data-open-${key}]`);
-
-      elementsToOpen.forEach((elem) => {
-        (elem.dataset.open = elem.dataset[`open-${key}`.replace(/-([a-z])/g, (str) => str[1].toUpperCase())])
-      })
-    })
+    this._applyBreakpointOpenAttributes();
+    this._listenForBreakpointChanges();
 
     if (!this.element.id) {
       // when component has no id, we enforce to have it one
@@ -59,20 +49,106 @@ export default class extends Controller {
     }
 
     if (this.boundExpand) {
-      this.toggleButton.addEventListener("click", this.boundExpand);
+      this.toggleButton.removeEventListener("click", this.boundExpand);
     }
+
+    this._stopListeningForBreakpointChanges();
   }
 
   reconnect(event) {
     this.disconnect();
 
-    if (event.detail && event.detail.collapse) {
+    if (event && event.detail && event.detail.collapse) {
       this.previouslyExpanded = false;
     }
 
     this.connect();
   }
 
+  /**
+   * Applies viewport-conditional data-open attributes and resets
+   * previously applied values when the viewport no longer matches.
+   *
+   * @returns {void}
+   */
+  _applyBreakpointOpenAttributes() {
+    const controlledTriggers = new Set();
+
+    Object.keys(screens).forEach((key) => {
+      this.element.querySelectorAll(`[data-controls][data-open-${key}]`).forEach((elem) => {
+        controlledTriggers.add(elem);
+
+        if (!this._originalOpenValues.has(elem)) {
+          this._originalOpenValues.set(elem, elem.getAttribute("data-open"));
+        }
+      });
+    });
+
+    // Reset all controlled triggers to their original data-open state
+    controlledTriggers.forEach((elem) => {
+      const original = this._originalOpenValues.get(elem);
+      if (original === null) {
+        elem.removeAttribute("data-open");
+      } else {
+        elem.setAttribute("data-open", original);
+      }
+    });
+
+    // Apply breakpoint-specific values for the current viewport
+    Object.keys(screens).forEach((key) => {
+      if (!this.isScreenSize(key)) {
+        return;
+      }
+
+      this.element.querySelectorAll(`[data-controls][data-open-${key}]`).forEach((elem) => {
+        elem.dataset.open = elem.getAttribute(`data-open-${key}`);
+      });
+    });
+  }
+
+  /**
+   * Listens for viewport changes that cross breakpoints relevant
+   * to this accordion and reconnects to keep state in sync.
+   *
+   * @returns {void}
+   */
+  _listenForBreakpointChanges() {
+    this._mediaQueries = [];
+
+    Object.keys(screens).forEach((key) => {
+      const hasRelevantTriggers = this.element.querySelector(`[data-controls][data-open-${key}]`);
+      if (!hasRelevantTriggers) {
+        return;
+      }
+
+      const mql = window.matchMedia(`(min-width: ${screens[key]})`);
+      const handler = () => {
+        this.reconnect({ detail: { collapse: true } });
+      };
+
+      if (mql.addEventListener) {
+        mql.addEventListener("change", handler);
+      } else if (mql.addListener) {
+        mql.addListener(handler);
+      }
+
+      this._mediaQueries.push({ mql, handler });
+    });
+  }
+
+  _stopListeningForBreakpointChanges() {
+    if (this._mediaQueries) {
+      this._mediaQueries.forEach(({ mql, handler }) => {
+        if (mql.removeEventListener) {
+          mql.removeEventListener("change", handler);
+        } else if (mql.removeListener) {
+          mql.removeListener(handler);
+        }
+      });
+      this._mediaQueries = [];
+    }
+  }
+
   expandIfNeeded()
   {
     if (!this.toggleButton) {

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

@@ -47,6 +47,12 @@ export default class extends Controller {
       this.element.id = `dropdown-${Math.random().toString(36).substring(7)}`
     }
 
+    if (!this.element.hasAttribute("aria-expanded")) {
+      this.element.setAttribute("aria-expanded", dropdownOptions.isOpen
+        ? "true"
+        : "false");
+    }
+
     const autofocus = this.element.dataset.autofocus;
     if (autofocus) {
       // set the focus to some inner element, use setTimeout hack due to waiting for element to display

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

@@ -142,6 +142,34 @@ describe("DropdownController", () => {
     });
   });
 
+  describe("aria-expanded initialization", () => {
+    it("sets aria-expanded to false when missing and isOpen is false", () => {
+      const testController = createController(element);
+
+      testController.connect();
+
+      expect(element.getAttribute("aria-expanded")).toBe("false");
+    });
+
+    it("sets aria-expanded to true when missing and data-open is true", () => {
+      element.setAttribute("data-open", "true");
+      const testController = createController(element);
+
+      testController.connect();
+
+      expect(element.getAttribute("aria-expanded")).toBe("true");
+    });
+
+    it("does not override existing aria-expanded attribute", () => {
+      element.setAttribute("aria-expanded", "true");
+      const testController = createController(element);
+
+      testController.connect();
+
+      expect(element.getAttribute("aria-expanded")).toBe("true");
+    });
+  });
+
   describe("data-add-aria-roles option", () => {
     it("keeps role menu when data-add-aria-roles is true", () => {
       element.setAttribute("data-add-aria-roles", "true");

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

@@ -34,6 +34,10 @@ export default class extends Controller {
     this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this)
     this.focusTrapHandler = this.focusTrapHandler.bind(this)
 
+    if (!this.menuButton.hasAttribute("aria-expanded")) {
+      this.menuButton.setAttribute("aria-expanded", "false");
+    }
+
     this.menuButton.addEventListener("click", this.handleButtonClick)
     this.menuContainer.addEventListener("click", this.handleContainerClick)