Custom Hook: useKeyboardAction สำหรับ React / Next.js เพื่อแก้ A11y อัตโนมัติ

import { useCallback, type KeyboardEvent, type MouseEvent } from 'react';

interface UseKeyboardActionOptions {
  disabled?: boolean;
  stopPropagation?: boolean;
}

/**
 * Hook สำหรับสร้าง Props ที่ทำให้ Non-interactive elements (เช่น div, span)
 * รองรับการคลิกผ่านคีย์บอร์ด (Enter / Space) ตามมาตรฐาน WCAG
 */
export function useKeyboardAction<t extends="" htmlelement="HTMLDivElement">(
  action: (event: MouseEvent<t> | KeyboardEvent<t>) => void,
  options: UseKeyboardActionOptions = {}
) {
  const { disabled = false, stopPropagation = false } = options;

  const handleClick = useCallback(
    (event: MouseEvent<t>) => {
      if (disabled) return;
      if (stopPropagation) event.stopPropagation();
      action(event);
    },
    [action, disabled, stopPropagation]
  );

  const handleKeyDown = useCallback(
    (event: KeyboardEvent<t>) => {
      if (disabled) return;

      // รองรับปุ่ม Enter และ Spacebar
      if (event.key === 'Enter' || event.key === ' ') {
        // ป้องกันหน้าเว็บเลื่อนลง (Default scroll behavior) ตอนกด Spacebar
        event.preventDefault();
        
        if (stopPropagation) event.stopPropagation();
        action(event);
      }
    },
    [action, disabled, stopPropagation]
  );

  return {
    role: 'button' as const,
    tabIndex: disabled ? -1 : 0,
    'aria-disabled': disabled ? true : undefined,
    onClick: handleClick,
    onKeyDown: handleKeyDown,
  };
}</t></t></t></t></t>

import React from 'react';
import { useKeyboardAction } from '@/hooks/useKeyboardAction';

export const InteractiveCard = () => {
  const handleSelectCard = () => {
    console.log('การ์ดถูกเลือกแล้ว!');
  };

  // 1. ผูกฟังก์ชันเข้ากับ Hook
  const cardActionProps = useKeyboardAction(handleSelectCard);

  return (
    // 2. Spread Props ลงใน div ได้เลย
    <div
      {...cardActionProps}
      className="p-6 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 
                 cursor-pointer transition shadow-sm hover:shadow-md
                 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
    >
      <h3 class="font-bold text-lg text-slate-900 dark:text-white">การ์ดบริการคลาวด์</h3>
      <p class="text-slate-600 dark:text-slate-300 text-sm mt-1">
        คลิกด้วยเมาส์ หรือกดปุ่ม Tab แล้วกด Enter/Space เพื่อเลือกรายการนี้
      </p>
    </div>
  );
};

const disabledActionProps = useKeyboardAction(handleAction, { disabled: true });

return (
  <div 
    {...disabledActionProps} 
    className="opacity-50 cursor-not-allowed ..."
  >
    ปุ่มปิดการใช้งาน
  </div>
);