@oneuptime/common 14.0.12 → 14.0.14

package/Tests/UI/Components/FeedOptionsButton.test.tsx

@@ -1,2610 +0,0 @@
-import {
-  afterEach,
-  beforeAll,
-  describe,
-  expect,
-  jest,
-  test,
-} from "@jest/globals";
-import "@testing-library/jest-dom";
-import {
-  act,
-  cleanup,
-  fireEvent,
-  render,
-  RenderResult,
-  screen,
-  within,
-} from "@testing-library/react";
-import { createInstance, i18n } from "i18next";
-import type { SpyInstance } from "jest-mock";
-import * as React from "react";
-import { I18nextProvider } from "react-i18next";
-import SortOrder from "../../../Types/BaseDatabase/SortOrder";
-import IconProp from "../../../Types/Icon/IconProp";
-import {
-  DEFAULT_FEED_OPTIONS,
-  FeedEventTypeOption,
-  FeedOptions,
-} from "../../../UI/Components/Feed/FeedOptions";
-import FeedOptionsButton, {
-  FEED_EVENT_TYPE_SEARCH_THRESHOLD,
-  FEED_OPTIONS_PANEL_WIDTH_PX,
-  FEED_OPTIONS_VIEWPORT_GUTTER_PX,
-  FeedOptionsPanelPlacement,
-  getFeedOptionsPanelPlacement,
-} from "../../../UI/Components/Feed/FeedOptionsButton";
-import Icon from "../../../UI/Components/Icon/Icon";
-
-/*
- * The one "Filter & Sort" control in every dashboard activity feed's header.
- * The component is controlled, so most behaviour is driven through a small
- * harness that holds the options in state the way useFeedOptions does, while
- * exact payloads are asserted against a bare onChange mock.
- */
-
-type OnChangeMock = ReturnType<typeof jest.fn<(options: FeedOptions) => void>>;
-
-/*
- * The button is named by its visible label alone; the state behind it (order
- * and filter) is its description, so a screen reader says each once.
- */
-const TRIGGER_NAME: string = "Filter & Sort";
-
-const PANEL_NAME: string = "Filter and sort feed";
-
-const UNFILTERED_SUMMARY: string =
-  "Showing every event type. Tick one or more to narrow the feed.";
-
-const CUSTOMIZED_TRIGGER_CLASSES: Array<string> = [
-  "border-indigo-300",
-  "bg-indigo-50",
-  "text-indigo-700",
-];
-
-const DEFAULT_TRIGGER_CLASSES: Array<string> = [
-  "border-gray-300",
-  "bg-white",
-  "text-gray-700",
-];
-
-// Three entries, in checklist order; the last one has no icon.
-const EVENT_TYPE_OPTIONS: Array<FeedEventTypeOption> = [
-  {
-    value: "IncidentCreated",
-    label: "Incident Created",
-    icon: IconProp.Alert,
-  },
-  {
-    value: "IncidentStateChanged",
-    label: "Incident State Changed",
-    icon: IconProp.Edit,
-  },
-  {
-    value: "OwnerUserAdded",
-    label: "User Added as Owner",
-  },
-];
-
-// Long enough to earn the search box.
-const LONG_EVENT_TYPE_OPTIONS: Array<FeedEventTypeOption> = [
-  { value: "AlertAcknowledged", label: "Alert Acknowledged" },
-  { value: "AlertCreated", label: "Alert Created" },
-  { value: "AlertResolved", label: "Alert Resolved" },
-  { value: "IncidentCreated", label: "Incident Created" },
-  { value: "IncidentResolved", label: "Incident Resolved" },
-  { value: "MonitorStatusChanged", label: "Monitor Status Changed" },
-  { value: "OwnerNotificationSent", label: "Owner Notification Sent" },
-  {
-    value: "SubscriberNotificationSent",
-    label: "Subscriber Notification Sent",
-  },
-  { value: "OwnerTeamAdded", label: "Team Added as Owner" },
-  { value: "OwnerUserAdded", label: "User Added as Owner" },
-];
-
-interface HarnessProps {
-  eventTypeOptions: Array<FeedEventTypeOption>;
-  initialValue?: FeedOptions | undefined;
-  onChange?: ((options: FeedOptions) => void) | undefined;
-}
-
-const Harness: React.FunctionComponent<HarnessProps> = (
-  props: HarnessProps,
-): React.ReactElement => {
-  const [value, setValue] = React.useState<FeedOptions>(
-    props.initialValue || DEFAULT_FEED_OPTIONS,
-  );
-
-  return (
-    <FeedOptionsButton
-      value={value}
-      eventTypeOptions={props.eventTypeOptions}
-      onChange={(nextValue: FeedOptions): void => {
-        props.onChange?.(nextValue);
-        setValue(nextValue);
-      }}
-    />
-  );
-};
-
-const createOnChange: () => OnChangeMock = (): OnChangeMock => {
-  return jest.fn<(options: FeedOptions) => void>();
-};
-
-const getTrigger: () => HTMLElement = (): HTMLElement => {
-  return screen.getByRole("button", { name: TRIGGER_NAME });
-};
-
-const queryPanel: () => HTMLElement | null = (): HTMLElement | null => {
-  return screen.queryByRole("dialog", { name: PANEL_NAME });
-};
-
-const openPanel: () => HTMLElement = (): HTMLElement => {
-  fireEvent.click(getTrigger());
-
-  return screen.getByRole("dialog", { name: PANEL_NAME });
-};
-
-const getRadio: (name: string) => HTMLElement = (name: string): HTMLElement => {
-  return screen.getByRole("radio", { name });
-};
-
-const getCheckbox: (name: string) => HTMLElement = (
-  name: string,
-): HTMLElement => {
-  return screen.getByRole("checkbox", { name });
-};
-
-const getCheckboxLabels: () => Array<string> = (): Array<string> => {
-  return screen.queryAllByRole("checkbox").map((checkbox: HTMLElement) => {
-    return checkbox.closest("label")?.textContent || "";
-  });
-};
-
-const getEventTypeSummary: () => HTMLElement = (): HTMLElement => {
-  return screen.getByTestId("feed-options-event-type-summary");
-};
-
-const getSearchInput: () => HTMLElement = (): HTMLElement => {
-  return screen.getByRole("textbox", { name: "Search event types" });
-};
-
-const getSearchResults: () => HTMLElement = (): HTMLElement => {
-  return screen.getByTestId("feed-options-search-results");
-};
-
-const getLastCall: (onChange: OnChangeMock) => FeedOptions | undefined = (
-  onChange: OnChangeMock,
-): FeedOptions | undefined => {
-  return onChange.mock.calls[onChange.mock.calls.length - 1]?.[0];
-};
-
-const getListeners: (
-  spy: ReturnType<typeof jest.spyOn>,
-  eventType: string,
-) => Array<unknown> = (
-  spy: ReturnType<typeof jest.spyOn>,
-  eventType: string,
-): Array<unknown> => {
-  const calls: Array<Array<unknown>> = spy.mock.calls as unknown as Array<
-    Array<unknown>
-  >;
-
-  return calls
-    .filter((call: Array<unknown>): boolean => {
-      return call[0] === eventType;
-    })
-    .map((call: Array<unknown>): unknown => {
-      return call[1];
-    });
-};
-
-// The path data of the first glyph drawn inside an element.
-const getLeadingGlyphPath: (element: HTMLElement) => string = (
-  element: HTMLElement,
-): string => {
-  return element.querySelector("svg path")?.getAttribute("d") || "";
-};
-
-/*
- * The path an Icon draws, rendered on its own, so the control's glyphs are
- * compared with the icon set rather than with a copied string.
- */
-const getGlyphPath: (icon: IconProp) => string = (icon: IconProp): string => {
-  const { container, unmount } = render(<Icon icon={icon} />);
-  const path: string = getLeadingGlyphPath(container);
-
-  unmount();
-
-  return path;
-};
-
-type MakeRect = (left: number, right: number) => DOMRect;
-
-const makeRect: MakeRect = (left: number, right: number): DOMRect => {
-  return {
-    left,
-    right,
-    x: left,
-    y: 0,
-    top: 0,
-    bottom: 38,
-    width: right - left,
-    height: 38,
-    toJSON: (): unknown => {
-      return {};
-    },
-  };
-};
-
-afterEach(() => {
-  cleanup();
-});
-
-describe("FeedOptionsButton", () => {
-  describe("closed state", () => {
-    test("renders one collapsed dialog trigger named by its label and described by the current view", () => {
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      expect(screen.getAllByRole("button")).toHaveLength(1);
-
-      const trigger: HTMLElement = getTrigger();
-      const summary: HTMLElement = screen.getByTestId("feed-options-summary");
-
-      expect(trigger).toHaveAccessibleName(TRIGGER_NAME);
-      expect(trigger).toHaveAccessibleDescription(
-        "Newest first, all event types",
-      );
-      expect(trigger).toHaveAttribute("title", "Newest first, all event types");
-      expect(trigger).toHaveAttribute("type", "button");
-      expect(trigger).toHaveAttribute("aria-haspopup", "dialog");
-      expect(trigger).toHaveAttribute("aria-expanded", "false");
-      expect(trigger).not.toHaveAttribute("aria-label");
-      expect(trigger).not.toHaveAttribute("aria-controls");
-      expect(trigger).toHaveTextContent("Filter & Sort");
-      /*
-       * The description lives outside the button: text inside it would join
-       * the name, and the reader would hear the state twice.
-       */
-      expect(summary.id).not.toBe("");
-      expect(trigger).toHaveAttribute("aria-describedby", summary.id);
-      expect(trigger).not.toContainElement(summary);
-      expect(queryPanel()).not.toBeInTheDocument();
-      expect(
-        screen.queryByTestId("feed-options-panel"),
-      ).not.toBeInTheDocument();
-      expect(
-        screen.queryByTestId("feed-options-count"),
-      ).not.toBeInTheDocument();
-    });
-
-    test("keeps its label in the accessibility tree at every width", () => {
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      const label: HTMLElement =
-        within(getTrigger()).getByTestId("feed-options-label");
-
-      expect(label).toHaveTextContent(TRIGGER_NAME);
-      /*
-       * Below xl the label is hidden visually, never with display:none -
-       * that would drop it from the accessibility tree and leave the button
-       * with no name at all on phones and tablets. jsdom applies no CSS, so
-       * the class is the only place this can be seen.
-       *
-       * `max-xl:sr-only`, not a bare `sr-only` undone by `xl:not-sr-only`:
-       * Bootstrap 3 and HTML5 Boilerplate both ship a `.sr-only` rule, and a
-       * browser extension or user stylesheet that injects one after Tailwind
-       * would otherwise collapse the visible label on a wide screen too.
-       */
-      expect(label).toHaveClass("max-xl:sr-only");
-      expect(label).toHaveClass("xl:not-sr-only");
-      expect(label).not.toHaveClass("sr-only");
-      expect(label).not.toHaveClass("hidden");
-    });
-
-    test.each<[string, FeedOptions, string]>([
-      [
-        "an ascending, unfiltered view",
-        { sortOrder: SortOrder.Ascending, eventTypes: [] },
-        "Oldest first, all event types",
-      ],
-      [
-        "a descending, filtered view",
-        {
-          sortOrder: SortOrder.Descending,
-          eventTypes: ["IncidentCreated", "OwnerUserAdded"],
-        },
-        "Newest first, 2 of 3 event types",
-      ],
-      [
-        "an ascending, filtered view",
-        { sortOrder: SortOrder.Ascending, eventTypes: ["IncidentCreated"] },
-        "Oldest first, 1 of 3 event types",
-      ],
-    ])(
-      "summarises %s in the accessible description and tooltip, not the name",
-      (_label: string, value: FeedOptions, summary: string) => {
-        render(
-          <FeedOptionsButton
-            value={value}
-            eventTypeOptions={EVENT_TYPE_OPTIONS}
-            onChange={createOnChange()}
-          />,
-        );
-
-        expect(getTrigger()).toHaveAccessibleName(TRIGGER_NAME);
-        expect(getTrigger()).toHaveAccessibleDescription(summary);
-        expect(getTrigger()).toHaveAttribute("title", summary);
-      },
-    );
-
-    test("shows a count of the chosen event types, hidden from the accessible name", () => {
-      render(
-        <FeedOptionsButton
-          value={{
-            sortOrder: SortOrder.Descending,
-            eventTypes: ["IncidentCreated", "IncidentStateChanged"],
-          }}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      const count: HTMLElement =
-        within(getTrigger()).getByTestId("feed-options-count");
-
-      expect(count).toHaveTextContent(/^2$/);
-      expect(count).toHaveAttribute("aria-hidden", "true");
-      expect(getTrigger()).toHaveAccessibleName(TRIGGER_NAME);
-    });
-
-    test("does not show a count when only the sort order differs from default", () => {
-      render(
-        <FeedOptionsButton
-          value={{ sortOrder: SortOrder.Ascending, eventTypes: [] }}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      expect(
-        screen.queryByTestId("feed-options-count"),
-      ).not.toBeInTheDocument();
-    });
-  });
-
-  describe("default versus customized styling", () => {
-    test("uses the neutral style for the default view", () => {
-      render(
-        <FeedOptionsButton
-          value={{ sortOrder: SortOrder.Descending, eventTypes: [] }}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      const trigger: HTMLElement = getTrigger();
-
-      expect(trigger).toHaveClass(...DEFAULT_TRIGGER_CLASSES);
-
-      for (const className of CUSTOMIZED_TRIGGER_CLASSES) {
-        expect(trigger).not.toHaveClass(className);
-      }
-    });
-
-    test.each<[string, FeedOptions]>([
-      [
-        "the oldest-first order",
-        { sortOrder: SortOrder.Ascending, eventTypes: [] },
-      ],
-      [
-        "an event type filter",
-        { sortOrder: SortOrder.Descending, eventTypes: ["OwnerUserAdded"] },
-      ],
-      [
-        "both a changed order and a filter",
-        {
-          sortOrder: SortOrder.Ascending,
-          eventTypes: ["IncidentCreated", "OwnerUserAdded"],
-        },
-      ],
-    ])(
-      "tints the trigger indigo for %s",
-      (_label: string, value: FeedOptions) => {
-        render(
-          <FeedOptionsButton
-            value={value}
-            eventTypeOptions={EVENT_TYPE_OPTIONS}
-            onChange={createOnChange()}
-          />,
-        );
-
-        const trigger: HTMLElement = getTrigger();
-
-        expect(trigger).toHaveClass(...CUSTOMIZED_TRIGGER_CLASSES);
-
-        for (const className of DEFAULT_TRIGGER_CLASSES) {
-          expect(trigger).not.toHaveClass(className);
-        }
-      },
-    );
-
-    test("switches between the two styles as the options change", () => {
-      render(<Harness eventTypeOptions={EVENT_TYPE_OPTIONS} />);
-
-      openPanel();
-      expect(getTrigger()).toHaveClass(...DEFAULT_TRIGGER_CLASSES);
-
-      fireEvent.click(getRadio("Oldest first"));
-      expect(getTrigger()).toHaveClass(...CUSTOMIZED_TRIGGER_CLASSES);
-
-      fireEvent.click(getRadio("Newest first"));
-      expect(getTrigger()).toHaveClass(...DEFAULT_TRIGGER_CLASSES);
-
-      fireEvent.click(getCheckbox("Incident Created"));
-      expect(getTrigger()).toHaveClass(...CUSTOMIZED_TRIGGER_CLASSES);
-
-      fireEvent.click(getCheckbox("Incident Created"));
-      expect(getTrigger()).toHaveClass(...DEFAULT_TRIGGER_CLASSES);
-    });
-  });
-
-  /*
-   * A reversed feed must not rely on the indigo tint alone to say so: Oldest
-   * first swaps the trigger's funnel for the up-arrow sort glyph.
-   */
-  describe("trigger icon", () => {
-    // Guards the comparisons below: two empty paths would compare equal.
-    test("has two distinct, non-empty glyphs to choose between", () => {
-      const funnel: string = getGlyphPath(IconProp.Filter);
-      const upArrow: string = getGlyphPath(IconProp.BarsArrowUp);
-
-      expect(funnel).not.toBe("");
-      expect(upArrow).not.toBe("");
-      expect(upArrow).not.toBe(funnel);
-    });
-
-    test.each<[string, FeedOptions, IconProp, IconProp]>([
-      [
-        "the default view",
-        DEFAULT_FEED_OPTIONS,
-        IconProp.Filter,
-        IconProp.BarsArrowUp,
-      ],
-      [
-        "a newest-first, filtered view",
-        { sortOrder: SortOrder.Descending, eventTypes: ["IncidentCreated"] },
-        IconProp.Filter,
-        IconProp.BarsArrowUp,
-      ],
-      [
-        "an oldest-first view",
-        { sortOrder: SortOrder.Ascending, eventTypes: [] },
-        IconProp.BarsArrowUp,
-        IconProp.Filter,
-      ],
-      [
-        "an oldest-first, filtered view",
-        { sortOrder: SortOrder.Ascending, eventTypes: ["IncidentCreated"] },
-        IconProp.BarsArrowUp,
-        IconProp.Filter,
-      ],
-    ])(
-      "leads with the right glyph for %s",
-      (
-        _label: string,
-        value: FeedOptions,
-        expectedIcon: IconProp,
-        otherIcon: IconProp,
-      ) => {
-        render(
-          <FeedOptionsButton
-            value={value}
-            eventTypeOptions={EVENT_TYPE_OPTIONS}
-            onChange={createOnChange()}
-          />,
-        );
-
-        const leadingGlyph: string = getLeadingGlyphPath(getTrigger());
-
-        expect(leadingGlyph).toBe(getGlyphPath(expectedIcon));
-        expect(leadingGlyph).not.toBe(getGlyphPath(otherIcon));
-      },
-    );
-
-    test("shows the Oldest first radio's own glyph while that order is chosen, and the funnel again after", () => {
-      render(<Harness eventTypeOptions={EVENT_TYPE_OPTIONS} />);
-
-      openPanel();
-      fireEvent.click(getRadio("Oldest first"));
-
-      expect(getLeadingGlyphPath(getTrigger())).toBe(
-        getLeadingGlyphPath(getRadio("Oldest first")),
-      );
-
-      fireEvent.click(getRadio("Newest first"));
-
-      expect(getLeadingGlyphPath(getTrigger())).toBe(
-        getGlyphPath(IconProp.Filter),
-      );
-    });
-  });
-
-  describe("opening", () => {
-    test("opens a named dialog that the expanded trigger controls", () => {
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      const panel: HTMLElement = openPanel();
-      const trigger: HTMLElement = getTrigger();
-
-      expect(panel).toHaveAttribute("data-testid", "feed-options-panel");
-      expect(panel.id).not.toBe("");
-      expect(trigger).toHaveAttribute("aria-expanded", "true");
-      expect(trigger).toHaveAttribute("aria-controls", panel.id);
-      expect(document.getElementById(panel.id)).toBe(panel);
-      /*
-       * Focusable, so a press on its padding keeps focus inside the control,
-       * but not a tab stop of its own.
-       */
-      expect(panel).toHaveAttribute("tabindex", "-1");
-    });
-
-    test.each<[SortOrder, string, string]>([
-      [SortOrder.Descending, "Newest first", "Oldest first"],
-      [SortOrder.Ascending, "Oldest first", "Newest first"],
-    ])(
-      "moves focus onto the checked sort order (%s)",
-      (sortOrder: SortOrder, checkedName: string, otherName: string) => {
-        render(
-          <FeedOptionsButton
-            value={{ sortOrder, eventTypes: [] }}
-            eventTypeOptions={EVENT_TYPE_OPTIONS}
-            onChange={createOnChange()}
-          />,
-        );
-
-        openPanel();
-
-        expect(getRadio(checkedName)).toHaveFocus();
-        expect(getRadio(checkedName)).toHaveAttribute("aria-checked", "true");
-        expect(getRadio(otherName)).not.toHaveFocus();
-      },
-    );
-
-    test("focuses the order chosen during the previous visit when re-opened", () => {
-      render(<Harness eventTypeOptions={EVENT_TYPE_OPTIONS} />);
-
-      openPanel();
-      fireEvent.click(getRadio("Oldest first"));
-      fireEvent.keyDown(getRadio("Oldest first"), { key: "Escape" });
-
-      expect(queryPanel()).not.toBeInTheDocument();
-
-      openPanel();
-
-      expect(getRadio("Oldest first")).toHaveFocus();
-    });
-
-    test("does not pull focus back to the sort order when it changes while open", () => {
-      render(<Harness eventTypeOptions={EVENT_TYPE_OPTIONS} />);
-
-      openPanel();
-
-      const checkbox: HTMLElement = getCheckbox("Incident Created");
-
-      act(() => {
-        checkbox.focus();
-      });
-
-      fireEvent.click(getRadio("Oldest first"));
-
-      expect(getRadio("Oldest first")).toHaveAttribute("aria-checked", "true");
-      expect(checkbox).toHaveFocus();
-    });
-  });
-
-  describe("panel placement", () => {
-    test("uses a 288px panel kept 16px from the viewport edges", () => {
-      expect(FEED_OPTIONS_PANEL_WIDTH_PX).toBe(288);
-      expect(FEED_OPTIONS_VIEWPORT_GUTTER_PX).toBe(16);
-    });
-
-    test("lines the panel's right edge up with the trigger's when there is room on the left", () => {
-      const placement: FeedOptionsPanelPlacement = getFeedOptionsPanelPlacement(
-        {
-          triggerLeft: 900,
-          triggerRight: 1000,
-          viewportWidth: 1280,
-        },
-      );
-
-      // left = triggerRight - width - triggerLeft = 1000 - 288 - 900.
-      expect(placement).toEqual({ left: -188, width: 288 });
-      expect(900 + placement.left + placement.width).toBe(1000);
-    });
-
-    test("slides a panel that would cross the left edge of a phone back to the gutter", () => {
-      /*
-       * A stacked card header puts the trigger at the left of a 390px
-       * screen: right-aligned, the panel would start at 150 - 288 = -138.
-       */
-      const placement: FeedOptionsPanelPlacement = getFeedOptionsPanelPlacement(
-        {
-          triggerLeft: 24,
-          triggerRight: 150,
-          viewportWidth: 390,
-        },
-      );
-
-      expect(placement).toEqual({ left: -8, width: 288 });
-      expect(24 + placement.left).toBe(16);
-    });
-
-    test("slides a panel that would cross the right edge back to the gutter", () => {
-      // The trigger's right edge sits inside the 16px gutter.
-      const placement: FeedOptionsPanelPlacement = getFeedOptionsPanelPlacement(
-        {
-          triggerLeft: 300,
-          triggerRight: 385,
-          viewportWidth: 390,
-        },
-      );
-
-      // Panel left = 390 - 16 - 288 = 86, i.e. 86 - 300 from the trigger.
-      expect(placement).toEqual({ left: -214, width: 288 });
-      expect(300 + placement.left + placement.width).toBe(390 - 16);
-    });
-
-    test("narrows the panel to fit a viewport under 288px plus both gutters", () => {
-      const placement: FeedOptionsPanelPlacement = getFeedOptionsPanelPlacement(
-        {
-          triggerLeft: 20,
-          triggerRight: 100,
-          viewportWidth: 300,
-        },
-      );
-
-      expect(placement).toEqual({ left: -4, width: 300 - 32 });
-      expect(20 + placement.left).toBe(16);
-      expect(20 + placement.left + placement.width).toBe(300 - 16);
-
-      // At exactly 288 + 32 the full width still fits.
-      expect(
-        getFeedOptionsPanelPlacement({
-          triggerLeft: 20,
-          triggerRight: 100,
-          viewportWidth: 320,
-        }).width,
-      ).toBe(288);
-    });
-
-    test.each<[number]>([[0], [20], [32]])(
-      "never gives a negative width in a degenerate %ipx viewport",
-      (viewportWidth: number) => {
-        const placement: FeedOptionsPanelPlacement =
-          getFeedOptionsPanelPlacement({
-            triggerLeft: 0,
-            triggerRight: 0,
-            viewportWidth,
-          });
-
-        expect(placement.width).toBe(0);
-        expect(Number.isFinite(placement.left)).toBe(true);
-      },
-    );
-
-    test("keeps the panel inside the gutters wherever the trigger sits, and right-aligned whenever that fits", () => {
-      const triggerWidth: number = 40;
-
-      for (const viewportWidth of [320, 390, 768, 1024, 1440]) {
-        for (
-          let triggerLeft: number = 0;
-          triggerLeft + triggerWidth <= viewportWidth;
-          triggerLeft += 37
-        ) {
-          const triggerRight: number = triggerLeft + triggerWidth;
-          const placement: FeedOptionsPanelPlacement =
-            getFeedOptionsPanelPlacement({
-              triggerLeft,
-              triggerRight,
-              viewportWidth,
-            });
-          const panelLeft: number = triggerLeft + placement.left;
-          const panelRight: number = panelLeft + placement.width;
-
-          expect(placement.width).toBe(288);
-          expect(panelLeft).toBeGreaterThanOrEqual(16);
-          expect(panelRight).toBeLessThanOrEqual(viewportWidth - 16);
-
-          if (triggerRight - 288 >= 16 && triggerRight <= viewportWidth - 16) {
-            expect(panelRight).toBe(triggerRight);
-          }
-        }
-      }
-    });
-
-    test("places the open panel from the trigger's box and the viewport, re-places it on resize and again on re-open", () => {
-      render(<Harness eventTypeOptions={EVENT_TYPE_OPTIONS} />);
-
-      // The trigger's wrapper is what the panel is positioned against.
-      const container: HTMLElement = getTrigger().parentElement!;
-      let triggerBox: { left: number; right: number } = {
-        left: 24,
-        right: 150,
-      };
-      let viewportWidth: number = 390;
-
-      const rectSpy: SpyInstance<() => DOMRect> = jest
-        .spyOn(container, "getBoundingClientRect")
-        .mockImplementation((): DOMRect => {
-          return makeRect(triggerBox.left, triggerBox.right);
-        });
-      const widthSpy: SpyInstance<() => number> = jest
-        .spyOn(document.documentElement, "clientWidth", "get")
-        .mockImplementation((): number => {
-          return viewportWidth;
-        });
-
-      try {
-        const panel: HTMLElement = openPanel();
-
-        expect(rectSpy).toHaveBeenCalled();
-        // Phone: slid right so its left edge is 16px from the screen's.
-        expect(panel).toHaveStyle({ left: "-8px", width: "288px" });
-        // The fallback classes would fight the measured position.
-        expect(panel).not.toHaveClass("right-0");
-        expect(panel).not.toHaveClass("w-72");
-
-        // Rotated to a wide screen with the trigger now on the right.
-        viewportWidth = 1280;
-        triggerBox = { left: 900, right: 1000 };
-        fireEvent(window, new Event("resize"));
-
-        expect(queryPanel()).toBe(panel);
-        expect(panel).toHaveStyle({ left: "-188px", width: "288px" });
-
-        fireEvent.keyDown(getRadio("Newest first"), { key: "Escape" });
-        expect(queryPanel()).not.toBeInTheDocument();
-
-        // Re-opened on a screen narrower than the panel plus both gutters.
-        viewportWidth = 300;
-        triggerBox = { left: 20, right: 100 };
-
-        const reopened: HTMLElement = openPanel();
-
-        expect(reopened).toHaveStyle({ left: "-4px", width: "268px" });
-      } finally {
-        rectSpy.mockRestore();
-        widthSpy.mockRestore();
-      }
-
-      // Restored, so no later test measures against this fake layout.
-      expect(jest.isMockFunction(container.getBoundingClientRect)).toBe(false);
-      expect(
-        jest.isMockFunction(
-          Object.getOwnPropertyDescriptor(
-            document.documentElement,
-            "clientWidth",
-          )?.get,
-        ),
-      ).toBe(false);
-    });
-
-    test("falls back to window.innerWidth when the document reports no width", () => {
-      const originalInnerWidth: number = window.innerWidth;
-      const innerWidthDescriptor: PropertyDescriptor | undefined =
-        Object.getOwnPropertyDescriptor(window, "innerWidth");
-
-      render(<Harness eventTypeOptions={EVENT_TYPE_OPTIONS} />);
-
-      const container: HTMLElement = getTrigger().parentElement!;
-      const rectSpy: SpyInstance<() => DOMRect> = jest
-        .spyOn(container, "getBoundingClientRect")
-        .mockImplementation((): DOMRect => {
-          return makeRect(24, 150);
-        });
-
-      Object.defineProperty(window, "innerWidth", {
-        configurable: true,
-        writable: true,
-        value: 390,
-      });
-
-      try {
-        // jsdom lays nothing out, so documentElement.clientWidth is 0.
-        expect(document.documentElement.clientWidth).toBe(0);
-
-        const panel: HTMLElement = openPanel();
-
-        expect(panel).toHaveStyle({ left: "-8px", width: "288px" });
-      } finally {
-        rectSpy.mockRestore();
-
-        if (innerWidthDescriptor) {
-          Object.defineProperty(window, "innerWidth", innerWidthDescriptor);
-        } else {
-          Reflect.deleteProperty(window, "innerWidth");
-        }
-      }
-
-      expect(window.innerWidth).toBe(originalInnerWidth);
-    });
-
-    test("stops listening for resize once the panel closes", () => {
-      const addSpy: ReturnType<typeof jest.spyOn> = jest.spyOn(
-        window,
-        "addEventListener",
-      );
-      const removeSpy: ReturnType<typeof jest.spyOn> = jest.spyOn(
-        window,
-        "removeEventListener",
-      );
-
-      try {
-        render(<Harness eventTypeOptions={EVENT_TYPE_OPTIONS} />);
-
-        openPanel();
-
-        const resizeListeners: Array<unknown> = getListeners(addSpy, "resize");
-
-        expect(resizeListeners.length).toBeGreaterThan(0);
-
-        fireEvent.keyDown(getRadio("Newest first"), { key: "Escape" });
-
-        const removedListeners: Array<unknown> = getListeners(
-          removeSpy,
-          "resize",
-        );
-
-        for (const listener of resizeListeners) {
-          expect(removedListeners).toContain(listener);
-        }
-      } finally {
-        addSpy.mockRestore();
-        removeSpy.mockRestore();
-      }
-    });
-  });
-
-  describe("sort order", () => {
-    test("renders two radios in a group labelled by its heading, with roving tab stops", () => {
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      openPanel();
-
-      const group: HTMLElement = screen.getByRole("radiogroup", {
-        name: "Sort by time",
-      });
-      const radios: Array<HTMLElement> = within(group).getAllByRole("radio");
-
-      expect(radios).toHaveLength(2);
-      expect(radios[0]).toHaveAccessibleName("Newest first");
-      expect(radios[1]).toHaveAccessibleName("Oldest first");
-      expect(radios[0]).toHaveAttribute("aria-checked", "true");
-      expect(radios[1]).toHaveAttribute("aria-checked", "false");
-      expect(radios[0]).toHaveAttribute("tabindex", "0");
-      expect(radios[1]).toHaveAttribute("tabindex", "-1");
-      expect(
-        radios.filter((radio: HTMLElement) => {
-          return radio.getAttribute("aria-checked") === "true";
-        }),
-      ).toHaveLength(1);
-    });
-
-    /*
-     * BarsArrowUp used to draw the same path as BarsArrowDown, so the two
-     * orders looked identical.
-     */
-    test("draws a different glyph for each order", () => {
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      openPanel();
-
-      const newestGlyph: string = getLeadingGlyphPath(getRadio("Newest first"));
-      const oldestGlyph: string = getLeadingGlyphPath(getRadio("Oldest first"));
-
-      expect(newestGlyph).not.toBe("");
-      expect(oldestGlyph).not.toBe("");
-      expect(oldestGlyph).not.toBe(newestGlyph);
-      expect(oldestGlyph).toBe(getGlyphPath(IconProp.BarsArrowUp));
-    });
-
-    test("moves the checked state, the tab stop and the emphasis when the order changes", () => {
-      render(<Harness eventTypeOptions={EVENT_TYPE_OPTIONS} />);
-
-      openPanel();
-      fireEvent.click(getRadio("Oldest first"));
-
-      expect(getRadio("Oldest first")).toHaveAttribute("aria-checked", "true");
-      expect(getRadio("Oldest first")).toHaveAttribute("tabindex", "0");
-      expect(getRadio("Newest first")).toHaveAttribute("aria-checked", "false");
-      expect(getRadio("Newest first")).toHaveAttribute("tabindex", "-1");
-      // The chosen order is marked by weight too, not by a pale fill alone.
-      expect(getRadio("Oldest first")).toHaveClass("font-semibold");
-      expect(getRadio("Newest first")).not.toHaveClass("font-semibold");
-      expect(queryPanel()).toBeInTheDocument();
-    });
-
-    test("reports the new order and keeps the chosen event types", () => {
-      const onChange: OnChangeMock = createOnChange();
-      const value: FeedOptions = {
-        sortOrder: SortOrder.Descending,
-        eventTypes: ["IncidentCreated", "OwnerUserAdded"],
-      };
-
-      render(
-        <FeedOptionsButton
-          value={value}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={onChange}
-        />,
-      );
-
-      openPanel();
-      fireEvent.click(getRadio("Oldest first"));
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith({
-        sortOrder: SortOrder.Ascending,
-        eventTypes: ["IncidentCreated", "OwnerUserAdded"],
-      });
-      // The value it was given is left alone.
-      expect(value).toEqual({
-        sortOrder: SortOrder.Descending,
-        eventTypes: ["IncidentCreated", "OwnerUserAdded"],
-      });
-    });
-
-    test("reports newest-first from an ascending view", () => {
-      const onChange: OnChangeMock = createOnChange();
-
-      render(
-        <FeedOptionsButton
-          value={{
-            sortOrder: SortOrder.Ascending,
-            eventTypes: ["OwnerUserAdded"],
-          }}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={onChange}
-        />,
-      );
-
-      openPanel();
-      fireEvent.click(getRadio("Newest first"));
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith({
-        sortOrder: SortOrder.Descending,
-        eventTypes: ["OwnerUserAdded"],
-      });
-    });
-
-    test("does not report a change when the checked order is clicked again", () => {
-      const onChange: OnChangeMock = createOnChange();
-
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={onChange}
-        />,
-      );
-
-      openPanel();
-      fireEvent.click(getRadio("Newest first"));
-
-      expect(onChange).not.toHaveBeenCalled();
-      expect(queryPanel()).toBeInTheDocument();
-    });
-
-    test("reports the next order from an arrow key with the exact payload", () => {
-      const onChange: OnChangeMock = createOnChange();
-
-      render(
-        <FeedOptionsButton
-          value={{
-            sortOrder: SortOrder.Descending,
-            eventTypes: ["IncidentStateChanged"],
-          }}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={onChange}
-        />,
-      );
-
-      openPanel();
-
-      // false: the arrow key's default (scrolling the page) is prevented.
-      expect(
-        fireEvent.keyDown(getRadio("Newest first"), { key: "ArrowDown" }),
-      ).toBe(false);
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith({
-        sortOrder: SortOrder.Ascending,
-        eventTypes: ["IncidentStateChanged"],
-      });
-      expect(getRadio("Oldest first")).toHaveFocus();
-    });
-
-    test("moves selection and focus with every arrow key, wrapping at both ends", () => {
-      const onChange: OnChangeMock = createOnChange();
-
-      render(
-        <Harness eventTypeOptions={EVENT_TYPE_OPTIONS} onChange={onChange} />,
-      );
-
-      openPanel();
-      expect(getRadio("Newest first")).toHaveFocus();
-
-      const steps: Array<[string, string, string, SortOrder]> = [
-        ["ArrowRight", "Newest first", "Oldest first", SortOrder.Ascending],
-        ["ArrowRight", "Oldest first", "Newest first", SortOrder.Descending],
-        ["ArrowLeft", "Newest first", "Oldest first", SortOrder.Ascending],
-        ["ArrowUp", "Oldest first", "Newest first", SortOrder.Descending],
-        ["ArrowDown", "Newest first", "Oldest first", SortOrder.Ascending],
-        ["ArrowLeft", "Oldest first", "Newest first", SortOrder.Descending],
-        ["ArrowUp", "Newest first", "Oldest first", SortOrder.Ascending],
-        ["ArrowDown", "Oldest first", "Newest first", SortOrder.Descending],
-      ];
-
-      for (const [key, fromName, toName, sortOrder] of steps) {
-        fireEvent.keyDown(getRadio(fromName), { key });
-
-        expect(getRadio(toName)).toHaveFocus();
-        expect(getRadio(toName)).toHaveAttribute("aria-checked", "true");
-        expect(getRadio(toName)).toHaveAttribute("tabindex", "0");
-        expect(getRadio(fromName)).toHaveAttribute("aria-checked", "false");
-        expect(getRadio(fromName)).toHaveAttribute("tabindex", "-1");
-        expect(getLastCall(onChange)).toEqual({ sortOrder, eventTypes: [] });
-      }
-
-      expect(onChange).toHaveBeenCalledTimes(steps.length);
-      expect(queryPanel()).toBeInTheDocument();
-    });
-
-    test.each<[string]>([["Home"], ["End"], ["Tab"], ["Enter"], ["a"]])(
-      "ignores the %s key on a sort radio",
-      (key: string) => {
-        const onChange: OnChangeMock = createOnChange();
-
-        render(
-          <Harness eventTypeOptions={EVENT_TYPE_OPTIONS} onChange={onChange} />,
-        );
-
-        openPanel();
-
-        // true: the key's default action is left alone.
-        expect(fireEvent.keyDown(getRadio("Newest first"), { key })).toBe(true);
-        expect(onChange).not.toHaveBeenCalled();
-        expect(getRadio("Newest first")).toHaveFocus();
-        expect(getRadio("Newest first")).toHaveAttribute(
-          "aria-checked",
-          "true",
-        );
-        expect(queryPanel()).toBeInTheDocument();
-      },
-    );
-  });
-
-  describe("event types", () => {
-    test("renders one labelled checkbox per option, in checklist order, inside a group named by its heading", () => {
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      openPanel();
-
-      /*
-       * The group, not the list, carries the heading: a screen reader
-       * announces a group's name as focus enters it from any checkbox.
-       */
-      const group: HTMLElement = screen.getByRole("group", {
-        name: "Event types",
-      });
-      const list: HTMLElement = within(group).getByRole("list");
-
-      expect(within(list).getAllByRole("checkbox")).toHaveLength(3);
-      expect(getCheckboxLabels()).toEqual([
-        "Incident Created",
-        "Incident State Changed",
-        "User Added as Owner",
-      ]);
-
-      for (const option of EVENT_TYPE_OPTIONS) {
-        expect(getCheckbox(option.label)).not.toBeChecked();
-      }
-
-      expect(getEventTypeSummary()).toHaveTextContent(UNFILTERED_SUMMARY);
-      // Ticking a box re-words this line; it is read out when it does.
-      expect(getEventTypeSummary()).toHaveAttribute("aria-live", "polite");
-      expect(
-        screen.queryByRole("button", { name: "Show all" }),
-      ).not.toBeInTheDocument();
-    });
-
-    test("checks exactly the event types in the value", () => {
-      render(
-        <FeedOptionsButton
-          value={{
-            sortOrder: SortOrder.Descending,
-            eventTypes: ["IncidentStateChanged"],
-          }}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      openPanel();
-
-      expect(getCheckbox("Incident Created")).not.toBeChecked();
-      expect(getCheckbox("Incident State Changed")).toBeChecked();
-      expect(getCheckbox("User Added as Owner")).not.toBeChecked();
-      expect(getEventTypeSummary()).toHaveTextContent(
-        "Showing 1 of 3 event types.",
-      );
-    });
-
-    test("adds a ticked event type and keeps the sort order", () => {
-      const onChange: OnChangeMock = createOnChange();
-
-      render(
-        <FeedOptionsButton
-          value={{ sortOrder: SortOrder.Ascending, eventTypes: [] }}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={onChange}
-        />,
-      );
-
-      openPanel();
-      fireEvent.click(getCheckbox("User Added as Owner"));
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith({
-        sortOrder: SortOrder.Ascending,
-        eventTypes: ["OwnerUserAdded"],
-      });
-    });
-
-    test("puts a newly ticked event type in checklist order, not click order", () => {
-      const onChange: OnChangeMock = createOnChange();
-
-      render(
-        <FeedOptionsButton
-          value={{
-            sortOrder: SortOrder.Descending,
-            eventTypes: ["OwnerUserAdded"],
-          }}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={onChange}
-        />,
-      );
-
-      openPanel();
-      fireEvent.click(getCheckbox("Incident Created"));
-
-      expect(onChange).toHaveBeenCalledWith({
-        sortOrder: SortOrder.Descending,
-        eventTypes: ["IncidentCreated", "OwnerUserAdded"],
-      });
-    });
-
-    test("removes an unticked event type and keeps the sort order", () => {
-      const onChange: OnChangeMock = createOnChange();
-
-      render(
-        <FeedOptionsButton
-          value={{
-            sortOrder: SortOrder.Ascending,
-            eventTypes: ["IncidentCreated", "IncidentStateChanged"],
-          }}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={onChange}
-        />,
-      );
-
-      openPanel();
-      fireEvent.click(getCheckbox("Incident Created"));
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith({
-        sortOrder: SortOrder.Ascending,
-        eventTypes: ["IncidentStateChanged"],
-      });
-    });
-
-    /*
-     * The value can name an event type the checklist no longer offers (a
-     * filter chosen before the feed's event types changed). A toggle reports
-     * only what the checklist has, so the stale type never reaches the API.
-     */
-    test.each<[string, string, Array<string>]>([
-      ["ticking", "User Added as Owner", ["IncidentCreated", "OwnerUserAdded"]],
-      ["unticking", "Incident Created", []],
-    ])(
-      "drops an event type missing from the checklist when %s another",
-      (
-        _label: string,
-        checkboxName: string,
-        expectedEventTypes: Array<string>,
-      ) => {
-        const onChange: OnChangeMock = createOnChange();
-
-        render(
-          <FeedOptionsButton
-            value={{
-              sortOrder: SortOrder.Descending,
-              eventTypes: ["Gone", "IncidentCreated"],
-            }}
-            eventTypeOptions={EVENT_TYPE_OPTIONS}
-            onChange={onChange}
-          />,
-        );
-
-        openPanel();
-        fireEvent.click(getCheckbox(checkboxName));
-
-        expect(onChange).toHaveBeenCalledTimes(1);
-        expect(onChange).toHaveBeenCalledWith({
-          sortOrder: SortOrder.Descending,
-          eventTypes: expectedEventTypes,
-        });
-      },
-    );
-
-    test("ticks, counts and unticks through the controlled round trip", () => {
-      const onChange: OnChangeMock = createOnChange();
-
-      render(
-        <Harness eventTypeOptions={EVENT_TYPE_OPTIONS} onChange={onChange} />,
-      );
-
-      openPanel();
-
-      // Ticked last-first; every payload still follows the checklist.
-      fireEvent.click(getCheckbox("User Added as Owner"));
-      expect(getLastCall(onChange)).toEqual({
-        sortOrder: SortOrder.Descending,
-        eventTypes: ["OwnerUserAdded"],
-      });
-      expect(screen.getByTestId("feed-options-count")).toHaveTextContent(/^1$/);
-      expect(getEventTypeSummary()).toHaveTextContent(
-        "Showing 1 of 3 event types.",
-      );
-
-      fireEvent.click(getCheckbox("Incident Created"));
-      expect(getLastCall(onChange)).toEqual({
-        sortOrder: SortOrder.Descending,
-        eventTypes: ["IncidentCreated", "OwnerUserAdded"],
-      });
-      expect(screen.getByTestId("feed-options-count")).toHaveTextContent(/^2$/);
-      expect(getEventTypeSummary()).toHaveTextContent(
-        "Showing 2 of 3 event types.",
-      );
-      expect(getTrigger()).toHaveAccessibleName(TRIGGER_NAME);
-      expect(getTrigger()).toHaveAccessibleDescription(
-        "Newest first, 2 of 3 event types",
-      );
-
-      fireEvent.click(getCheckbox("Incident State Changed"));
-      expect(getLastCall(onChange)).toEqual({
-        sortOrder: SortOrder.Descending,
-        eventTypes: [
-          "IncidentCreated",
-          "IncidentStateChanged",
-          "OwnerUserAdded",
-        ],
-      });
-      expect(screen.getByTestId("feed-options-count")).toHaveTextContent(/^3$/);
-
-      fireEvent.click(getCheckbox("Incident Created"));
-      expect(getLastCall(onChange)).toEqual({
-        sortOrder: SortOrder.Descending,
-        eventTypes: ["IncidentStateChanged", "OwnerUserAdded"],
-      });
-      expect(getCheckbox("Incident Created")).not.toBeChecked();
-      expect(getCheckbox("Incident State Changed")).toBeChecked();
-      expect(getCheckbox("User Added as Owner")).toBeChecked();
-
-      fireEvent.click(getCheckbox("Incident State Changed"));
-      fireEvent.click(getCheckbox("User Added as Owner"));
-      expect(getLastCall(onChange)).toEqual({
-        sortOrder: SortOrder.Descending,
-        eventTypes: [],
-      });
-      expect(
-        screen.queryByTestId("feed-options-count"),
-      ).not.toBeInTheDocument();
-      expect(getEventTypeSummary()).toHaveTextContent(UNFILTERED_SUMMARY);
-      expect(getTrigger()).toHaveAccessibleDescription(
-        "Newest first, all event types",
-      );
-      expect(onChange).toHaveBeenCalledTimes(6);
-    });
-
-    test("keeps the panel open while several boxes are ticked in one visit", () => {
-      render(<Harness eventTypeOptions={EVENT_TYPE_OPTIONS} />);
-
-      openPanel();
-
-      for (const option of EVENT_TYPE_OPTIONS) {
-        fireEvent.click(getCheckbox(option.label));
-
-        expect(queryPanel()).toBeInTheDocument();
-        expect(getCheckbox(option.label)).toBeChecked();
-      }
-
-      expect(getTrigger()).toHaveAttribute("aria-expanded", "true");
-      expect(screen.getByTestId("feed-options-count")).toHaveTextContent(/^3$/);
-      expect(getEventTypeSummary()).toHaveTextContent(
-        "Showing 3 of 3 event types.",
-      );
-    });
-
-    test("offers Show all only while something is ticked, and it clears the filter but not the order", () => {
-      const onChange: OnChangeMock = createOnChange();
-
-      const { rerender } = render(
-        <FeedOptionsButton
-          value={{
-            sortOrder: SortOrder.Ascending,
-            eventTypes: ["IncidentCreated", "OwnerUserAdded"],
-          }}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={onChange}
-        />,
-      );
-
-      openPanel();
-      fireEvent.click(screen.getByRole("button", { name: "Show all" }));
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith({
-        sortOrder: SortOrder.Ascending,
-        eventTypes: [],
-      });
-
-      // The same open panel with nothing ticked: no Show all to offer.
-      rerender(
-        <FeedOptionsButton
-          value={{ sortOrder: SortOrder.Ascending, eventTypes: [] }}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={onChange}
-        />,
-      );
-
-      expect(queryPanel()).toBeInTheDocument();
-      expect(
-        screen.queryByRole("button", { name: "Show all" }),
-      ).not.toBeInTheDocument();
-    });
-
-    test("Show all empties the checklist and then disappears", () => {
-      render(
-        <Harness
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          initialValue={{
-            sortOrder: SortOrder.Ascending,
-            eventTypes: ["IncidentCreated", "IncidentStateChanged"],
-          }}
-        />,
-      );
-
-      openPanel();
-      fireEvent.click(screen.getByRole("button", { name: "Show all" }));
-
-      for (const option of EVENT_TYPE_OPTIONS) {
-        expect(getCheckbox(option.label)).not.toBeChecked();
-      }
-
-      expect(
-        screen.queryByRole("button", { name: "Show all" }),
-      ).not.toBeInTheDocument();
-      expect(getEventTypeSummary()).toHaveTextContent(UNFILTERED_SUMMARY);
-      expect(getRadio("Oldest first")).toHaveAttribute("aria-checked", "true");
-      expect(queryPanel()).toBeInTheDocument();
-    });
-
-    test("shows the no-event-types message for a feed with an empty checklist", () => {
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={[]}
-          onChange={createOnChange()}
-        />,
-      );
-
-      expect(getTrigger()).toHaveAccessibleName(TRIGGER_NAME);
-      expect(getTrigger()).toHaveAccessibleDescription(
-        "Newest first, all event types",
-      );
-
-      openPanel();
-
-      expect(
-        screen.getByText("This feed has no event types to filter by."),
-      ).toBeVisible();
-      expect(screen.queryAllByRole("checkbox")).toHaveLength(0);
-      expect(
-        screen.queryByRole("textbox", { name: "Search event types" }),
-      ).not.toBeInTheDocument();
-      expect(getEventTypeSummary()).toHaveTextContent(UNFILTERED_SUMMARY);
-      // The sort order still works without any event types.
-      expect(screen.getAllByRole("radio")).toHaveLength(2);
-    });
-  });
-
-  describe("icons", () => {
-    test("renders an option's icon and leaves an option without one plain", () => {
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      openPanel();
-
-      const withIcon: HTMLElement | null =
-        getCheckbox("Incident Created").closest("label");
-      const withoutIcon: HTMLElement | null = getCheckbox(
-        "User Added as Owner",
-      ).closest("label");
-
-      expect(withIcon).not.toBeNull();
-      expect(withoutIcon).not.toBeNull();
-      expect(withIcon!.querySelector("svg")).not.toBeNull();
-      expect(withoutIcon!.querySelector("svg")).toBeNull();
-      // The icon is decoration: the checkbox is named by its label alone.
-      expect(getCheckbox("Incident Created")).toHaveAccessibleName(
-        "Incident Created",
-      );
-      expect(getCheckbox("User Added as Owner")).toHaveAccessibleName(
-        "User Added as Owner",
-      );
-    });
-  });
-
-  describe("reset", () => {
-    test("is not offered for the default view", () => {
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      openPanel();
-
-      expect(
-        screen.queryByRole("button", { name: "Reset to default" }),
-      ).not.toBeInTheDocument();
-    });
-
-    test.each<[string, FeedOptions]>([
-      [
-        "the order is oldest first",
-        { sortOrder: SortOrder.Ascending, eventTypes: [] },
-      ],
-      [
-        "event types are ticked",
-        { sortOrder: SortOrder.Descending, eventTypes: ["IncidentCreated"] },
-      ],
-      [
-        "both differ from default",
-        {
-          sortOrder: SortOrder.Ascending,
-          eventTypes: ["IncidentCreated", "OwnerUserAdded"],
-        },
-      ],
-    ])(
-      "resets both the order and the filter when %s",
-      (_label: string, value: FeedOptions) => {
-        const onChange: OnChangeMock = createOnChange();
-
-        render(
-          <FeedOptionsButton
-            value={value}
-            eventTypeOptions={EVENT_TYPE_OPTIONS}
-            onChange={onChange}
-          />,
-        );
-
-        openPanel();
-        fireEvent.click(
-          screen.getByRole("button", { name: "Reset to default" }),
-        );
-
-        expect(onChange).toHaveBeenCalledTimes(1);
-        expect(onChange).toHaveBeenCalledWith({
-          sortOrder: SortOrder.Descending,
-          eventTypes: [],
-        });
-      },
-    );
-
-    test("returns the whole control to its default look and then disappears", () => {
-      render(
-        <Harness
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          initialValue={{
-            sortOrder: SortOrder.Ascending,
-            eventTypes: ["IncidentStateChanged", "OwnerUserAdded"],
-          }}
-        />,
-      );
-
-      openPanel();
-      fireEvent.click(screen.getByRole("button", { name: "Reset to default" }));
-
-      expect(getRadio("Newest first")).toHaveAttribute("aria-checked", "true");
-
-      for (const option of EVENT_TYPE_OPTIONS) {
-        expect(getCheckbox(option.label)).not.toBeChecked();
-      }
-
-      expect(
-        screen.queryByRole("button", { name: "Reset to default" }),
-      ).not.toBeInTheDocument();
-      expect(
-        screen.queryByTestId("feed-options-count"),
-      ).not.toBeInTheDocument();
-      expect(getTrigger()).toHaveClass(...DEFAULT_TRIGGER_CLASSES);
-      expect(getTrigger()).toHaveAccessibleDescription(
-        "Newest first, all event types",
-      );
-      expect(getLeadingGlyphPath(getTrigger())).toBe(
-        getGlyphPath(IconProp.Filter),
-      );
-      expect(queryPanel()).toBeInTheDocument();
-    });
-  });
-
-  describe("search", () => {
-    test("uses a threshold of eight event types", () => {
-      expect(FEED_EVENT_TYPE_SEARCH_THRESHOLD).toBe(8);
-    });
-
-    test("is absent when the checklist is at the threshold", () => {
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={LONG_EVENT_TYPE_OPTIONS.slice(
-            0,
-            FEED_EVENT_TYPE_SEARCH_THRESHOLD,
-          )}
-          onChange={createOnChange()}
-        />,
-      );
-
-      openPanel();
-
-      expect(screen.getAllByRole("checkbox")).toHaveLength(
-        FEED_EVENT_TYPE_SEARCH_THRESHOLD,
-      );
-      expect(
-        screen.queryByRole("textbox", { name: "Search event types" }),
-      ).not.toBeInTheDocument();
-    });
-
-    test("is absent for a short checklist", () => {
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      openPanel();
-
-      expect(
-        screen.queryByRole("textbox", { name: "Search event types" }),
-      ).not.toBeInTheDocument();
-    });
-
-    test("appears once the checklist is longer than the threshold", () => {
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={LONG_EVENT_TYPE_OPTIONS.slice(
-            0,
-            FEED_EVENT_TYPE_SEARCH_THRESHOLD + 1,
-          )}
-          onChange={createOnChange()}
-        />,
-      );
-
-      openPanel();
-
-      const search: HTMLElement = getSearchInput();
-
-      expect(search).toHaveValue("");
-      expect(search).toHaveAttribute("placeholder", "Search event types");
-      expect(screen.getAllByRole("checkbox")).toHaveLength(
-        FEED_EVENT_TYPE_SEARCH_THRESHOLD + 1,
-      );
-    });
-
-    test.each<[string, Array<string>]>([
-      ["INCIDENT", ["Incident Created", "Incident Resolved"]],
-      ["incident", ["Incident Created", "Incident Resolved"]],
-      [
-        "notification",
-        ["Owner Notification Sent", "Subscriber Notification Sent"],
-      ],
-      ["as owner", ["Team Added as Owner", "User Added as Owner"]],
-      ["  resolved  ", ["Alert Resolved", "Incident Resolved"]],
-      ["ACKNOW", ["Alert Acknowledged"]],
-    ])(
-      "filters the checklist to labels containing %p, ignoring case",
-      (term: string, expectedLabels: Array<string>) => {
-        render(
-          <FeedOptionsButton
-            value={DEFAULT_FEED_OPTIONS}
-            eventTypeOptions={LONG_EVENT_TYPE_OPTIONS}
-            onChange={createOnChange()}
-          />,
-        );
-
-        openPanel();
-        fireEvent.change(getSearchInput(), { target: { value: term } });
-
-        expect(getSearchInput()).toHaveValue(term);
-        expect(getCheckboxLabels()).toEqual(expectedLabels);
-      },
-    );
-
-    test("restores the whole checklist when the search is cleared", () => {
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={LONG_EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      openPanel();
-      fireEvent.change(getSearchInput(), { target: { value: "alert" } });
-      expect(getCheckboxLabels()).toHaveLength(3);
-
-      fireEvent.change(getSearchInput(), { target: { value: "   " } });
-      expect(getCheckboxLabels()).toHaveLength(LONG_EVENT_TYPE_OPTIONS.length);
-
-      fireEvent.change(getSearchInput(), { target: { value: "" } });
-      expect(getCheckboxLabels()).toEqual(
-        LONG_EVENT_TYPE_OPTIONS.map((option: FeedEventTypeOption) => {
-          return option.label;
-        }),
-      );
-    });
-
-    test("matches labels, not raw event type values", () => {
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={LONG_EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      openPanel();
-      fireEvent.change(getSearchInput(), { target: { value: "OwnerUser" } });
-
-      expect(screen.queryAllByRole("checkbox")).toHaveLength(0);
-    });
-
-    test("says so when nothing matches", () => {
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={LONG_EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      openPanel();
-      fireEvent.change(getSearchInput(), { target: { value: "  zzz  " } });
-
-      expect(screen.queryAllByRole("checkbox")).toHaveLength(0);
-      expect(screen.getByText('No event types match "zzz".')).toBeVisible();
-      expect(
-        screen.queryByText("This feed has no event types to filter by."),
-      ).not.toBeInTheDocument();
-    });
-
-    /*
-     * The filtered list changes silently under the search box, so the number
-     * of matches is spoken from a live region. It is mounted empty with the
-     * search box: a region that appears together with its first text is
-     * often not announced at all.
-     */
-    test("announces the number of matches, and nothing while there is no search", () => {
-      render(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={LONG_EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      openPanel();
-
-      const results: HTMLElement = getSearchResults();
-
-      expect(results).toHaveAttribute("aria-live", "polite");
-      expect(results.textContent).toBe("");
-
-      fireEvent.change(getSearchInput(), { target: { value: "incident" } });
-
-      expect(getCheckboxLabels()).toHaveLength(2);
-      expect(getSearchResults()).toBe(results);
-      expect(results).toHaveTextContent(/^Matching event types: 2$/);
-
-      fireEvent.change(getSearchInput(), { target: { value: "   " } });
-
-      expect(results.textContent).toBe("");
-
-      fireEvent.change(getSearchInput(), { target: { value: "zzz" } });
-
-      expect(screen.queryAllByRole("checkbox")).toHaveLength(0);
-      expect(screen.getByText('No event types match "zzz".')).toBeVisible();
-      expect(results).toHaveTextContent(/^Matching event types: 0$/);
-
-      fireEvent.change(getSearchInput(), { target: { value: "" } });
-
-      expect(results.textContent).toBe("");
-    });
-
-    test("ticks a search result without dropping a ticked event type the search hides", () => {
-      const onChange: OnChangeMock = createOnChange();
-
-      render(
-        <Harness
-          eventTypeOptions={LONG_EVENT_TYPE_OPTIONS}
-          initialValue={{
-            sortOrder: SortOrder.Ascending,
-            eventTypes: ["OwnerUserAdded"],
-          }}
-          onChange={onChange}
-        />,
-      );
-
-      openPanel();
-      fireEvent.change(getSearchInput(), { target: { value: "incident" } });
-      fireEvent.click(getCheckbox("Incident Resolved"));
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith({
-        sortOrder: SortOrder.Ascending,
-        eventTypes: ["IncidentResolved", "OwnerUserAdded"],
-      });
-      // The search stays put so the reader can keep ticking results.
-      expect(getSearchInput()).toHaveValue("incident");
-      expect(getCheckboxLabels()).toEqual([
-        "Incident Created",
-        "Incident Resolved",
-      ]);
-      expect(getCheckbox("Incident Resolved")).toBeChecked();
-      expect(getEventTypeSummary()).toHaveTextContent(
-        `Showing 2 of ${LONG_EVENT_TYPE_OPTIONS.length} event types.`,
-      );
-      expect(queryPanel()).toBeInTheDocument();
-    });
-
-    test.each<[string, () => void]>([
-      [
-        "Escape",
-        (): void => {
-          fireEvent.keyDown(getSearchInput(), { key: "Escape" });
-        },
-      ],
-      [
-        "a press outside",
-        (): void => {
-          fireEvent.mouseDown(document.body);
-        },
-      ],
-      [
-        "the trigger",
-        (): void => {
-          fireEvent.mouseDown(getTrigger());
-          fireEvent.click(getTrigger());
-        },
-      ],
-      [
-        "focus leaving the control",
-        (): void => {
-          const outside: HTMLElement = screen.getByRole("button", {
-            name: "Outside",
-          });
-
-          act(() => {
-            outside.focus();
-          });
-        },
-      ],
-    ])(
-      "clears the search text when closed by %s",
-      (_label: string, dismiss: () => void) => {
-        render(
-          <div>
-            <FeedOptionsButton
-              value={DEFAULT_FEED_OPTIONS}
-              eventTypeOptions={LONG_EVENT_TYPE_OPTIONS}
-              onChange={createOnChange()}
-            />
-            <button type="button">Outside</button>
-          </div>,
-        );
-
-        openPanel();
-
-        const search: HTMLElement = getSearchInput();
-
-        act(() => {
-          search.focus();
-        });
-        fireEvent.change(search, { target: { value: "incident" } });
-        expect(getCheckboxLabels()).toHaveLength(2);
-
-        dismiss();
-        expect(queryPanel()).not.toBeInTheDocument();
-
-        openPanel();
-
-        expect(getSearchInput()).toHaveValue("");
-        expect(getSearchResults().textContent).toBe("");
-        expect(getCheckboxLabels()).toHaveLength(
-          LONG_EVENT_TYPE_OPTIONS.length,
-        );
-      },
-    );
-  });
-
-  describe("dismissal", () => {
-    const renderWithOutside: (onChange?: OnChangeMock) => void = (
-      onChange?: OnChangeMock,
-    ): void => {
-      render(
-        <div>
-          <Harness eventTypeOptions={EVENT_TYPE_OPTIONS} onChange={onChange} />
-          <button type="button">Outside</button>
-        </div>,
-      );
-    };
-
-    const getOutside: () => HTMLElement = (): HTMLElement => {
-      return screen.getByRole("button", { name: "Outside" });
-    };
-
-    test("Escape closes the panel and returns focus to the trigger", () => {
-      renderWithOutside();
-
-      openPanel();
-      expect(getRadio("Newest first")).toHaveFocus();
-
-      expect(
-        fireEvent.keyDown(getRadio("Newest first"), { key: "Escape" }),
-      ).toBe(false);
-
-      expect(queryPanel()).not.toBeInTheDocument();
-      expect(getTrigger()).toHaveAttribute("aria-expanded", "false");
-      expect(getTrigger()).not.toHaveAttribute("aria-controls");
-      expect(getTrigger()).toHaveFocus();
-    });
-
-    test("Escape from a checkbox also closes and returns focus", () => {
-      renderWithOutside();
-
-      openPanel();
-
-      const checkbox: HTMLElement = getCheckbox("Incident Created");
-
-      act(() => {
-        checkbox.focus();
-      });
-      fireEvent.keyDown(checkbox, { key: "Escape" });
-
-      expect(queryPanel()).not.toBeInTheDocument();
-      expect(getTrigger()).toHaveFocus();
-    });
-
-    test("Escape inside the open panel does not reach an enclosing handler, but does when closed", () => {
-      const onParentKeyDown: ReturnType<
-        typeof jest.fn<(event: React.KeyboardEvent) => void>
-      > = jest.fn<(event: React.KeyboardEvent) => void>();
-
-      render(
-        <div onKeyDown={onParentKeyDown}>
-          <FeedOptionsButton
-            value={DEFAULT_FEED_OPTIONS}
-            eventTypeOptions={EVENT_TYPE_OPTIONS}
-            onChange={createOnChange()}
-          />
-        </div>,
-      );
-
-      openPanel();
-      fireEvent.keyDown(getRadio("Newest first"), { key: "Escape" });
-
-      expect(queryPanel()).not.toBeInTheDocument();
-      expect(onParentKeyDown).not.toHaveBeenCalled();
-
-      // Closed, Escape is none of this control's business.
-      expect(fireEvent.keyDown(getTrigger(), { key: "Escape" })).toBe(true);
-      expect(onParentKeyDown).toHaveBeenCalledTimes(1);
-      expect(queryPanel()).not.toBeInTheDocument();
-    });
-
-    test("a press outside closes the panel", () => {
-      renderWithOutside();
-
-      openPanel();
-      fireEvent.mouseDown(getOutside());
-
-      expect(queryPanel()).not.toBeInTheDocument();
-      expect(getTrigger()).toHaveAttribute("aria-expanded", "false");
-    });
-
-    test("a press on the page body closes the panel", () => {
-      renderWithOutside();
-
-      openPanel();
-      fireEvent.mouseDown(document.body);
-
-      expect(queryPanel()).not.toBeInTheDocument();
-    });
-
-    test("a press inside the panel keeps it open", () => {
-      renderWithOutside();
-
-      const panel: HTMLElement = openPanel();
-
-      fireEvent.mouseDown(panel);
-      expect(queryPanel()).toBeInTheDocument();
-
-      fireEvent.mouseDown(getCheckbox("Incident State Changed"));
-      expect(queryPanel()).toBeInTheDocument();
-
-      fireEvent.mouseDown(getRadio("Oldest first"));
-      expect(queryPanel()).toBeInTheDocument();
-
-      fireEvent.mouseDown(screen.getByText("Sort by time"));
-      expect(queryPanel()).toBeInTheDocument();
-    });
-
-    /*
-     * A press on the panel's padding moves focus to the panel itself (the
-     * nearest focusable ancestor of the press). Were the panel not focusable,
-     * focus would fall to the page body, outside the control's key handler,
-     * and Escape would stop closing it.
-     */
-    test("a press on the panel's padding keeps it open, and Escape from there still closes it", () => {
-      renderWithOutside();
-
-      const panel: HTMLElement = openPanel();
-
-      expect(getRadio("Newest first")).toHaveFocus();
-
-      fireEvent.mouseDown(panel);
-      act(() => {
-        panel.focus();
-      });
-
-      expect(queryPanel()).toBe(panel);
-      expect(panel).toHaveFocus();
-
-      expect(fireEvent.keyDown(panel, { key: "Escape" })).toBe(false);
-
-      expect(queryPanel()).not.toBeInTheDocument();
-      expect(getTrigger()).toHaveAttribute("aria-expanded", "false");
-      expect(getTrigger()).toHaveFocus();
-    });
-
-    test("a press outside while closed changes nothing", () => {
-      const onChange: OnChangeMock = createOnChange();
-
-      renderWithOutside(onChange);
-
-      fireEvent.mouseDown(getOutside());
-
-      expect(queryPanel()).not.toBeInTheDocument();
-      expect(getTrigger()).toHaveAttribute("aria-expanded", "false");
-      expect(onChange).not.toHaveBeenCalled();
-    });
-
-    test("pressing the trigger while open closes it without re-opening", () => {
-      renderWithOutside();
-
-      openPanel();
-
-      // A real press is mousedown then click.
-      fireEvent.mouseDown(getTrigger());
-      fireEvent.click(getTrigger());
-
-      expect(queryPanel()).not.toBeInTheDocument();
-      expect(getTrigger()).toHaveAttribute("aria-expanded", "false");
-
-      fireEvent.mouseDown(getTrigger());
-      fireEvent.click(getTrigger());
-
-      expect(queryPanel()).toBeInTheDocument();
-      expect(getTrigger()).toHaveAttribute("aria-expanded", "true");
-    });
-
-    test("focus moving to an element outside closes the panel", () => {
-      renderWithOutside();
-
-      openPanel();
-      fireEvent.focusOut(getRadio("Newest first"), {
-        relatedTarget: getOutside(),
-      });
-
-      expect(queryPanel()).not.toBeInTheDocument();
-      expect(getTrigger()).toHaveAttribute("aria-expanded", "false");
-    });
-
-    test("tabbing focus out to another control closes the panel", () => {
-      renderWithOutside();
-
-      openPanel();
-
-      act(() => {
-        getOutside().focus();
-      });
-
-      expect(queryPanel()).not.toBeInTheDocument();
-      expect(getOutside()).toHaveFocus();
-    });
-
-    test("a blur with no next focus, like switching to another window, keeps it open", () => {
-      renderWithOutside();
-
-      openPanel();
-      fireEvent.focusOut(getRadio("Newest first"), { relatedTarget: null });
-      expect(queryPanel()).toBeInTheDocument();
-
-      fireEvent.blur(getRadio("Newest first"));
-      expect(queryPanel()).toBeInTheDocument();
-    });
-
-    test("focus moving between controls inside the panel keeps it open", () => {
-      renderWithOutside();
-
-      openPanel();
-
-      act(() => {
-        getCheckbox("Incident Created").focus();
-      });
-      expect(queryPanel()).toBeInTheDocument();
-
-      act(() => {
-        getRadio("Newest first").focus();
-      });
-      expect(queryPanel()).toBeInTheDocument();
-
-      // Shift+Tab from the first radio lands on the trigger, still inside.
-      act(() => {
-        getTrigger().focus();
-      });
-      expect(queryPanel()).toBeInTheDocument();
-    });
-
-    test("stops listening for outside presses once unmounted", () => {
-      const addSpy: ReturnType<typeof jest.spyOn> = jest.spyOn(
-        document,
-        "addEventListener",
-      );
-      const removeSpy: ReturnType<typeof jest.spyOn> = jest.spyOn(
-        document,
-        "removeEventListener",
-      );
-
-      try {
-        const { unmount } = render(
-          <Harness eventTypeOptions={EVENT_TYPE_OPTIONS} />,
-        );
-
-        openPanel();
-
-        const mouseDownListeners: Array<unknown> = getListeners(
-          addSpy,
-          "mousedown",
-        );
-
-        expect(mouseDownListeners.length).toBeGreaterThan(0);
-
-        unmount();
-
-        /*
-         * removeEventListener only detaches when the handler identity matches
-         * the add, so compare the functions rather than counting calls.
-         */
-        const removedListeners: Array<unknown> = getListeners(
-          removeSpy,
-          "mousedown",
-        );
-
-        for (const listener of mouseDownListeners) {
-          expect(removedListeners).toContain(listener);
-        }
-      } finally {
-        addSpy.mockRestore();
-        removeSpy.mockRestore();
-      }
-    });
-  });
-
-  /*
-   * "Reset to default" and "Show all" each remove themselves once used, so
-   * the button a keyboard user just pressed vanishes. Focus must land on
-   * another control inside the panel rather than fall back to the page body,
-   * where Escape would never reach the control's key handler and the panel
-   * could no longer be closed from the keyboard.
-   */
-  describe("keyboard focus after an action that removes its own button", () => {
-    const pressThenEscape: (
-      buttonName: string,
-      expectFocusOn: () => HTMLElement,
-    ) => void = (
-      buttonName: string,
-      expectFocusOn: () => HTMLElement,
-    ): void => {
-      const button: HTMLElement = screen.getByRole("button", {
-        name: buttonName,
-      });
-
-      act(() => {
-        button.focus();
-      });
-      fireEvent.click(button);
-
-      expect(
-        screen.queryByRole("button", { name: buttonName }),
-      ).not.toBeInTheDocument();
-      expect(queryPanel()).toBeInTheDocument();
-      expect(document.activeElement).not.toBe(document.body);
-      expect(expectFocusOn()).toHaveFocus();
-
-      fireEvent.keyDown(document.activeElement || document.body, {
-        key: "Escape",
-      });
-
-      expect(queryPanel()).not.toBeInTheDocument();
-      expect(getTrigger()).toHaveFocus();
-    };
-
-    test("Reset to default moves focus to Newest first, where Escape still closes the panel", () => {
-      render(
-        <Harness
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          initialValue={{
-            sortOrder: SortOrder.Ascending,
-            eventTypes: ["IncidentCreated"],
-          }}
-        />,
-      );
-
-      openPanel();
-      pressThenEscape("Reset to default", () => {
-        return screen.getByRole("radio", { name: "Newest first" });
-      });
-    });
-
-    test("Show all moves focus to the first event type, where Escape still closes the panel", () => {
-      render(
-        <Harness
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          initialValue={{
-            sortOrder: SortOrder.Ascending,
-            eventTypes: ["IncidentCreated", "OwnerUserAdded"],
-          }}
-        />,
-      );
-
-      openPanel();
-      pressThenEscape("Show all", () => {
-        return screen.getAllByRole("checkbox")[0]!;
-      });
-    });
-
-    /*
-     * With a search that hides every row there is no checkbox to land on, so
-     * focus goes to the checked sort order. Oldest first is checked here, so
-     * this also tells "the checked radio" apart from "the first radio".
-     */
-    test("Show all while the search hides every row moves focus to the checked sort order, where Escape still closes the panel", () => {
-      render(
-        <Harness
-          eventTypeOptions={LONG_EVENT_TYPE_OPTIONS}
-          initialValue={{
-            sortOrder: SortOrder.Ascending,
-            eventTypes: ["AlertCreated", "OwnerUserAdded"],
-          }}
-        />,
-      );
-
-      openPanel();
-      fireEvent.change(getSearchInput(), { target: { value: "zzz" } });
-      expect(screen.queryAllByRole("checkbox")).toHaveLength(0);
-
-      pressThenEscape("Show all", () => {
-        return getRadio("Oldest first");
-      });
-    });
-  });
-
-  describe("two instances on one page", () => {
-    test("get distinct ids and do not interfere with each other", () => {
-      const firstOnChange: OnChangeMock = createOnChange();
-      const secondOnChange: OnChangeMock = createOnChange();
-
-      render(
-        <div>
-          <Harness
-            eventTypeOptions={EVENT_TYPE_OPTIONS}
-            onChange={firstOnChange}
-          />
-          <Harness
-            eventTypeOptions={LONG_EVENT_TYPE_OPTIONS.slice(0, 2)}
-            onChange={secondOnChange}
-          />
-        </div>,
-      );
-
-      const triggers: Array<HTMLElement> = screen.getAllByRole("button", {
-        name: TRIGGER_NAME,
-      });
-
-      expect(triggers).toHaveLength(2);
-
-      const firstTrigger: HTMLElement = triggers[0]!;
-      const secondTrigger: HTMLElement = triggers[1]!;
-
-      expect(firstTrigger.id).not.toBe("");
-      expect(secondTrigger.id).not.toBe("");
-      expect(firstTrigger.id).not.toBe(secondTrigger.id);
-      expect(firstTrigger.getAttribute("aria-describedby")).not.toBe(
-        secondTrigger.getAttribute("aria-describedby"),
-      );
-
-      // Open the first one and filter it.
-      fireEvent.click(firstTrigger);
-
-      const firstPanel: HTMLElement = screen.getByRole("dialog", {
-        name: PANEL_NAME,
-      });
-      const firstPanelId: string = firstPanel.id;
-
-      expect(firstTrigger).toHaveAttribute("aria-controls", firstPanelId);
-      expect(secondTrigger).toHaveAttribute("aria-expanded", "false");
-      expect(secondTrigger).not.toHaveAttribute("aria-controls");
-      expect(
-        within(firstPanel).getByRole("radiogroup", { name: "Sort by time" }),
-      ).toBeInTheDocument();
-      expect(
-        within(firstPanel).getByRole("group", { name: "Event types" }),
-      ).toBeInTheDocument();
-
-      fireEvent.click(
-        within(firstPanel).getByRole("checkbox", {
-          name: "Incident Created",
-        }),
-      );
-
-      expect(firstOnChange).toHaveBeenCalledTimes(1);
-      expect(secondOnChange).not.toHaveBeenCalled();
-
-      // Pressing the second trigger is a press outside the first control.
-      fireEvent.mouseDown(secondTrigger);
-      fireEvent.click(secondTrigger);
-
-      const panels: Array<HTMLElement> = screen.getAllByRole("dialog", {
-        name: PANEL_NAME,
-      });
-
-      expect(panels).toHaveLength(1);
-
-      const secondPanel: HTMLElement = panels[0]!;
-
-      expect(secondPanel.id).not.toBe("");
-      expect(secondPanel.id).not.toBe(firstPanelId);
-      expect(firstTrigger).toHaveAttribute("aria-expanded", "false");
-      expect(firstTrigger).not.toHaveAttribute("aria-controls");
-      expect(secondTrigger).toHaveAttribute("aria-expanded", "true");
-      expect(secondTrigger).toHaveAttribute("aria-controls", secondPanel.id);
-      expect(
-        within(secondPanel).getByRole("radio", { name: "Newest first" }),
-      ).toHaveFocus();
-      expect(
-        within(secondPanel).getByRole("radiogroup", { name: "Sort by time" }),
-      ).toBeInTheDocument();
-      expect(
-        within(secondPanel)
-          .getAllByRole("checkbox")
-          .map((checkbox: HTMLElement) => {
-            return checkbox.closest("label")?.textContent || "";
-          }),
-      ).toEqual(["Alert Acknowledged", "Alert Created"]);
-
-      fireEvent.click(
-        within(secondPanel).getByRole("radio", { name: "Oldest first" }),
-      );
-
-      expect(secondOnChange).toHaveBeenCalledTimes(1);
-      expect(secondOnChange).toHaveBeenCalledWith({
-        sortOrder: SortOrder.Ascending,
-        eventTypes: [],
-      });
-      expect(firstOnChange).toHaveBeenCalledTimes(1);
-
-      // Each trigger keeps describing only its own feed.
-      expect(firstTrigger).toHaveAccessibleDescription(
-        "Newest first, 1 of 3 event types",
-      );
-      expect(secondTrigger).toHaveAccessibleDescription(
-        "Oldest first, all event types",
-      );
-      expect(
-        within(firstTrigger).getByTestId("feed-options-count"),
-      ).toHaveTextContent(/^1$/);
-      expect(
-        within(secondTrigger).queryByTestId("feed-options-count"),
-      ).not.toBeInTheDocument();
-    });
-
-    test("focus moving into the other instance closes the first", () => {
-      render(
-        <div>
-          <Harness eventTypeOptions={EVENT_TYPE_OPTIONS} />
-          <Harness eventTypeOptions={EVENT_TYPE_OPTIONS} />
-        </div>,
-      );
-
-      const triggers: Array<HTMLElement> = screen.getAllByRole("button", {
-        name: TRIGGER_NAME,
-      });
-
-      fireEvent.click(triggers[0]!);
-      expect(screen.getAllByRole("dialog")).toHaveLength(1);
-
-      // A click without a mousedown: only the focus hand-off can close it.
-      fireEvent.click(triggers[1]!);
-
-      expect(screen.getAllByRole("dialog")).toHaveLength(1);
-      expect(triggers[0]).toHaveAttribute("aria-expanded", "false");
-      expect(triggers[1]).toHaveAttribute("aria-expanded", "true");
-    });
-  });
-
-  /*
-   * A real i18next instance rather than a stubbed t(): the control looks its
-   * sentences up whole, relies on i18next leaving the {{placeholders}} it is
-   * not given, and fills them itself afterwards. Only a real instance proves
-   * that hand-off. The German values are the shipped ones, copied from
-   * App/FeatureSet/Dashboard/src/Locales/de.json; the keys are the English
-   * source text, exactly as those locale files key them.
-   *
-   * The instance reaches the component through I18nextProvider only. Adding
-   * .use(initReactI18next) would install it as react-i18next's global
-   * instance and quietly turn every other test in this file German.
-   */
-  describe("in German", () => {
-    const german: i18n = createInstance();
-
-    /*
-     * Two event labels whose German order differs from the English one.
-     * "Incident State Changed" is left out on purpose: a label with no
-     * translation yet stays in English, and is sorted among the German ones.
-     */
-    const GERMAN_TRANSLATIONS: Record<string, string> = {
-      "Filter & Sort": "Filtern & Sortieren",
-      "Filter and sort feed": "Feed filtern und sortieren",
-      "Newest first": "Neueste zuerst",
-      "Oldest first": "Älteste zuerst",
-      "Event types": "Ereignistypen",
-      "Search event types": "Ereignistypen suchen",
-      "Matching event types: {{count}}": "Passende Ereignistypen: {{count}}",
-      "Showing {{selected}} of {{total}} event types.":
-        "{{selected}} von {{total}} Ereignistypen werden angezeigt.",
-      "{{sortOrder}}, all event types": "{{sortOrder}}, alle Ereignistypen",
-      "{{sortOrder}}, {{selected}} of {{total}} event types":
-        "{{sortOrder}}, {{selected}} von {{total}} Ereignistypen",
-      "Incident Created": "Vorfall erstellt",
-      "User Added as Owner": "Benutzer als Eigentümer hinzugefügt",
-    };
-
-    beforeAll(async () => {
-      await german.init({
-        lng: "de",
-        resources: { de: { translation: GERMAN_TRANSLATIONS } },
-        interpolation: { escapeValue: false },
-        keySeparator: false,
-        nsSeparator: false,
-      });
-    });
-
-    const renderInGerman: (ui: React.ReactElement) => RenderResult = (
-      ui: React.ReactElement,
-    ): RenderResult => {
-      return render(<I18nextProvider i18n={german}>{ui}</I18nextProvider>);
-    };
-
-    const getGermanTrigger: () => HTMLElement = (): HTMLElement => {
-      return screen.getByRole("button", { name: "Filtern & Sortieren" });
-    };
-
-    const openGermanPanel: () => HTMLElement = (): HTMLElement => {
-      fireEvent.click(getGermanTrigger());
-
-      return screen.getByRole("dialog", { name: "Feed filtern und sortieren" });
-    };
-
-    test("names the trigger with the German label and describes the view in German", () => {
-      renderInGerman(
-        <FeedOptionsButton
-          value={DEFAULT_FEED_OPTIONS}
-          eventTypeOptions={EVENT_TYPE_OPTIONS}
-          onChange={createOnChange()}
-        />,
-      );
-
-      const trigger: HTMLElement = getGermanTrigger();
-
-      expect(trigger).toHaveAccessibleName("Filtern & Sortieren");
-      expect(trigger).toHaveAccessibleDescription(
-        "Neueste zuerst, alle Ereignistypen",
-      );
-      expect(trigger).toHaveAttribute(
-        "title",
-        "Neueste zuerst, alle Ereignistypen",
-      );
-
-      openGermanPanel();
-
-      expect(
-        screen.getByRole("group", { name: "Ereignistypen" }),
-      ).toBeInTheDocument();
-      expect(
-        screen.getAllByRole("radio").map((radio: HTMLElement) => {
-          return radio.textContent;
-        }),
-      ).toEqual(["Neueste zuerst", "Älteste zuerst"]);
-    });
-
-    test("fills the German sentences with the numbers as boxes are ticked", () => {
-      const onChange: OnChangeMock = createOnChange();
-
-      renderInGerman(
-        <Harness eventTypeOptions={EVENT_TYPE_OPTIONS} onChange={onChange} />,
-      );
-
-      openGermanPanel();
-      fireEvent.click(getCheckbox("Vorfall erstellt"));
-
-      expect(getLastCall(onChange)).toEqual({
-        sortOrder: SortOrder.Descending,
-        eventTypes: ["IncidentCreated"],
-      });
-      expect(getEventTypeSummary()).toHaveTextContent(
-        /^1 von 3 Ereignistypen werden angezeigt\.$/,
-      );
-      expect(getGermanTrigger()).toHaveAccessibleDescription(
-        "Neueste zuerst, 1 von 3 Ereignistypen",
-      );
-
-      fireEvent.click(getRadio("Älteste zuerst"));
-
-      expect(getGermanTrigger()).toHaveAccessibleDescription(
-        "Älteste zuerst, 1 von 3 Ereignistypen",
-      );
-    });
-
-    test("orders the checklist by the German labels, while payloads keep the feed's own order", () => {
-      const onChange: OnChangeMock = createOnChange();
-
-      renderInGerman(
-        <Harness eventTypeOptions={EVENT_TYPE_OPTIONS} onChange={onChange} />,
-      );
-
-      openGermanPanel();
-
-      /*
-       * In English this list reads Incident Created, Incident State Changed,
-       * User Added as Owner.
-       */
-      expect(getCheckboxLabels()).toEqual([
-        "Benutzer als Eigentümer hinzugefügt",
-        "Incident State Changed",
-        "Vorfall erstellt",
-      ]);
-
-      /*
-       * Ticked top to bottom as a German reader sees them, the request still
-       * lists them in the feed's order, so it - and the reload key - is the
-       * same in every language.
-       */
-      fireEvent.click(getCheckbox("Benutzer als Eigentümer hinzugefügt"));
-      fireEvent.click(getCheckbox("Vorfall erstellt"));
-
-      expect(getLastCall(onChange)).toEqual({
-        sortOrder: SortOrder.Descending,
-        eventTypes: ["IncidentCreated", "OwnerUserAdded"],
-      });
-    });
-
-    test("searches the German labels the reader sees, not the English ones behind them", () => {
-      const onChange: OnChangeMock = createOnChange();
-
-      renderInGerman(
-        <Harness
-          eventTypeOptions={LONG_EVENT_TYPE_OPTIONS}
-          onChange={onChange}
-        />,
-      );
-
-      openGermanPanel();
-
-      const search: HTMLElement = screen.getByRole("textbox", {
-        name: "Ereignistypen suchen",
-      });
-
-      fireEvent.change(search, { target: { value: "EIGENTÜMER" } });
-
-      expect(getCheckboxLabels()).toEqual([
-        "Benutzer als Eigentümer hinzugefügt",
-      ]);
-      expect(getSearchResults()).toHaveTextContent(
-        /^Passende Ereignistypen: 1$/,
-      );
-
-      fireEvent.click(getCheckbox("Benutzer als Eigentümer hinzugefügt"));
-
-      expect(getLastCall(onChange)).toEqual({
-        sortOrder: SortOrder.Descending,
-        eventTypes: ["OwnerUserAdded"],
-      });
-
-      // Its English label no longer matches; the untranslated rows still do.
-      fireEvent.change(search, { target: { value: "as owner" } });
-
-      expect(getCheckboxLabels()).toEqual(["Team Added as Owner"]);
-    });
-  });
-});