[its-a-drag-to-tap-out] docs(changeset): Ensure that dragging a point also moves the focus for Interactive Graph (#2282)

## Summary:
This PR is part of the Interactive Graph project. 

The purpose of the PR is to ensure that dragging a point with a touch event also moves the focus to that point. This is to ensure that the focus always remains on the last element interacted with, which avoids confusion when the user tries to delete points or move them with the keyboard. 

NOTE: I wasn't able to fix a bug related to the hover state sizing of the control points, as I simply cannot seem to find where this is occurring. As a result, touch-dragging a point without any delay can result in the point not getting "bigger". However, the focus outline, hairlines, and focus itself all move to the correct element. I've attached a video below to demonstrate this.

## Video:
https://github.com/user-attachments/assets/59e26360-b54e-4340-b49b-c4f9c32c4baf

Issue: LEMS-2475

## Test plan:
- Manual testing

Author: SonicScrewdriver

Reviewers: SonicScrewdriver, nishasy

Required Reviewers:

Approved By: nishasy

Checks: ✅ 8 checks were successful

Pull Request URL: #2282

Author: SonicScrewdriver

.changeset/serious-days-swim.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Ensure that dragging a point also moves the focus for Interactive Graph

packages/perseus/src/widgets/interactive-graphs/graphs/components/use-control-point.tsx

@@ -68,6 +68,7 @@ export function useControlPoint(params: Params): Return {
 
     const [focused, setFocused] = useState(false);
     const focusableHandleRef = useRef<SVGGElement>(null);
+
     useDraggable({
         gestureTarget: focusableHandleRef,
         point,
@@ -92,10 +93,21 @@ export function useControlPoint(params: Params): Return {
             y: srFormatNumber(point[Y], locale),
         });
 
+    // Set the forwarded ref to the focusable handle element when it changes.
     useLayoutEffect(() => {
         setForwardedRef(forwardedRef, focusableHandleRef.current);
     }, [forwardedRef]);
 
+    // If the point is being dragged and is not focused, focus the focusable handle.
+    useLayoutEffect(() => {
+        if (dragging && !focused) {
+            // If the point is being dragged, focus the focusable handle so that
+            // users can continue to interact with the point using the keyboard or buttons.
+            // This particular focus call ensures that the focus ring and hairlines are visible.
+            focusableHandleRef.current?.focus();
+        }
+    }, [dragging, focused]);
+
     const focusableHandle = (
         <g
             data-testid="movable-point__focusable-handle"

packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.ts

@@ -507,6 +507,7 @@ function doMovePoint(
             return {
                 ...state,
                 hasBeenInteractedWith: true,
+                focusedPointIndex: action.index,
                 coords: setAtIndex({
                     array: state.coords,
                     index: action.index,