From 66755de530939e7b7820b14adcc841dc2337ec42 Mon Sep 17 00:00:00 2001
From: Julian Wielga <j@touk.pl>
Date: Wed, 14 Aug 2024 12:03:15 +0200
Subject: [PATCH] fix: support keyboard in header buttons

---
 src/components/window/header/HeaderButton.tsx | 32 ++++++++++++++++---
 .../window/header/HeaderButtonClose.tsx       |  2 +-
 .../window/header/HeaderButtonZoom.tsx        |  8 ++---
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/components/window/header/HeaderButton.tsx b/src/components/window/header/HeaderButton.tsx
index c6267fd8..c9aac6b5 100644
--- a/src/components/window/header/HeaderButton.tsx
+++ b/src/components/window/header/HeaderButton.tsx
@@ -1,9 +1,18 @@
 import { css, cx } from "@emotion/css";
 import { useTheme } from "@emotion/react";
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from "react";
+import React, {
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  forwardRef,
+  KeyboardEvent,
+  KeyboardEventHandler,
+  PointerEventHandler,
+} from "react";
 import { buttonReset } from "../footer/ButtonReset";
 
-export type HeaderButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+export type HeaderButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+  action?: PointerEventHandler<HTMLButtonElement> & KeyboardEventHandler<HTMLButtonElement>;
+};
 
 const useStyles = () => {
   const { colors } = useTheme();
@@ -25,10 +34,25 @@ const useStyles = () => {
   });
 };
 
+function filterByKeys<T = Element>(action: KeyboardEventHandler<T>, keys: KeyboardEvent["key"][]): KeyboardEventHandler<T> {
+  return (e: KeyboardEvent<T>) => {
+    if (!keys.includes(e.key)) return;
+    return action(e);
+  };
+}
+
 export const HeaderButton = forwardRef(function HeaderButton(
-  { className, ...props }: HeaderButtonProps,
+  { className, action, ...props }: HeaderButtonProps,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ): JSX.Element {
   const headerButtonTheme = useStyles();
-  return <button className={cx(buttonReset, headerButtonTheme, className)} {...props} ref={ref} />;
+  return (
+    <button
+      className={cx(buttonReset, headerButtonTheme, className)}
+      onPointerDown={action}
+      onKeyDown={filterByKeys(action, ["Enter", " "])}
+      {...props}
+      ref={ref}
+    />
+  );
 });
diff --git a/src/components/window/header/HeaderButtonClose.tsx b/src/components/window/header/HeaderButtonClose.tsx
index 1fe993fd..bc83de75 100644
--- a/src/components/window/header/HeaderButtonClose.tsx
+++ b/src/components/window/header/HeaderButtonClose.tsx
@@ -8,7 +8,7 @@ export interface HeaderButtonCloseProps {
 
 export function HeaderButtonClose({ closeDialog }: HeaderButtonCloseProps): JSX.Element {
   return (
-    <HeaderButton name="close" onPointerDown={() => closeDialog()}>
+    <HeaderButton name="close" action={() => closeDialog()}>
       <CloseIcon />
     </HeaderButton>
   );
diff --git a/src/components/window/header/HeaderButtonZoom.tsx b/src/components/window/header/HeaderButtonZoom.tsx
index 48da23d4..557c26c6 100644
--- a/src/components/window/header/HeaderButtonZoom.tsx
+++ b/src/components/window/header/HeaderButtonZoom.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, PointerEvent } from "react";
+import React, { UIEvent, useCallback, useRef } from "react";
 import { HeaderButton } from "./HeaderButton";
 import RestoreIcon from "./restore.svg";
 import ZoomIcon from "./zoom.svg";
@@ -11,8 +11,8 @@ export interface HeaderButtonZoomProps {
 
 export function HeaderButtonZoom({ zoomDialog, isMaximized, keepFocus }: HeaderButtonZoomProps): JSX.Element {
   const ref = useRef<HTMLButtonElement>();
-  const onPointerDown = useCallback(
-    (event: PointerEvent) => {
+  const action = useCallback(
+    (event: UIEvent) => {
       event.preventDefault();
 
       zoomDialog();
@@ -24,7 +24,7 @@ export function HeaderButtonZoom({ zoomDialog, isMaximized, keepFocus }: HeaderB
   );
 
   return (
-    <HeaderButton name="zoom" ref={ref} onPointerDown={onPointerDown}>
+    <HeaderButton name="zoom" ref={ref} action={action}>
       {isMaximized ? <RestoreIcon /> : <ZoomIcon />}
     </HeaderButton>
   );