creevey 0.10.0-beta.1 → 0.10.0-beta.10

package/package.json

@@ -1,22 +1,20 @@
 {
   "name": "creevey",
   "description": "Cross-browser screenshot testing tool for Storybook with fancy UI Runner",
-  "version": "0.10.0-beta.1",
+  "version": "0.10.0-beta.10",
   "type": "commonjs",
-  "bin": {
-    "creevey": "dist/cli.js"
-  },
+  "bin": "dist/cli.js",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./playwright": {
-      "default": "./dist/playwright.js",
-      "types": "./dist/playwright.d.ts"
+      "types": "./dist/playwright.d.ts",
+      "default": "./dist/playwright.js"
     },
     "./selenium": {
-      "default": "./dist/selenium.js",
-      "types": "./dist/selenium.d.ts"
+      "types": "./dist/selenium.d.ts",
+      "default": "./dist/selenium.js"
     },
     "./manager": "./dist/client/addon/manager.js",
     "./preview": "./dist/client/addon/preview.js",
@@ -90,16 +88,9 @@
   "dependencies": {
     "@koa/cors": "^5.0.0",
     "@octokit/core": "^6.1.2",
-    "@storybook/components": "^8.4.1",
-    "@storybook/core-events": "^8.4.1",
-    "@storybook/csf": "^0.1.11",
     "@storybook/icons": "^1.2.12",
-    "@storybook/manager-api": "^8.4.1",
-    "@storybook/preview-api": "^8.4.1",
-    "@storybook/theming": "^8.4.1",
-    "@storybook/types": "^8.4.1",
     "@types/chai": "^4.3.20",
-    "@types/dockerode": "^3.3.31",
+    "@types/dockerode": "^3.3.32",
     "@types/koa": "^2.15.0",
     "@types/koa-bodyparser": "^4.3.12",
     "@types/koa-mount": "^4.0.5",
@@ -110,7 +101,7 @@
     "@types/minimist": "^1.2.5",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.5",
-    "@types/qs": "^6.9.16",
+    "@types/qs": "^6.9.17",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/selenium-webdriver": "^4.1.27",
@@ -131,69 +122,72 @@
     "loglevel-plugin-prefix": "^0.8.4",
     "micromatch": "^4.0.8",
     "minimist": "^1.2.8",
-    "odiff-bin": "^3.1.2",
+    "odiff-bin": "^3.2.0",
     "pixelmatch": "^6.0.0",
     "pngjs": "^7.0.0",
     "polished": "^4.3.1",
-    "qs": "^6.13.0",
+    "qs": "^6.13.1",
     "semver": "^7.6.3",
     "shelljs": "^0.8.5",
     "tar-stream": "^3.1.7",
     "tsx": "^4.19.2",
-    "uuid": "^11.0.2",
+    "uuid": "^11.0.3",
     "ws": "^8.18.0",
     "yocto-spinner": "^0.1.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
-    "@eslint/js": "^9.14.0",
-    "@storybook/addon-essentials": "^8.4.1",
-    "@storybook/addon-interactions": "^8.4.1",
-    "@storybook/blocks": "^8.4.1",
-    "@storybook/channels": "^8.4.1",
-    "@storybook/client-logger": "^8.4.1",
-    "@storybook/core-common": "^8.4.1",
-    "@storybook/core-server": "^8.4.1",
-    "@storybook/react": "^8.4.1",
-    "@storybook/react-vite": "^8.4.1",
-    "@storybook/test": "^8.4.1",
+    "@eslint/js": "^9.15.0",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/channels": "^8.4.5",
+    "@storybook/components": "^8.4.5",
+    "@storybook/csf": "^0.1.11",
+    "@storybook/manager-api": "^8.4.5",
+    "@storybook/preview-api": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
+    "@storybook/test": "^8.4.5",
+    "@storybook/theming": "^8.4.5",
+    "@storybook/types": "^8.4.5",
     "@types/eslint": "^9.6.1",
     "@types/eslint__js": "^8.42.3",
     "@types/node": "^18.19.64",
     "@types/resize-observer-browser": "^0.1.11",
-    "@types/semver": "^7",
+    "@types/semver": "^7.5.8",
     "@types/tar-stream": "^3.1.3",
     "@types/tmp": "^0.2.6",
     "@vitejs/plugin-react-swc": "^3.7.1",
     "browserstack-local": "^1.5.5",
-    "chromatic": "^11.16.3",
-    "concurrently": "^9.0.1",
+    "chromatic": "^11.18.1",
+    "concurrently": "^9.1.0",
     "conventional-changelog-cli": "^5.0.0",
     "dotenv": "^16.4.5",
-    "eslint": "^9.14.0",
+    "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "git-cz": "^4.9.0",
-    "globals": "^15.11.0",
-    "husky": "^9.1.6",
+    "globals": "^15.12.0",
+    "husky": "^9.1.7",
     "immer": "^10.1.1",
     "lint-staged": "^15.2.10",
     "pinst": "^3.0.0",
-    "playwright-core": "^1.48.0",
+    "playwright-core": "^1.49.0",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "selenium-webdriver": "^4.26.0",
-    "storybook": "^8.4.1",
+    "storybook": "^8.4.5",
     "tmp": "^0.2.3",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.12.2",
+    "typescript-eslint": "^8.15.0",
     "use-immer": "^0.10.0",
-    "vite": "^5.4.10",
-    "vitest": "^2.1.4"
+    "vite": "^5.4.11",
+    "vitest": "^2.1.5"
   },
   "config": {
     "commitizen": {

package/src/client/addon/components/Panel.tsx

@@ -1,11 +1,11 @@
 import React, { JSX } from 'react';
 import { Loader } from '@storybook/components';
 import { styled } from '@storybook/theming';
-import { TestData } from '../../../types.js';
+import { noop, TestData } from '../../../types.js';
 import { ResultsPage } from '../../shared/components/ResultsPage.js';
 import { getTestPath } from '../../shared/helpers.js';
 import TestSelect from './TestSelect.js';
-import { noop } from 'lodash';
+
 interface PanelProps {
   tests: TestData[];
   selectedTestId: string;

package/src/client/addon/controller.ts

@@ -1,7 +1,14 @@
 import { Addon_TypesEnum } from '@storybook/types';
-import { SET_STORIES, STORY_RENDERED } from '@storybook/core-events';
 import { denormalizeStoryParameters } from '../../shared/index.js';
-import { CreeveyStatus, CreeveyUpdate, isDefined, TestData, TestStatus, StoriesRaw } from '../../types.js';
+import {
+  CreeveyStatus,
+  CreeveyUpdate,
+  isDefined,
+  TestData,
+  TestStatus,
+  StoriesRaw,
+  StorybookEvents,
+} from '../../types.js';
 import { initCreeveyClientApi, CreeveyClientApi } from '../shared/creeveyClientApi.js';
 import { calcStatus } from '../shared/helpers.js';
 import { getEmojiByTestStatus } from './utils.js';
@@ -25,8 +32,8 @@ export class CreeveyController {
     this.storybookApi = storybookApi;
   }
   initAll = async (): Promise<void> => {
-    this.storybookApi.on(STORY_RENDERED, this.onStoryRendered);
-    this.storybookApi.on(SET_STORIES, this.onSetStories);
+    this.storybookApi.on(StorybookEvents.STORY_RENDERED, this.onStoryRendered);
+    this.storybookApi.on(StorybookEvents.SET_STORIES, this.onSetStories);
     this.creeveyApi = await initCreeveyClientApi();
     this.creeveyApi.onUpdate(this.handleCreeveyUpdate);
     this.status = await this.creeveyApi.status;
@@ -93,7 +100,7 @@ export class CreeveyController {
       this.stories = prevStories;
       this.setPanelsTitle();
       // TODO Check setStories method in 6.x and migrate properly
-      this.storybookApi.emit(SET_STORIES, this.stories);
+      this.storybookApi.emit(StorybookEvents.SET_STORIES, this.stories);
     }
     this.updateStatusListeners.forEach((x) => {
       x(update);
@@ -213,7 +220,7 @@ export class CreeveyController {
     });
 
     // TODO Check setStories method in 6.x and migrate properly
-    this.storybookApi.emit(SET_STORIES, this.stories);
+    this.storybookApi.emit(StorybookEvents.SET_STORIES, this.stories);
   }
 
   addStatusToStoryName(name: string, status: TestStatus | undefined, skip: string | boolean): string {

package/src/client/addon/withCreevey.ts

@@ -1,10 +1,18 @@
-import * as Events from '@storybook/core-events';
 import type { Renderer, StoryContextForEnhancers } from '@storybook/csf';
 import { makeDecorator, PreviewWeb, StoryStore } from '@storybook/preview-api';
 import { Channel } from '@storybook/channels';
-import { CaptureOptions, CreeveyStoryParams, isObject, noop, StoriesRaw, StorybookGlobals } from '../../types.js';
+import {
+  CaptureOptions,
+  CreeveyStoryParams,
+  isObject,
+  noop,
+  StoriesRaw,
+  StorybookEvents,
+  StorybookGlobals,
+} from '../../types.js';
 import { serializeRawStories } from '../../shared/index.js';
 import { getConnectionUrl } from '../shared/helpers.js';
+import isEqual from 'lodash/isEqual.js';
 
 declare global {
   interface Window {
@@ -62,12 +70,12 @@ function catchRenderError(channel: Channel): Promise<void> & { cancel: () => voi
     rejectCallback(exception);
   }
   function removeHandlers(): void {
-    channel.off(Events.STORY_ERRORED, errorHandler);
-    channel.off(Events.STORY_THREW_EXCEPTION, errorHandler);
+    channel.off(StorybookEvents.STORY_ERRORED, errorHandler);
+    channel.off(StorybookEvents.STORY_THREW_EXCEPTION, errorHandler);
   }
 
-  channel.once(Events.STORY_ERRORED, errorHandler);
-  channel.once(Events.STORY_THREW_EXCEPTION, exceptionHandler);
+  channel.once(StorybookEvents.STORY_ERRORED, errorHandler);
+  channel.once(StorybookEvents.STORY_THREW_EXCEPTION, exceptionHandler);
 
   return Object.assign(promise, { cancel: removeHandlers });
 }
@@ -79,10 +87,10 @@ function waitForStoryRendered(channel: Channel): Promise<void> & { cancel: () =>
     resolveCallback();
   }
   function removeHandlers(): void {
-    channel.off(Events.STORY_RENDERED, renderHandler);
+    channel.off(StorybookEvents.STORY_RENDERED, renderHandler);
   }
 
-  channel.once(Events.STORY_RENDERED, renderHandler);
+  channel.once(StorybookEvents.STORY_RENDERED, renderHandler);
 
   return Object.assign(promise, { cancel: removeHandlers });
 }
@@ -132,6 +140,7 @@ let captureResolver: () => void;
 let waitForCreevey: Promise<void>;
 let creeveyReady: () => void;
 let setStoriesCounter = 0;
+let globals = {};
 
 export function withCreevey(): ReturnType<typeof makeDecorator> {
   const addonsChannel = (): Channel => window.__STORYBOOK_ADDONS_CHANNEL__;
@@ -166,7 +175,7 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     return stories;
   }
 
-  // TODO Use Events.STORY_RENDER_PHASE_CHANGED: `loading/rendering/completed` with storyId
+  // TODO Use StorybookEvents.STORY_RENDER_PHASE_CHANGED: `loading/rendering/completed` with storyId
   // TODO Check other statuses and statuses with play function
   async function selectStory(
     storyId: string,
@@ -188,8 +197,8 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     const capturePromise = waitForCaptureCall().then(() => (isCaptureCalled = true));
 
     setTimeout(() => {
-      if (storyId == currentStory) channel.emit(Events.FORCE_REMOUNT, { storyId });
-      else channel.emit(Events.SET_CURRENT_STORY, { storyId });
+      if (storyId == currentStory) channel.emit(StorybookEvents.FORCE_REMOUNT, { storyId });
+      else channel.emit(StorybookEvents.SET_CURRENT_STORY, { storyId });
     }, 0);
 
     try {
@@ -218,8 +227,11 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     }
   }
 
-  function updateGlobals(globals: StorybookGlobals): void {
-    addonsChannel().emit(Events.UPDATE_GLOBALS, { globals });
+  function updateGlobals(newGlobals: StorybookGlobals): void {
+    if (isEqual(globals, newGlobals)) return;
+
+    globals = newGlobals;
+    addonsChannel().emit(StorybookEvents.UPDATE_GLOBALS, { globals });
   }
 
   function insertIgnoreStyles(ignoreSelectors: string[]): HTMLStyleElement {

package/src/client/shared/components/ImagesView/SwapView.tsx

@@ -46,6 +46,24 @@ export const SwapView = withTheme(({ theme, expect, actual, diff }: ViewPropsWit
     setImage((prevImage) => (prevImage == 'actual' ? 'expect' : 'actual'));
   }, []);
 
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.code === 'Space' && e.altKey) {
+        e.preventDefault();
+        handleChangeView();
+      }
+    },
+    [handleChangeView],
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [handleKeyDown]);
+
   useEffect(() => {
     if (loaded) readyForCapture();
   }, [loaded]);

package/src/client/shared/components/PageHeader/ImagePreview.tsx

@@ -70,6 +70,7 @@ export const ImagePreview = withTheme(
       onClick(imageName);
     };
 
+    // TODO Add image name as a title
     return (
       <Button
         onClick={handleClick}

package/src/client/shared/components/ResultsPage.tsx

@@ -1,11 +1,11 @@
-import React, { JSX, useState } from 'react';
+import React, { JSX, useCallback, useEffect, useState } from 'react';
 import { Placeholder, ScrollArea } from '@storybook/components';
 import { styled, withTheme, Theme } from '@storybook/theming';
 import { ImagesView } from './ImagesView/ImagesView.js';
 import { PageHeader } from './PageHeader/PageHeader.js';
 import { PageFooter } from './PageFooter/PageFooter.js';
 import { getImageUrl } from '../helpers.js';
-import { getViewMode, VIEW_MODE_KEY } from '../viewMode.js';
+import { getViewMode, VIEW_MODE_KEY, viewModes } from '../viewMode.js';
 import { ImagesViewMode, TestResult } from '../../../types.js';
 
 interface ResultsPageProps {
@@ -77,10 +77,31 @@ export function ResultsPageInternal({
       )
     : [];
 
-  const handleChangeViewMode = (mode: ImagesViewMode): void => {
-    localStorage.setItem(VIEW_MODE_KEY, mode);
-    setViewMode(mode);
-  };
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!canApprove) return;
+      if (e.code === 'Tab') {
+        e.preventDefault();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        if (e.shiftKey) setViewMode((mode) => viewModes.at((viewModes.indexOf(mode) - 1) % viewModes.length)!);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        else setViewMode((mode) => viewModes.at((viewModes.indexOf(mode) + 1) % viewModes.length)!);
+      }
+    },
+    [canApprove],
+  );
+
+  useEffect(() => {
+    localStorage.setItem(VIEW_MODE_KEY, viewMode);
+  }, [viewMode]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [handleKeyDown]);
 
   return (
     <Container height={height}>
@@ -92,7 +113,7 @@ export function ResultsPageInternal({
           errorMessage={result.error}
           showViewModes={hasDiffAndExpect}
           viewMode={viewMode}
-          onViewModeChange={handleChangeViewMode}
+          onViewModeChange={setViewMode}
           onImageChange={onImageChange}
           imagesWithError={imagesWithError}
         />

package/src/client/web/CreeveyApp.tsx

@@ -17,7 +17,7 @@ import {
   CreeveyViewFilter,
   getFailedTests,
 } from '../shared/helpers.js';
-import { CreeveyContext } from './CreeveyContext.js';
+import { CreeveyContext, FocusableItem } from './CreeveyContext.js';
 import { KeyboardEvents } from './KeyboardEventsContext.js';
 import { SideBar } from './CreeveyView/SideBar/index.js';
 import { ResultsPage } from '../shared/components/ResultsPage.js';
@@ -59,8 +59,9 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
   const failedTests = useMemo(() => getFailedTests(tests), [tests]);
 
   const [retry, setRetry] = useState(openedTest?.results?.length ?? 0);
-  const result = openedTest?.results?.[retry - 1] ?? { images: {} };
-  const [imageName, setImageName] = useState(Object.keys(result.images ?? {})[0] ?? '');
+  const result = useMemo(() => openedTest?.results?.[retry - 1], [openedTest, retry]);
+  const [imageName, setImageName] = useState(Object.keys(result?.images ?? {})[0] ?? '');
+  const [sidebarFocusedItem, setSidebarFocusedItem] = useState<FocusableItem>([]);
   const canApprove = useMemo(
     () =>
       Boolean(
@@ -94,6 +95,7 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
     (test: CreeveyTest): void => {
       const testPath = getTestPath(test);
       setSearchParams(testPath);
+      setSidebarFocusedItem(testPath);
       updateTests((draft) => {
         openSuite(draft, testPath, true);
         openTest(testPath);
@@ -103,11 +105,24 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
   );
 
   const handleGoToNextFailedTest = useCallback(() => {
-    if (failedTests.length <= 1) return;
+    if (failedTests.length == 0) return;
     const currentTest = failedTests.findIndex((t) => t.id === openedTest?.id);
-    const nextFailedTest = failedTests[currentTest + 1] || failedTests[0];
-    handleOpenTest(nextFailedTest);
-  }, [failedTests, handleOpenTest, openedTest?.id]);
+    const failedImages = Object.entries(result?.images ?? {})
+      .filter(([name, image]) =>
+        // TODO Move to helpers, it duplicates in a few places
+        Boolean(image?.error != null && openedTest?.approved?.[name] != retry - 1 && result?.status != 'success'),
+      )
+      .map(([name]) => name);
+    if (
+      failedImages.length > 1 &&
+      (failedTests.length == 1 || failedImages.indexOf(imageName) < failedImages.length - 1)
+    ) {
+      setImageName((name) => failedImages[failedImages.indexOf(name) + 1] ?? failedImages[0]);
+    } else {
+      const nextFailedTest = failedTests[currentTest + 1] ?? failedTests[0];
+      handleOpenTest(nextFailedTest);
+    }
+  }, [failedTests, handleOpenTest, openedTest, retry, result, imageName]);
 
   const handleImageApproveNew = useCallback((): void => {
     const id = openedTest?.id;
@@ -189,12 +204,15 @@ export function CreeveyApp({ api, initialState }: CreeveyAppProps): JSX.Element
       value={{
         isReport: initialState.isReport,
         isRunning,
+        onImageNext: canApprove ? handleGoToNextFailedTest : undefined,
         onImageApprove: canApprove ? handleImageApproveAndGoNext : undefined,
         onApproveAll: handleApproveAll,
         onStart: handleStart,
         onStop: handleStop,
         onSuiteOpen: handleSuiteOpen,
         onSuiteToggle: handleSuiteToggle,
+        sidebarFocusedItem,
+        setSidebarFocusedItem,
       }}
     >
       <ThemeProvider theme={ensure(themes[theme])}>

package/src/client/web/CreeveyContext.tsx

@@ -1,26 +1,35 @@
 import React, { useContext } from 'react';
 import { CreeveySuite, noop } from '../../types.js';
 
+export type SuitePath = string[];
+export type FocusableItem = null | SuitePath;
+
 export interface CreeveyContextType {
   isReport: boolean;
   isRunning: boolean;
   onStop: () => void;
+  onImageNext?: () => void;
   onImageApprove?: () => void;
   onApproveAll: () => void;
   onStart: (rootSuite: CreeveySuite) => void;
   onSuiteOpen: (path: string[], opened: boolean) => void;
   onSuiteToggle: (path: string[], checked: boolean) => void;
+  sidebarFocusedItem: FocusableItem;
+  setSidebarFocusedItem: (item: FocusableItem) => void;
 }
 
 export const CreeveyContext = React.createContext<CreeveyContextType>({
   isReport: true,
   isRunning: false,
+  onImageNext: noop,
   onImageApprove: noop,
   onApproveAll: noop,
   onStop: noop,
   onStart: noop,
   onSuiteOpen: noop,
   onSuiteToggle: noop,
+  sidebarFocusedItem: [],
+  setSidebarFocusedItem: noop,
 });
 
 export const useCreeveyContext = () => useContext(CreeveyContext);

package/src/client/web/CreeveyView/SideBar/Search.tsx

@@ -1,7 +1,7 @@
-import React, { JSX, ChangeEvent, useContext, useRef, useState } from 'react';
+import React, { JSX, ChangeEvent, useRef, useState } from 'react';
 import { SearchIcon, CloseAltIcon } from '@storybook/icons';
 import { styled, Theme, withTheme } from '@storybook/theming';
-import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
+import { useCreeveyContext } from '../../CreeveyContext.js';
 
 interface SearchProps {
   onChange: (arg: string) => void;
@@ -100,7 +100,7 @@ const FilterForm = withTheme(
 );
 
 export const Search = ({ onChange, value }: SearchProps): JSX.Element => {
-  const { setSidebarFocusedItem } = useContext(KeyboardEventsContext);
+  const { setSidebarFocusedItem } = useCreeveyContext();
   const [focussed, onSetFocussed] = useState(false);
   const searchRef = useRef<HTMLInputElement>(null);
 

package/src/client/web/CreeveyView/SideBar/SideBar.tsx

@@ -62,6 +62,7 @@ const SelectAllContainer = styled.div({
 });
 
 const TestsContainer = styled.div({
+  marginBottom: '8px',
   position: 'relative',
   height: '100%',
 });

package/src/client/web/CreeveyView/SideBar/SideBarFooter.tsx

@@ -1,4 +1,4 @@
-import React, { JSX } from 'react';
+import React, { JSX, useCallback, useEffect, useState } from 'react';
 import { styled, withTheme } from '@storybook/theming';
 import { Button } from '@storybook/components';
 import { ChevronRightIcon } from '@storybook/icons';
@@ -21,15 +21,46 @@ const Container = styled.div({
 });
 
 export function SideBarFooter(): JSX.Element {
-  const { onApproveAll, onImageApprove } = useCreeveyContext();
+  const { onApproveAll, onImageApprove, onImageNext } = useCreeveyContext();
+  const [isAlt, setIsAlt] = useState(false);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.code === 'AltLeft') {
+      e.preventDefault();
+      setIsAlt(true);
+    }
+  }, []);
+  const handleKeyUp = useCallback((e: KeyboardEvent) => {
+    if (e.code === 'AltLeft') {
+      e.preventDefault();
+      setIsAlt(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+    document.addEventListener('keyup', handleKeyUp, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+      document.removeEventListener('keyup', handleKeyUp, false);
+    };
+  }, [handleKeyDown, handleKeyUp]);
 
   return (
     <Sticky>
       <Container>
-        <Button variant="solid" size="medium" onClick={onImageApprove} disabled={!onImageApprove}>
-          Approve
-          <ChevronRightIcon />
-        </Button>
+        {isAlt ? (
+          <Button variant="outline" size="medium" onClick={onImageNext} disabled={!onImageApprove}>
+            Next
+            <ChevronRightIcon />
+          </Button>
+        ) : (
+          <Button variant="solid" size="medium" onClick={onImageApprove} disabled={!onImageApprove}>
+            Approve
+            <ChevronRightIcon />
+          </Button>
+        )}
         <Button variant="outline" size="medium" onClick={onApproveAll}>
           Approve all
         </Button>

package/src/client/web/CreeveyView/SideBar/SuiteLink.tsx

@@ -1,11 +1,10 @@
-import React, { JSX, useRef, useContext, useEffect, useMemo } from 'react';
+import React, { JSX, useRef, useEffect, useMemo } from 'react';
 import { ChevronDownIcon, ChevronRightIcon } from '@storybook/icons';
 import { styled, withTheme, Theme } from '@storybook/theming';
 import { Checkbox, CheckboxContainer } from './Checkbox.js';
 import { TestStatusIcon } from './TestStatusIcon.js';
 import { CreeveySuite, isTest } from '../../../../types.js';
-import { CreeveyContext } from '../../CreeveyContext.js';
-import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
+import { useCreeveyContext } from '../../CreeveyContext.js';
 
 export interface SuiteLinkProps {
   title: string;
@@ -79,8 +78,7 @@ export const SuiteTitle = styled.span({
 });
 
 export function SuiteLink({ title, suite, 'data-testid': dataTid }: SuiteLinkProps): JSX.Element {
-  const { onSuiteOpen, onSuiteToggle } = useContext(CreeveyContext);
-  const { sidebarFocusedItem, setSidebarFocusedItem } = useContext(KeyboardEventsContext);
+  const { onSuiteOpen, onSuiteToggle, sidebarFocusedItem, setSidebarFocusedItem } = useCreeveyContext();
   const checkboxRef = useRef<Checkbox>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 

package/src/client/web/CreeveyView/SideBar/TestLink.tsx

@@ -1,9 +1,8 @@
 import React, { JSX, useEffect, useCallback, useContext, useMemo, useRef } from 'react';
 import { CreeveyTest } from '../../../../types.js';
 import { TestStatusIcon } from './TestStatusIcon.js';
-import { CreeveyContext } from '../../CreeveyContext.js';
+import { useCreeveyContext } from '../../CreeveyContext.js';
 import { SideBarContext } from './SideBar.js';
-import { KeyboardEventsContext } from '../../KeyboardEventsContext.js';
 import { Button, Container, SuiteContainer, SuiteTitle } from './SuiteLink.js';
 import { Checkbox, CheckboxContainer } from './Checkbox.js';
 import { getTestPath } from '../../../shared/helpers.js';
@@ -20,9 +19,8 @@ const TestContainer = styled(SuiteContainer)({
 });
 
 export function TestLink({ title, opened, test }: TestLinkProps): JSX.Element {
-  const { onSuiteToggle } = useContext(CreeveyContext);
+  const { onSuiteToggle, sidebarFocusedItem, setSidebarFocusedItem } = useCreeveyContext();
   const { onOpenTest } = useContext(SideBarContext);
-  const { sidebarFocusedItem, setSidebarFocusedItem } = useContext(KeyboardEventsContext);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
   const emptyResults = (test.results?.length ?? 0) == 0;