Merge branch '4.x' of github.com:NickDJM/accessible-menu into fix-doc…

…s-about-ids
NickDJM · May 8, 2024 · e9b5d31 · e9b5d31
2 parents 83d8081 + 80a7697
commit e9b5d31
Show file tree

Hide file tree

Showing 6 changed files with 295 additions and 1 deletion.
diff --git a/src/_baseMenuToggle.js b/src/_baseMenuToggle.js
@@ -187,7 +187,7 @@ class BaseMenuToggle {
       const randomString = Math.random()
         .toString(36)
         .replace(/[^a-z]+/g, "")
-        .substr(0, 10);
+        .substring(0, 10);
 
       let id = this.dom.toggle.innerText?.replace(/[^a-zA-Z0-9\s]/g, "") || "";
       let finalID = randomString;

diff --git a/tests/menus/DisclosureMenuToggle/protected.test.js b/tests/menus/DisclosureMenuToggle/protected.test.js
@@ -27,4 +27,24 @@ describe("DisclosureMenuToggle protected methods", () => {
       );
     });
   });
+
+  // Test DisclosureMenuToggle _setIds().
+  describe("_setIds", () => {
+    // Test that DisclosureMenuToggle implements the BaseMenuToggle _setIds.
+    it("should implement the BaseMenuToggle _setIds", () => {
+      expect(DisclosureMenuToggle.prototype._setIds).toBe(
+        BaseMenuToggle.prototype._setIds
+      );
+    });
+  });
+
+  // Test DisclosureMenuToggle _setAriaAttributes().
+  describe("_setAriaAttributes", () => {
+    // Test that DisclosureMenuToggle implements the BaseMenuToggle _setAriaAttributes.
+    it("should implement the BaseMenuToggle _setAriaAttributes", () => {
+      expect(DisclosureMenuToggle.prototype._setAriaAttributes).toBe(
+        BaseMenuToggle.prototype._setAriaAttributes
+      );
+    });
+  });
 });
diff --git a/tests/menus/MenubarToggle/protected.test.js b/tests/menus/MenubarToggle/protected.test.js
@@ -27,4 +27,24 @@ describe("MenubarToggle protected methods", () => {
       );
     });
   });
+
+  // Test MenubarToggle _setIds().
+  describe("_setIds", () => {
+    // Test that MenubarToggle implements the BaseMenuToggle _setIds.
+    it("should implement the BaseMenuToggle _setIds", () => {
+      expect(MenubarToggle.prototype._setIds).toBe(
+        BaseMenuToggle.prototype._setIds
+      );
+    });
+  });
+
+  // Test MenubarToggle _setAriaAttributes().
+  describe("_setAriaAttributes", () => {
+    // Test that MenubarToggle implements the BaseMenuToggle _setAriaAttributes.
+    it("should implement the BaseMenuToggle _setAriaAttributes", () => {
+      expect(MenubarToggle.prototype._setAriaAttributes).toBe(
+        BaseMenuToggle.prototype._setAriaAttributes
+      );
+    });
+  });
 });
diff --git a/tests/menus/TopLinkDisclosureMenuToggle/protected.test.js b/tests/menus/TopLinkDisclosureMenuToggle/protected.test.js
@@ -27,4 +27,24 @@ describe("TopLinkDisclosureMenuToggle protected methods", () => {
       );
     });
   });
+
+  // Test TopLinkDisclosureMenuToggle _setIds().
+  describe("_setIds", () => {
+    // Test that TopLinkDisclosureMenuToggle implements the BaseMenuToggle _setIds.
+    it("should implement the BaseMenuToggle _setIds", () => {
+      expect(TopLinkDisclosureMenuToggle.prototype._setIds).toBe(
+        BaseMenuToggle.prototype._setIds
+      );
+    });
+  });
+
+  // Test TopLinkDisclosureMenuToggle _setAriaAttributes().
+  describe("_setAriaAttributes", () => {
+    // Test that TopLinkDisclosureMenuToggle implements the BaseMenuToggle _setAriaAttributes.
+    it("should implement the BaseMenuToggle _setAriaAttributes", () => {
+      expect(TopLinkDisclosureMenuToggle.prototype._setAriaAttributes).toBe(
+        BaseMenuToggle.prototype._setAriaAttributes
+      );
+    });
+  });
 });
diff --git a/tests/menus/TreeviewToggle/protected.test.js b/tests/menus/TreeviewToggle/protected.test.js
@@ -27,4 +27,24 @@ describe("TreeviewToggle protected methods", () => {
       );
     });
   });
