@ministryofjustice/frontend 2.2.5 → 3.0.1

package/moj/components/button-menu/button-menu.spec.js

@@ -0,0 +1,363 @@
+const { queryByRole, screen } = require("@testing-library/dom");
+const { userEvent } = require("@testing-library/user-event");
+const { configureAxe, toHaveNoViolations } = require("jest-axe");
+expect.extend(toHaveNoViolations);
+
+require("../../../../jest.setup.js");
+require("./button-menu.js");
+
+const user = userEvent.setup();
+const axe = configureAxe({
+  rules: {
+    // disable landmark rules when testing isolated components.
+    region: { enabled: false },
+  },
+});
+
+const kebabize = (str) => {
+  return str.replace(
+    /[A-Z]+(?![a-z])|[A-Z]/g,
+    ($, ofset) => (ofset ? "-" : "") + $.toLowerCase(),
+  );
+};
+
+const configToDataAttributes = (config) => {
+  let attributes = "";
+  for (let [key, value] of Object.entries(config)) {
+    attributes += `data-${kebabize(key)}="${value}" `;
+  }
+  return attributes;
+};
+
+const createComponent = (config = {}, html) => {
+  const dataAttributes = configToDataAttributes(config);
+  if(typeof html === "undefined") {
+  html = `
+      <div class="moj-button-menu" data-module="moj-button-menu" ${dataAttributes}>
+          <a href="#one" role="button">First action</a>
+          <a href="#two" role="button" class="govuk-button--warning">Second action</a>
+          <a href="#three" role="button" class="custom-class">Third action</a>
+      </div>`;
+  }
+  document.body.insertAdjacentHTML("afterbegin", html);
+
+  component = document.querySelector('[data-module="moj-button-menu"]');
+  return component;
+};
+
+describe("Button menu with defaults", () => {
+  let component;
+  let toggleButton;
+  let menu;
+  let items;
+
+  beforeEach(() => {
+    component = createComponent();
+    new MOJFrontend.ButtonMenu(component).init();
+
+    toggleButton = queryByRole(component, "button", { hidden: false });
+    menu = screen.queryByRole("list", { hidden: true });
+    items = menu?.querySelectorAll("a, button");
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  test("initialises component elements", () => {
+    expect(toggleButton).not.toBeNull();
+    expect(menu).not.toBeNull();
+    expect(items).not.toBeNull();
+  });
+
+  test("intialises toggle button", () => {
+    expect(component).toContainElement(toggleButton);
+    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
+    expect(toggleButton).toHaveAttribute("aria-haspopup", "true");
+  });
+
+  test("intialises menu", () => {
+    expect(component).toContainElement(menu);
+    expect(menu).not.toBeVisible();
+  });
+
+  test("creates menuitems", () => {
+    expect(items.length).toBe(3);
+  });
+
+  test("removes other govuk-button classes from menuitems", () => {
+    expect(items[1]).not.toHaveClass("govuk-button--warning");
+  });
+
+  test("keeps custom classes on items", () => {
+    expect(items[2]).toHaveClass("custom-class");
+  });
+
+  test("clicking toggle button shows menu", async () => {
+    await user.click(toggleButton);
+
+    expect(menu).toBeVisible();
+    expect(toggleButton).toHaveAttribute("aria-expanded", "true");
+  });
+
+  test("clicking a link in the menu", async () => {
+    await user.click(toggleButton);
+
+    expect(menu).toBeVisible();
+    await user.click(items[0]);
+    expect(global.window.location.hash).toContain("#one");
+    await user.click(items[2]);
+    expect(global.window.location.hash).toContain("#three");
+  });
+
+  test("clicking outside closes menu", async () => {
+    await user.click(toggleButton);
+    expect(menu).toBeVisible();
+
+    await user.click(document.body);
+    expect(menu).not.toBeVisible();
+  });
+
+  describe("keyboard interactions", () => {
+    test("enter on toggle button opens menu", async () => {
+      toggleButton.focus();
+      await user.keyboard("[Enter]");
+
+      expect(menu).toBeVisible();
+      expect(toggleButton).toHaveAttribute("aria-expanded", "true");
+      expect(items[0]).toHaveFocus();
+    });
+
+    test("space on toggle button opens menu", async () => {
+      toggleButton.focus();
+      await user.keyboard("[Space]");
+
+      expect(menu).toBeVisible();
+      expect(toggleButton).toHaveAttribute("aria-expanded", "true");
+      expect(items[0]).toHaveFocus();
+    });
+
+    test("esc closes menu", async () => {
+      toggleButton.focus();
+      await user.keyboard("[Space]");
+      expect(menu).toBeVisible();
+      await user.keyboard("[Escape]");
+
+      expect(menu).not.toBeVisible();
+      expect(toggleButton).toHaveFocus();
+    });
+
+    test("down arrow on toggle button opens menu with focus on first item", async () => {
+      toggleButton.focus();
+      await user.keyboard("[ArrowDown]");
+
+      expect(menu).toBeVisible();
+      expect(toggleButton).toHaveAttribute("aria-expanded", "true");
+      expect(items[0]).toHaveFocus();
+    });
+
+    test("up arrow on toggle button opens menu with focus on last item", async () => {
+      toggleButton.focus();
+      await user.keyboard("[ArrowUp]");
+
+      expect(menu).toBeVisible();
+      expect(toggleButton).toHaveAttribute("aria-expanded", "true");
+      expect(items[items.length - 1]).toHaveFocus();
+    });
+
+    test("down arrow on menu item navigates to next item with looping", async () => {
+      toggleButton.focus();
+      await user.keyboard("[Enter]");
+      expect(items[0]).toHaveFocus();
+
+      await user.keyboard("[ArrowDown]");
+      expect(items[1]).toHaveFocus();
+
+      await user.keyboard("[ArrowDown]");
+      expect(items[2]).toHaveFocus();
+
+      await user.keyboard("[ArrowDown]");
+      expect(items[0]).toHaveFocus();
+    });
+
+    test("up arrow on menu item navigates to previous item with looping", async () => {
+      toggleButton.focus();
+      await user.keyboard("[ArrowUp]");
+      expect(items[items.length - 1]).toHaveFocus();
+
+      await user.keyboard("[ArrowUp]");
+      expect(items[1]).toHaveFocus();
+
+      await user.keyboard("[ArrowUp]");
+      expect(items[0]).toHaveFocus();
+
+      await user.keyboard("[ArrowUp]");
+      expect(items[items.length - 1]).toHaveFocus();
+    });
+
+    test("home navigates to first item", async () => {
+      toggleButton.focus();
+      await user.keyboard("[ArrowUp]");
+      expect(items[items.length - 1]).toHaveFocus();
+
+      await user.keyboard("[Home]");
+      expect(items[0]).toHaveFocus();
+    });
+
+    test("end navigates to last item", async () => {
+      toggleButton.focus();
+      await user.keyboard("[Enter]");
+      expect(items[0]).toHaveFocus();
+
+      await user.keyboard("[End]");
+      expect(items[items.length - 1]).toHaveFocus();
+    });
+
+    test("tab moves focus out of the menu", async () => {
+      toggleButton.focus();
+      await user.keyboard("[Enter]");
+      expect(menu).toBeVisible();
+      expect(items[0]).toHaveFocus();
+      await user.tab();
+
+      expect(document.body).toHaveFocus();
+      expect(menu).not.toBeVisible();
+    });
+  });
+
+  describe("accessibility", () => {
+    test("component has no wcag violations", async () => {
+      expect(await axe(document.body)).toHaveNoViolations();
+      await user.click(toggleButton);
+      expect(await axe(document.body)).toHaveNoViolations();
+    });
+  });
+});
+
+describe("Button menu javascript API", () => {
+  let component;
+
+  beforeEach(() => {
+    component = createComponent();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  test("setting toggle button text", () => {
+    const label = "click me";
+    new MOJFrontend.ButtonMenu(component, { buttonText: label }).init();
+    const toggleButton = queryByRole(component, "button", { name: label });
+
+    expect(toggleButton).not.toBeNull;
+  });
+
+  test("setting menu alignment", () => {
+    new MOJFrontend.ButtonMenu(component, { alignMenu: "right" }).init();
+    const menu = screen.queryByRole("list", { hidden: true });
+
+    expect(menu).toHaveClass("moj-button-menu__wrapper--right");
+  });
+
+  test("setting button classes", () => {
+    const defaultClassNames = "govuk-button moj-button-menu__toggle-button";
+    const classNames = "classOne classTwo";
+
+    new MOJFrontend.ButtonMenu(component, { buttonClasses: classNames }).init();
+    const toggleButton = queryByRole(component, "button", { hidden: false });
+
+    expect(toggleButton).toHaveClass(defaultClassNames);
+    expect(toggleButton).toHaveClass(classNames);
+  });
+});
+
+describe("Button menu data-attributes API", () => {
+  let component;
+
+  beforeEach(() => {});
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  test("setting toggle button text", () => {
+    const label = "click me";
+
+    component = createComponent({ buttonText: label });
+    new MOJFrontend.ButtonMenu(component).init();
+    const toggleButton = queryByRole(component, "button", { name: label });
+
+    expect(toggleButton).not.toBeNull();
+  });
+
+  test("setting menu alignment", () => {
+    component = createComponent({ alignMenu: "right" });
+    new MOJFrontend.ButtonMenu(component).init();
+    const menu = screen.queryByRole("list", { hidden: true });
+
+    expect(menu).toHaveClass("moj-button-menu__wrapper--right");
+  });
+
+  test("setting button classes", () => {
+    const defaultClassNames = "govuk-button moj-button-menu__toggle-button";
+    const classNames = "classOne classTwo";
+
+    component = createComponent({ buttonClasses: classNames });
+    new MOJFrontend.ButtonMenu(component).init();
+    const toggleButton = queryByRole(component, "button", { hidden: false });
+
+    expect(toggleButton).toHaveClass(defaultClassNames);
+    expect(toggleButton).toHaveClass(classNames);
+  });
+});
+
+describe("menu button with a single item", () => {
+  let component;
+  let toggleButton;
+  let menu;
+  let items;
+
+  beforeEach(() => {
+    const html = `
+      <div class="moj-button-menu" data-module="moj-button-menu" data-button-classes="govuk-button--warning custom-class">
+          <a href="#one" role="button" class="govuk-button--inverse">First action</a>
+      </div>`;
+
+    component = createComponent({}, html);
+    new MOJFrontend.ButtonMenu(component).init();
+
+    toggleButton = queryByRole(component, "button", { name: "Actions" });
+    menu = screen.queryByRole("list", { hidden: true });
+    items = menu?.queryByRole("button", { hidden: true });
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  test("menu is not created", () => {
+    expect(menu).toBeNull();
+  });
+
+  test("there are no items", () => {
+    expect(items).toBeUndefined();
+  });
+
+  test("there is no toggle button", () => {
+    expect(toggleButton).toBeNull();
+  });
+
+  test("first item has become button", () => {
+    const button = screen.queryByRole("button", { name: "First action" });
+
+    expect(button).not.toBeNull();
+  });
+
+  test("first item has buttonClasses config applied", () => {
+    const button = screen.queryByRole("button", { name: "First action" });
+
+    expect(button).toHaveClass("govuk-button--warning", "custom-class");
+    expect(button).not.toHaveClass("govuk-button--inverse");
+  });
+});

package/moj/components/button-menu/template.njk

@@ -1,11 +1,38 @@
 {%- from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/macros/attributes.njk" import govukAttributes %}
 
-<div class="moj-button-menu {{- ' ' + params.classes if params.classes }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <div class="moj-button-menu__wrapper">
+{#- Set classes for this component #}
+{%- set classNames = "moj-button-menu" -%}
+{%- set itemClassNames = "moj-button-menu__item govuk-button--secondary" %}
+
+{%- if params.classes %}
+  {% set classNames = classNames + " " + params.classes %}
+{% endif %}
+
+{%- set buttonAttributes = {
+  "data-button-text": {
+    value: params.button.text, 
+    optional: true
+    },
+  "data-button-classes": {
+    value: params.button.classes,
+    optional: true 
+  },
+  "data-align-menu": {
+    value: params.alignMenu,
+    optional: true
+  }
+}
+%}
+
+<div class="{{- classNames -}}" data-module="moj-button-menu" {{- govukAttributes(params.attributes) -}}  {{- govukAttributes(buttonAttributes) -}}>
     {%- for item in params.items %}
-      {{ govukButton({
+      {%- if item.classes %}
+      {% set itemClassNames = itemClassNames + " " + item.classes %}
+  {% endif %}
+  {{ govukButton({
           element: item.element,
-          classes: 'moj-button-menu__item ' + (item.classes if item.classes) + ' ' + (params.buttonClasses if params.buttonClasses),
+          classes: itemClassNames,
           text: item.text,
           html: item.html,
           name: item.name,
@@ -15,8 +42,7 @@
           disabled: item.disabled,
           attributes: item.attributes,
           preventDoubleClick: items.preventDoubleClick
-        }) }}
+          }) }}
     {% endfor -%}
-  </div>
 </div>
 

package/moj/components/date-picker/date-picker.js

@@ -94,7 +94,7 @@ Datepicker.prototype.init = function () {
 
   this.setOptions();
   this.initControls();
-  this.$module.setAttribute('data-initialized', 'true')
+  this.$module.setAttribute("data-initialized", "true");
 };
 
 Datepicker.prototype.initControls = function () {
@@ -203,6 +203,7 @@ Datepicker.prototype.createDialog = function () {
   $dialog.setAttribute("aria-modal", "true");
   $dialog.setAttribute("aria-labelledby", titleId);
   $dialog.innerHTML = this.dialogTemplate(titleId);
+  $dialog.hidden = true;
 
   return $dialog;
 };
@@ -340,20 +341,14 @@ Datepicker.prototype.setOptions = function () {
 
 Datepicker.prototype.setMinAndMaxDatesOnCalendar = function () {
   if (this.config.minDate) {
-    this.minDate = this.formattedDateFromString(
-      this.config.minDate,
-      null,
-    );
+    this.minDate = this.formattedDateFromString(this.config.minDate, null);
     if (this.minDate && this.currentDate < this.minDate) {
       this.currentDate = this.minDate;
     }
   }
 
   if (this.config.maxDate) {
-    this.maxDate = this.formattedDateFromString(
-      this.config.maxDate,
-      null,
-    );
+    this.maxDate = this.formattedDateFromString(this.config.maxDate, null);
     if (this.maxDate && this.currentDate > this.maxDate) {
       this.currentDate = this.maxDate;
     }
@@ -483,7 +478,7 @@ Datepicker.prototype.formattedDateFromString = function (
   const month = match[3];
   const year = match[4];
 
-  formattedDate = new Date(`${month}-${day}-${year}`);
+  formattedDate = new Date(`${year}-${month}-${day}`);
   if (formattedDate instanceof Date && !isNaN(formattedDate)) {
     return formattedDate;
   }
@@ -571,7 +566,6 @@ Datepicker.prototype.updateCalendar = function () {
 
 Datepicker.prototype.setCurrentDate = function (focus = true) {
   const { currentDate } = this;
-
   this.calendarDays.forEach((calendarDay) => {
     calendarDay.button.classList.add("moj-datepicker__button");
     calendarDay.button.classList.add("moj-datepicker__calendar-day");
@@ -599,10 +593,10 @@ Datepicker.prototype.setCurrentDate = function (focus = true) {
       calendarDayDate.getTime() === this.inputDate.getTime()
     ) {
       calendarDay.button.classList.add(this.currentDayButtonClass);
-      calendarDay.button.setAttribute("aria-selected", true);
+      calendarDay.button.setAttribute("aria-current", "date");
     } else {
       calendarDay.button.classList.remove(this.currentDayButtonClass);
-      calendarDay.button.removeAttribute("aria-selected");
+      calendarDay.button.removeAttribute("aria-current");
     }
 
     if (calendarDayDate.getTime() === today.getTime()) {
@@ -657,6 +651,7 @@ Datepicker.prototype.toggleDialog = function (event) {
 };
 
 Datepicker.prototype.openDialog = function () {
+  this.$dialog.hidden = false;
   this.$dialog.classList.add("moj-datepicker__dialog--open");
   this.$calendarButton.setAttribute("aria-expanded", "true");
 
@@ -677,6 +672,7 @@ Datepicker.prototype.openDialog = function () {
 };
 
 Datepicker.prototype.closeDialog = function () {
+  this.$dialog.hidden = true;
   this.$dialog.classList.remove("moj-datepicker__dialog--open");
   this.$calendarButton.setAttribute("aria-expanded", "false");
   this.$calendarButton.focus();
@@ -724,13 +720,31 @@ Datepicker.prototype.focusPreviousWeek = function () {
 
 Datepicker.prototype.focusFirstDayOfWeek = function () {
   const date = new Date(this.currentDate);
-  date.setDate(date.getDate() - date.getDay());
+  const firstDayOfWeekIndex = this.config.weekStartDay == "sunday" ? 0 : 1;
+  const dayOfWeek = date.getDay();
+  const diff =
+    dayOfWeek >= firstDayOfWeekIndex
+      ? dayOfWeek - firstDayOfWeekIndex
+      : 6 - dayOfWeek;
+
+  date.setDate(date.getDate() - diff);
+  date.setHours(0, 0, 0, 0);
+
   this.goToDate(date);
 };
 
 Datepicker.prototype.focusLastDayOfWeek = function () {
   const date = new Date(this.currentDate);
-  date.setDate(date.getDate() - date.getDay() + 6);
+  const lastDayOfWeekIndex = this.config.weekStartDay == "sunday" ? 6 : 0;
+  const dayOfWeek = date.getDay();
+  const diff =
+    dayOfWeek <= lastDayOfWeekIndex
+      ? lastDayOfWeekIndex - dayOfWeek
+      : 7 - dayOfWeek;
+
+  date.setDate(date.getDate() + diff);
+  date.setHours(0, 0, 0, 0);
+
   this.goToDate(date);
 };