react-resizable-panels 0.0.8 → 0.0.9

package/dist/react-resizable-panels.module.js

@@ -38,6 +38,8 @@ function $ad28bce87b00c2be$export$2e2bcd8739ae039({ children: children = null ,
     const style = getPanelStyle(id);
     return /*#__PURE__*/ (0, $fpI56$jsxDEV)("div", {
         className: className,
+        "data-panel-id": id,
+        id: `data-panel-id-${id}`,
         style: style,
         children: children
     }, void 0, false, {
@@ -87,10 +89,56 @@ function $6ff1a22b27cc039d$export$af183b313c61be4f(autoSaveId, panelIds, sizes)
 }
 
 
-function $4b6140a59f4bd98c$export$70637efcd850e4ef(event, prevCoordinates) {
+const $96f6397ae645d178$var$element = document.createElement("div");
+$96f6397ae645d178$var$element.getBoundingClientRect();
+function $96f6397ae645d178$export$70637efcd850e4ef(event, prevCoordinates, dimensions, direction) {
     const { screenX: prevScreenX , screenY: prevScreenY  } = prevCoordinates;
+    const { height: height , width: width  } = dimensions;
     const getMovementBetween = (current, prev)=>prev === 0 ? 0 : current - prev;
-    if ($4b6140a59f4bd98c$export$ce897e7f0aa63661(event)) {
+    if ($96f6397ae645d178$export$e7bf60a870f429b0(event)) {
+        let movementX = 0;
+        let movementY = 0;
+        const size = direction === "horizontal" ? width : height;
+        const denominator = event.shiftKey ? 10 : 100;
+        const delta = size / denominator;
+        switch(event.key){
+            case "ArrowDown":
+                movementY = delta;
+                break;
+            case "ArrowLeft":
+                movementX = -delta;
+                break;
+            case "ArrowRight":
+                movementX = delta;
+                break;
+            case "ArrowUp":
+                movementY = -delta;
+                break;
+            case "End":
+                if (direction === "horizontal") movementX = size;
+                else movementY = size;
+                break;
+            case "Home":
+                if (direction === "horizontal") movementX = -size;
+                else movementY = -size;
+                break;
+        }
+        // Estimate screen X/Y to be the center of the resize handle.
+        // Otherwise the first mouse/touch event after a keyboard event will appear to "jump"
+        let screenX = 0;
+        let screenY = 0;
+        if (document.activeElement) {
+            const rect = document.activeElement.getBoundingClientRect();
+            screenX = rect.left + rect.width / 2;
+            screenY = rect.top + rect.height / 2;
+        }
+        return {
+            movementX: movementX,
+            movementY: movementY,
+            screenX: screenX,
+            screenY: screenY
+        };
+    } else if ($96f6397ae645d178$export$ce897e7f0aa63661(event)) {
         const firstTouch = event.touches[0];
         return {
             movementX: getMovementBetween(firstTouch.screenX, prevScreenX),
@@ -98,20 +146,223 @@ function $4b6140a59f4bd98c$export$70637efcd850e4ef(event, prevCoordinates) {
             screenX: firstTouch.screenX,
             screenY: firstTouch.screenY
         };
-    }
-    return {
+    } else if ($96f6397ae645d178$export$5107d838cdd17dee(event)) return {
         movementX: getMovementBetween(event.screenX, prevScreenX),
         movementY: getMovementBetween(event.screenY, prevScreenY),
         screenX: event.screenX,
         screenY: event.screenY
     };
+    else throw Error(`Unsupported event type: "${event.type}"`);
 }
-function $4b6140a59f4bd98c$export$ce897e7f0aa63661(event) {
+function $96f6397ae645d178$export$e7bf60a870f429b0(event) {
+    return event.type === "keydown";
+}
+function $96f6397ae645d178$export$5107d838cdd17dee(event) {
+    return event.type === "mousemove";
+}
+function $96f6397ae645d178$export$ce897e7f0aa63661(event) {
     return event.type === "touchmove";
 }
 
 
-const $c44ee3356398c8a1$var$PRECISION = 5;
+const $fc25b75732bfda27$export$d6d3992f3becc879 = 5;
+
+
+function $f30c804b5fe6cc1a$export$f50bae335f53943c(panels, idBefore, idAfter, delta, prevSizes) {
+    if (delta === 0) return prevSizes;
+    const panelsArray = $f30c804b5fe6cc1a$export$a861c0ad45885494(panels);
+    const nextSizes = prevSizes.concat();
+    let deltaApplied = 0;
+    // A resizing panel affects the panels before or after it.
+    //
+    // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.
+    // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
+    //
+    // A positive delta means the panel immediately before the resizer should "expand".
+    // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.
+    let pivotId = delta < 0 ? idBefore : idAfter;
+    let index = panelsArray.findIndex((panel)=>panel.id === pivotId);
+    while(true){
+        const panel = panelsArray[index];
+        const prevSize = prevSizes[index];
+        const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);
+        if (prevSize !== nextSize) {
+            deltaApplied += prevSize - nextSize;
+            nextSizes[index] = nextSize;
+            if (deltaApplied.toPrecision((0, $fc25b75732bfda27$export$d6d3992f3becc879)) >= delta.toPrecision((0, $fc25b75732bfda27$export$d6d3992f3becc879))) break;
+        }
+        if (delta < 0) {
+            if (--index < 0) break;
+        } else {
+            if (++index >= panelsArray.length) break;
+        }
+    }
+    // If we were unable to resize any of the panels panels, return the previous state.
+    // This will essentially bailout and ignore the "mousemove" event.
+    if (deltaApplied === 0) return prevSizes;
+    // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
+    pivotId = delta < 0 ? idAfter : idBefore;
+    index = panelsArray.findIndex((panel)=>panel.id === pivotId);
+    nextSizes[index] = prevSizes[index] + deltaApplied;
+    return nextSizes;
+}
+function $f30c804b5fe6cc1a$export$622cea445a1c5b7d(panels, id, direction, sizes, height, width) {
+    const panelsArray = $f30c804b5fe6cc1a$export$a861c0ad45885494(panels);
+    let index = panelsArray.findIndex((panel)=>panel.id === id);
+    if (index < 0) return 0;
+    let scaledOffset = 0;
+    for(index = index - 1; index >= 0; index--){
+        const panel = panelsArray[index];
+        scaledOffset += $f30c804b5fe6cc1a$export$31b21d0167753bb4(panels, panel.id, direction, sizes, height, width);
+    }
+    return Math.round(scaledOffset);
+}
+function $f30c804b5fe6cc1a$export$7361ed18ff57179e(id) {
+    const element = document.querySelector(`[data-panel-id="${id}"]`);
+    if (element) return element;
+    return null;
+}
+function $f30c804b5fe6cc1a$export$2e27d3a347680388(id) {
+    const element = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
+    if (element) return element;
+    return null;
+}
+function $f30c804b5fe6cc1a$export$96a40be80fb6c3c8(id) {
+    const handles = $f30c804b5fe6cc1a$export$8d0cd3c32ddc045e();
+    const index = handles.findIndex((handle)=>handle.getAttribute("data-panel-resize-handle-id") === id);
+    return index ?? null;
+}
+function $f30c804b5fe6cc1a$export$8d0cd3c32ddc045e() {
+    return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id]`));
+}
+function $f30c804b5fe6cc1a$export$ae14931f0a0256a3(groupId) {
+    return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
+}
+function $f30c804b5fe6cc1a$export$68d3a33c21dfbe27(groupId, handleId, panelsArray) {
+    const handle = $f30c804b5fe6cc1a$export$2e27d3a347680388(handleId);
+    const handles = $f30c804b5fe6cc1a$export$ae14931f0a0256a3(groupId);
+    const index = handles.indexOf(handle);
+    const idBefore = panelsArray[index]?.id ?? null;
+    const idAfter = panelsArray[index + 1]?.id ?? null;
+    return [
+        idBefore,
+        idAfter
+    ];
+}
+function $f30c804b5fe6cc1a$export$a861c0ad45885494(panels) {
+    return Array.from(panels.values()).sort((a, b)=>a.order - b.order);
+}
+function $f30c804b5fe6cc1a$export$31b21d0167753bb4(panels, id, direction, sizes, height, width) {
+    const totalSize = direction === "horizontal" ? width : height;
+    if (panels.size === 1) return totalSize;
+    const panelsArray = $f30c804b5fe6cc1a$export$a861c0ad45885494(panels);
+    const index = panelsArray.findIndex((panel)=>panel.id === id);
+    const size = sizes[index];
+    if (size == null) return 0;
+    return Math.round(size * totalSize);
+}
+
+
+
+
+
+function $99ad02c951ec80d0$export$d9fcbe062527d159({ committedValuesRef: committedValuesRef , groupId: groupId , panels: panels , setSizes: setSizes , sizes: sizes  }) {
+    (0, $fpI56$useEffect)(()=>{
+        const { direction: direction , height: height , panels: panels , width: width  } = committedValuesRef.current;
+        const handles = (0, $f30c804b5fe6cc1a$export$ae14931f0a0256a3)(groupId);
+        const cleanupFunctions = handles.map((handle)=>{
+            const handleId = handle.getAttribute("data-panel-resize-handle-id");
+            const panelsArray = (0, $f30c804b5fe6cc1a$export$a861c0ad45885494)(panels);
+            const [idBefore, idAfter] = (0, $f30c804b5fe6cc1a$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
+            if (idBefore == null || idAfter == null) return ()=>{};
+            const ariaValueMax = panelsArray.reduce((difference, panel)=>{
+                if (panel.id !== idBefore) return difference - panel.minSize;
+                return difference;
+            }, 1);
+            const ariaValueMin = panelsArray.find((panel)=>panel.id == idBefore)?.minSize ?? 0;
+            const size = (0, $f30c804b5fe6cc1a$export$31b21d0167753bb4)(panels, idBefore, direction, sizes, height, width);
+            const ariaValueNow = size / (direction === "horizontal" ? width : height);
+            handle.setAttribute("aria-valuemax", "" + Math.round(100 * ariaValueMax));
+            handle.setAttribute("aria-valuemin", "" + Math.round(100 * ariaValueMin));
+            handle.setAttribute("aria-valuenow", "" + Math.round(100 * ariaValueNow));
+            const onKeyDown = (event)=>{
+                switch(event.key){
+                    case "Enter":
+                        {
+                            const index = panelsArray.findIndex((panel)=>panel.id === idBefore);
+                            if (index >= 0) {
+                                const panelData = panelsArray[index];
+                                const size = sizes[index];
+                                if (size != null) {
+                                    let delta = 0;
+                                    if (size.toPrecision((0, $fc25b75732bfda27$export$d6d3992f3becc879)) <= panelData.minSize.toPrecision((0, $fc25b75732bfda27$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
+                                    else delta = -(direction === "horizontal" ? width : height);
+                                    const nextSizes = (0, $f30c804b5fe6cc1a$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, sizes);
+                                    if (sizes !== nextSizes) setSizes(nextSizes);
+                                }
+                            }
+                            break;
+                        }
+                }
+            };
+            handle.addEventListener("keydown", onKeyDown);
+            const panelBefore = (0, $f30c804b5fe6cc1a$export$7361ed18ff57179e)(idBefore);
+            if (panelBefore != null) handle.setAttribute("aria-controls", panelBefore.id);
+            return ()=>{
+                handle.removeAttribute("aria-valuemax");
+                handle.removeAttribute("aria-valuemin");
+                handle.removeAttribute("aria-valuenow");
+                handle.removeEventListener("keydown", onKeyDown);
+                if (panelBefore != null) handle.removeAttribute("aria-controls");
+            };
+        });
+        return ()=>{
+            cleanupFunctions.forEach((cleanupFunction)=>cleanupFunction());
+        };
+    }, [
+        groupId,
+        panels,
+        sizes
+    ]);
+}
+function $99ad02c951ec80d0$export$33b0bea6ac3ffb03({ disabled: disabled , handleId: handleId , resizeHandler: resizeHandler  }) {
+    (0, $fpI56$useEffect)(()=>{
+        if (disabled || resizeHandler == null) return;
+        const handleElement = (0, $f30c804b5fe6cc1a$export$2e27d3a347680388)(handleId);
+        if (handleElement == null) return;
+        const onKeyDown = (event)=>{
+            switch(event.key){
+                case "ArrowDown":
+                case "ArrowLeft":
+                case "ArrowRight":
+                case "ArrowUp":
+                case "End":
+                case "Home":
+                    resizeHandler(event);
+                    break;
+                case "F6":
+                    {
+                        const handles = (0, $f30c804b5fe6cc1a$export$8d0cd3c32ddc045e)();
+                        const index = (0, $f30c804b5fe6cc1a$export$96a40be80fb6c3c8)(handleId);
+                        const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
+                        const nextHandle = handles[nextIndex];
+                        nextHandle.focus();
+                        break;
+                    }
+            }
+        };
+        handleElement.addEventListener("keydown", onKeyDown);
+        return ()=>{
+            handleElement.removeEventListener("keydown", onKeyDown);
+        };
+    }, [
+        disabled,
+        handleId,
+        resizeHandler
+    ]);
+}
+
+
 function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , height: height , width: width  }) {
     const groupId = (0, $968185313205dcfa$export$2e2bcd8739ae039)();
     const [activeHandleId, setActiveHandleId] = (0, $fpI56$useState)(null);
@@ -139,6 +390,13 @@ function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         committedValuesRef.current.sizes = sizes;
         committedValuesRef.current.width = width;
     });
+    (0, $99ad02c951ec80d0$export$d9fcbe062527d159)({
+        committedValuesRef: committedValuesRef,
+        groupId: groupId,
+        panels: panels,
+        setSizes: setSizes,
+        sizes: sizes
+    });
     // Once all panels have registered themselves,
     // Compute the initial sizes based on default weights.
     // This assumes that panels register during initial mount (no conditional rendering)!
@@ -151,12 +409,12 @@ function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         // default size should be restored from local storage if possible.
         let defaultSizes = undefined;
         if (autoSaveId) {
-            const panelIds = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels).map((panel)=>panel.id);
+            const panelIds = (0, $f30c804b5fe6cc1a$export$a861c0ad45885494)(panels).map((panel)=>panel.id);
             defaultSizes = (0, $6ff1a22b27cc039d$export$9c80c6617f0386da)(autoSaveId, panelIds);
         }
         if (defaultSizes != null) setSizes(defaultSizes);
         else {
-            const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
+            const panelsArray = (0, $f30c804b5fe6cc1a$export$a861c0ad45885494)(panels);
             const totalWeight = panelsArray.reduce((weight, panel)=>{
                 return weight + panel.defaultSize;
             }, 0);
@@ -170,7 +428,7 @@ function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
         // If this panel has been configured to persist sizing information, save sizes to local storage.
         if (autoSaveId) {
             if (sizes.length === 0 || sizes.length !== panels.size) return;
-            const panelIds = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels).map((panel)=>panel.id);
+            const panelIds = (0, $f30c804b5fe6cc1a$export$a861c0ad45885494)(panels).map((panel)=>panel.id);
             (0, $6ff1a22b27cc039d$export$af183b313c61be4f)(autoSaveId, panelIds, sizes);
         }
     }, [
@@ -180,8 +438,8 @@ function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
     ]);
     const getPanelStyle = (0, $fpI56$useCallback)((id)=>{
         const { panels: panels  } = committedValuesRef.current;
-        const offset = $c44ee3356398c8a1$var$getOffset(panels, id, direction, sizes, height, width);
-        const size = $c44ee3356398c8a1$var$getSize(panels, id, direction, sizes, height, width);
+        const offset = (0, $f30c804b5fe6cc1a$export$622cea445a1c5b7d)(panels, id, direction, sizes, height, width);
+        const size = (0, $f30c804b5fe6cc1a$export$31b21d0167753bb4)(panels, id, direction, sizes, height, width);
         if (direction === "horizontal") return {
             height: "100%",
             position: "absolute",
@@ -210,18 +468,17 @@ function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             return nextPanels;
         });
     }, []);
-    const registerResizeHandle = (0, $fpI56$useCallback)((id)=>{
+    const registerResizeHandle = (0, $fpI56$useCallback)((handleId)=>{
         const resizeHandler = (event)=>{
             event.preventDefault();
             const { direction: direction , height: height , panels: panels , sizes: prevSizes , width: width  } = committedValuesRef.current;
-            const handle = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
-            const handles = Array.from(document.querySelectorAll(`[data-panel-group-id="${groupId}"]`));
-            const index = handles.indexOf(handle);
-            const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
-            const idBefore = panelsArray[index]?.id ?? null;
-            const idAfter = panelsArray[index + 1]?.id ?? null;
+            const panelsArray = (0, $f30c804b5fe6cc1a$export$a861c0ad45885494)(panels);
+            const [idBefore, idAfter] = (0, $f30c804b5fe6cc1a$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
             if (idBefore == null || idAfter == null) return;
-            const nextCoordinates = (0, $4b6140a59f4bd98c$export$70637efcd850e4ef)(event, prevCoordinatesRef.current);
+            const nextCoordinates = (0, $96f6397ae645d178$export$70637efcd850e4ef)(event, prevCoordinatesRef.current, {
+                height: height,
+                width: width
+            }, direction);
             prevCoordinatesRef.current = {
                 screenX: nextCoordinates.screenX,
                 screenY: nextCoordinates.screenY
@@ -229,7 +486,7 @@ function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
             const isHorizontal = direction === "horizontal";
             const movement = isHorizontal ? nextCoordinates.movementX : nextCoordinates.movementY;
             const delta = isHorizontal ? movement / width : movement / height;
-            const nextSizes = $c44ee3356398c8a1$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes);
+            const nextSizes = (0, $f30c804b5fe6cc1a$export$f50bae335f53943c)(panels, idBefore, idAfter, delta, prevSizes);
             if (prevSizes !== nextSizes) setSizes(nextSizes);
         };
         return resizeHandler;
@@ -281,81 +538,21 @@ function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
                 children: children
             }, void 0, false, {
                 fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-                lineNumber: 273,
+                lineNumber: 290,
                 columnNumber: 9
             }, this)
         }, void 0, false, {
             fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-            lineNumber: 272,
+            lineNumber: 289,
             columnNumber: 7
         }, this)
     }, void 0, false, {
         fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-        lineNumber: 271,
+        lineNumber: 288,
         columnNumber: 5
     }, this);
 }
-function $c44ee3356398c8a1$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes) {
-    if (delta === 0) return prevSizes;
-    const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
-    const nextSizes = prevSizes.concat();
-    let deltaApplied = 0;
-    // A resizing panel affects the panels before or after it.
-    //
-    // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.
-    // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
-    //
-    // A positive delta means the panel immediately before the resizer should "expand".
-    // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.
-    let pivotId = delta < 0 ? idBefore : idAfter;
-    let index = panelsArray.findIndex((panel)=>panel.id === pivotId);
-    while(true){
-        const panel = panelsArray[index];
-        const prevSize = prevSizes[index];
-        const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);
-        if (prevSize !== nextSize) {
-            deltaApplied += prevSize - nextSize;
-            nextSizes[index] = nextSize;
-            if (deltaApplied.toPrecision($c44ee3356398c8a1$var$PRECISION) >= delta.toPrecision($c44ee3356398c8a1$var$PRECISION)) break;
-        }
-        if (delta < 0) {
-            if (--index < 0) break;
-        } else {
-            if (++index >= panelsArray.length) break;
-        }
-    }
-    // If we were unable to resize any of the panels panels, return the previous state.
-    // This will essentially bailout and ignore the "mousemove" event.
-    if (deltaApplied === 0) return prevSizes;
-    // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
-    pivotId = delta < 0 ? idAfter : idBefore;
-    index = panelsArray.findIndex((panel)=>panel.id === pivotId);
-    nextSizes[index] = prevSizes[index] + deltaApplied;
-    return nextSizes;
-}
-function $c44ee3356398c8a1$var$getOffset(panels, id, direction, sizes, height, width) {
-    const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
-    let index = panelsArray.findIndex((panel)=>panel.id === id);
-    if (index < 0) return 0;
-    let scaledOffset = 0;
-    for(index = index - 1; index >= 0; index--){
-        const panel = panelsArray[index];
-        scaledOffset += $c44ee3356398c8a1$var$getSize(panels, panel.id, direction, sizes, height, width);
-    }
-    return Math.round(scaledOffset);
-}
-function $c44ee3356398c8a1$var$getSize(panels, id, direction, sizes, height, width) {
-    const totalSize = direction === "horizontal" ? width : height;
-    if (panels.size === 1) return totalSize;
-    const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
-    const index = panelsArray.findIndex((panel)=>panel.id === id);
-    const size = sizes[index];
-    if (size == null) return 0;
-    return Math.round(size * totalSize);
-}
-function $c44ee3356398c8a1$var$panelsMapToSortedArray(panels) {
-    return Array.from(panels.values()).sort((a, b)=>a.order - b.order);
-}
+
 
 
 
@@ -379,7 +576,6 @@ function $b067b37706bb37b8$export$2e2bcd8739ae039({ children: children = null ,
         }
     }, [
         disabled,
-        groupId,
         id,
         registerResizeHandle
     ]);
@@ -407,23 +603,31 @@ function $b067b37706bb37b8$export$2e2bcd8739ae039({ children: children = null ,
         resizeHandler,
         stopDragging
     ]);
+    (0, $99ad02c951ec80d0$export$33b0bea6ac3ffb03)({
+        disabled: disabled,
+        handleId: id,
+        resizeHandler: resizeHandler
+    });
     return /*#__PURE__*/ (0, $fpI56$jsxDEV)("div", {
         className: className,
         "data-panel-group-id": groupId,
+        "data-panel-resize-handle-enabled": !disabled,
         "data-panel-resize-handle-id": id,
         onMouseDown: ()=>startDragging(id),
         onMouseUp: stopDragging,
         onTouchCancel: stopDragging,
         onTouchEnd: stopDragging,
         onTouchStart: ()=>startDragging(id),
+        role: "separator",
         style: {
             cursor: direction === "horizontal" ? "ew-resize" : "ns-resize",
             touchAction: "none"
         },
+        tabIndex: 0,
         children: children
     }, void 0, false, {
         fileName: "packages/react-resizable-panels/src/PanelResizeHandle.tsx",
-        lineNumber: 80,
+        lineNumber: 87,
         columnNumber: 5
     }, this);
 }