+
+  // Test TreeviewToggle _setIds().
+  describe("_setIds", () => {
+    // Test that TreeviewToggle implements the BaseMenuToggle _setIds.
+    it("should implement the BaseMenuToggle _setIds", () => {
+      expect(TreeviewToggle.prototype._setIds).toBe(
+        BaseMenuToggle.prototype._setIds
+      );
+    });
+  });
+
+  // Test TreeviewToggle _setAriaAttributes().
+  describe("_setAriaAttributes", () => {
+    // Test that TreeviewToggle implements the BaseMenuToggle _setAriaAttributes.
+    it("should implement the BaseMenuToggle _setAriaAttributes", () => {
+      expect(TreeviewToggle.prototype._setAriaAttributes).toBe(
+        BaseMenuToggle.prototype._setAriaAttributes
+      );
+    });
+  });
 });
diff --git a/tests/menus/_baseMenuToggle/protected.test.js b/tests/menus/_baseMenuToggle/protected.test.js
@@ -437,4 +437,218 @@ describe("BaseMenuToggle protected methods", () => {
       );
     });
   });
+
+  describe("_setIds", () => {
+    // Test that _setIds sets the toggle's id attribute to a generated value when it doesn't have an existing id.
+    it("should set the toggle's id attribute to a generated value when it doesn't have an existing id", () => {
+      // Create a new BaseMenu instance for testing.
+      const menu = new BaseMenu({
+        menuElement: document.querySelector("ul"),
+        submenuItemSelector: "li.dropdown",
+        containerElement: document.querySelector("nav"),
+        controllerElement: document.querySelector("button"),
+      });
+      initializeMenu(menu);
+
+      const menuToggle = menu.elements.submenuToggles[0];
+      menuToggle.dom.toggle.removeAttribute("id");
+
+      // Call _setIds.
+      menuToggle._setIds();
+
+      // Get the generated id.
+      const generatedId = menuToggle.dom.toggle.getAttribute("id");
+
+      // Test the generated id.
+      // The pattern for the generated id is "menu-button{- optional menu toggle's inner text}-{a string 1-10 characters long}".
+      expect(generatedId).toMatch(/^menu-button(-.*)?-[a-z]{1,10}$/);
+    });
+
+    // Test that _setIds does not change the toggle's id attribute when it already has an id.
+    it("should not change the toggle's id attribute when it already has an id", () => {
+      // Create a new BaseMenu instance for testing.
+      const menu = new BaseMenu({
+        menuElement: document.querySelector("ul"),
+        submenuItemSelector: "li.dropdown",
+        containerElement: document.querySelector("nav"),
+        controllerElement: document.querySelector("button"),
+      });
+      initializeMenu(menu);
+
+      const menuToggle = menu.elements.submenuToggles[0];
+      menuToggle.dom.toggle.setAttribute("id", "test-id");
+
+      // Call _setIds.
+      menuToggle._setIds();
+
+      // Test the toggle's id.
+      expect(menuToggle.dom.toggle.getAttribute("id")).toBe("test-id");
+    });
+
+    // Test that _setIds sets the toggle's parent's id attribute to a generated value when it doesn't have an existing id.
+    it("should set the toggle's parent's id attribute to a generated value when it doesn't have an existing id", () => {
+      // Create a new BaseMenu instance for testing.
+      const menu = new BaseMenu({
+        menuElement: document.querySelector("ul"),
+        submenuItemSelector: "li.dropdown",
+        containerElement: document.querySelector("nav"),
+        controllerElement: document.querySelector("button"),
+      });
+      initializeMenu(menu);
+
+      const menuToggle = menu.elements.submenuToggles[0];
+      menuToggle.elements.controlledMenu.dom.menu.removeAttribute("id");
+
+      // Call _setIds.
+      menuToggle._setIds();
+
+      // Get the generated id.
+      const generatedId =
+        menuToggle.elements.controlledMenu.dom.menu.getAttribute("id");
+
+      // Test the generated id.
+      // The pattern for the generated id is "menu{- optional menu toggle's inner text}-{a string 1-10 characters long}".
+      expect(generatedId).toMatch(/^menu(-.*)?-[a-z]{1,10}$/);
+    });
+
+    // Test that _setIds does not change the toggle's parent's id attribute when it already has an id.
+    it("should not change the toggle's parent's id attribute when it already has an id", () => {
+      // Create a new BaseMenu instance for testing.
+      const menu = new BaseMenu({
+        menuElement: document.querySelector("ul"),
+        submenuItemSelector: "li.dropdown",
+        containerElement: document.querySelector("nav"),
+        controllerElement: document.querySelector("button"),
+      });
+      initializeMenu(menu);
+
+      const menuToggle = menu.elements.submenuToggles[0];
+      menuToggle.elements.controlledMenu.dom.menu.setAttribute("id", "test-id");
+
+      // Call _setIds.
+      menuToggle._setIds();
+
+      // Test the toggle's parent's id.
+      expect(
+        menuToggle.elements.controlledMenu.dom.menu.getAttribute("id")
+      ).toBe("test-id");
+    });
+  });
+
+  describe("_setAriaAttributes", () => {
+    // Test that _setAriaAttributes sets the toggle's aria-haspopup attribute to true.
+    it("should set the toggle's aria-haspopup attribute to true", () => {
+      // Create a new BaseMenu instance for testing.
+      const menu = new BaseMenu({
+        menuElement: document.querySelector("ul"),
+        submenuItemSelector: "li.dropdown",
+        containerElement: document.querySelector("nav"),
+        controllerElement: document.querySelector("button"),
+      });
+      initializeMenu(menu);
+
+      const menuToggle = menu.elements.submenuToggles[0];
+      menuToggle.dom.toggle.removeAttribute("aria-haspopup");
+
+      // Call _setAriaAttributes.
+      menuToggle._setAriaAttributes();
+
+      // Test the toggle's aria-haspopup attribute.
+      expect(menuToggle.dom.toggle.getAttribute("aria-haspopup")).toBe("true");
+    });
+
+    // Test that _setAriaAttributes sets the toggle's aria-expanded attribute to false.
+    it("should set the toggle's aria-expanded attribute to false", () => {
+      // Create a new BaseMenu instance for testing.
+      const menu = new BaseMenu({
+        menuElement: document.querySelector("ul"),
+        submenuItemSelector: "li.dropdown",
+        containerElement: document.querySelector("nav"),
+        controllerElement: document.querySelector("button"),
+      });
+      initializeMenu(menu);
+
+      const menuToggle = menu.elements.submenuToggles[0];
+      menuToggle.dom.toggle.removeAttribute("aria-expanded");
+
+      // Call _setAriaAttributes.
+      menuToggle._setAriaAttributes();
+
+      // Test the toggle's aria-expanded attribute.
+      expect(menuToggle.dom.toggle.getAttribute("aria-expanded")).toBe("false");
+    });
+
+    // Test that _setAriaAttributes sets the toggle's role attribute to button if the toggle is not a button.
+    // @todo Make a test for when the toggle _is_ a button. This will require a new menu template.
+    it("should set the toggle's role attribute to button if the toggle is not a button", () => {
+      // Create a new BaseMenu instance for testing.
+      const menu = new BaseMenu({
+        menuElement: document.querySelector("ul"),
+        submenuItemSelector: "li.dropdown",
+        containerElement: document.querySelector("nav"),
+        controllerElement: document.querySelector("button"),
+      });
+      initializeMenu(menu);
+
+      const menuToggle = menu.elements.submenuToggles[0];
+      menuToggle.dom.toggle.removeAttribute("role");
+
+      // Call _setAriaAttributes.
+      menuToggle._setAriaAttributes();
+
+      // Test the toggle's role attribute.
+      expect(menuToggle.dom.toggle.getAttribute("role")).toBe("button");
+    });
+
+    // Test that _setAriaAttributes sets the toggle's aria-controls attribute to the controlled menu's id.
+    it("should set the toggle's aria-controls attribute to the controlled menu's id", () => {
+      // Create a new BaseMenu instance for testing.
+      const menu = new BaseMenu({
+        menuElement: document.querySelector("ul"),
+        submenuItemSelector: "li.dropdown",
+        containerElement: document.querySelector("nav"),
+        controllerElement: document.querySelector("button"),
+      });
+      initializeMenu(menu);
+
+      const menuToggle = menu.elements.submenuToggles[0];
+      menuToggle.dom.toggle.removeAttribute("aria-controls");
+
+      // Call _setAriaAttributes.
+      menuToggle._setAriaAttributes();
+
+      // Test the toggle's aria-controls attribute.
+      expect(menuToggle.dom.toggle.getAttribute("aria-controls")).toBe(
+        menuToggle.elements.controlledMenu.dom.menu.id
+      );
+    });
+
+    // Test that _setAriaAttributes sets the controlled menu's aria-labelledby attribute to the toggle's id.
+    it("should set the controlled menu's aria-labelledby attribute to the toggle's id", () => {
+      // Create a new BaseMenu instance for testing.
+      const menu = new BaseMenu({
+        menuElement: document.querySelector("ul"),
+        submenuItemSelector: "li.dropdown",
+        containerElement: document.querySelector("nav"),
+        controllerElement: document.querySelector("button"),
+      });
+      initializeMenu(menu);
+
+      const menuToggle = menu.elements.submenuToggles[0];
+      menuToggle.dom.toggle.removeAttribute("id");
+      menuToggle.elements.controlledMenu.dom.menu.removeAttribute(
+        "aria-labelledby"
+      );
+
+      // Call _setAriaAttributes.
+      menuToggle._setAriaAttributes();
+
+      // Test the controlled menu's aria-labelledby attribute.
+      expect(
+        menuToggle.elements.controlledMenu.dom.menu.getAttribute(
+          "aria-labelledby"
+        )
+      ).toBe(menuToggle.dom.toggle.id);
+    });
+  });
 });