refactor(a11y): add basic lint for accessibility (#2021)

apps/readest-app/src/hooks/useDrag.ts

@@ -1,7 +1,10 @@
 import { useCallback, useRef } from 'react';
 
+export type DragKey = 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown';
+
 export const useDrag = (
   onDragMove: (data: { clientX: number; clientY: number; deltaX: number; deltaY: number }) => void,
+  onDragKeyDown: (data: { key: DragKey; step: number }) => void,
   onDragEnd?: (data: {
     velocity: number;
     deltaT: number;
@@ -31,6 +34,10 @@ export const useDrag = (
       }
       startTime.current = performance.now();
 
+      document.body.style.pointerEvents = 'none';
+      document.body.style.userSelect = 'none';
+      document.documentElement.style.cursor = 'col-resize';
+
       const handleMove = (event: MouseEvent | TouchEvent) => {
         if (isDragging.current) {
           let deltaX = 0;
@@ -58,6 +65,11 @@ export const useDrag = (
 
       const handleEnd = (event: MouseEvent | TouchEvent) => {
         isDragging.current = false;
+
+        document.body.style.pointerEvents = '';
+        document.body.style.userSelect = '';
+        document.documentElement.style.cursor = '';
+
         let deltaX = 0;
         let deltaY = 0;
         let clientX = 0;
@@ -96,5 +108,24 @@ export const useDrag = (
     [onDragMove, onDragEnd],
   );
 
-  return { handleDragStart };
+  const handleDragKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const step = 0.02;
+      switch (e.key) {
+        case 'ArrowUp':
+        case 'ArrowDown':
+        case 'ArrowLeft':
+        case 'ArrowRight':
+          onDragKeyDown({ key: e.key, step });
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    [onDragKeyDown],
+  );
+
+  return { handleDragStart, handleDragKeyDown };
 };