Repository: bvaughn/react-resizable-panels (ts)

Issue:
Auto-generated values for aria-* are invalid
When loading up [an example](https://react-resizable-panels.vercel.app/examples/horizontal), and running Lighthouse to check accessibility, the generated HTML has (what I believe to be) invalid values for selectors and therefore raises an accessibility error.

```html
<div class="AzW8qW_ResizeHandle " role="separator" tabindex="0" data-panel-group-direction="horizontal" data-panel-group-id=":r0:" data-resize-handle="" data-resize-handle-state="inactive" data-panel-resize-handle-enabled="true" data-panel-resize-handle-id=":r2:" aria-controls=":r1:" aria-valuemax="50" aria-valuemin="20" aria-valuenow="30" style="touch-action: none; user-select: none;"></div>
```

Unfortunately, the Lighthouse error isn't very specific to state which value is invalid. However, the issue stems from `:` character being not allowed, for example, in `aria-controls=":r1:"` This is proven when setting the `id` attribute manually on `Panel` to a valid selector, which also makes the Lighthouse error go away.

![Image](https://github.com/user-attachments/assets/65d92daf-8c69-4d67-82ba-baedd7de75e8)

Pull request:
Pass auto-generated Panel id to `id` attribute to fix `aria-controls` prop
Resolves #450

Patch:
diff --git a/packages/react-resizable-panels-website/index.html b/packages/react-resizable-panels-website/index.html
index 76d1682..003e131 100644
--- a/packages/react-resizable-panels-website/index.html
+++ b/packages/react-resizable-panels-website/index.html
@@ -1,13 +1,11 @@
 <!doctype html>
-<html>
-  <html>
-    <head>
-      <title>React components for resizable panels</title>
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <link rel="stylesheet" href="./root.css" />
-      <link rel="stylesheet" href="./CodeMirror.css" />
-    </head>
-  </html>
+<html lang="en">
+  <head>
+    <title>React components for resizable panels</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="./root.css" />
+    <link rel="stylesheet" href="./CodeMirror.css" />
+  </head>
   <body>
     <div id="root"></div>
     <script type="module" src="index.tsx"></script>
diff --git a/packages/react-resizable-panels/src/Panel.ts b/packages/react-resizable-panels/src/Panel.ts
index 5873afc..1b5e6db 100644
--- a/packages/react-resizable-panels/src/Panel.ts
+++ b/packages/react-resizable-panels/src/Panel.ts
@@ -235,7 +235,7 @@ export function PanelWithForwardedRef({
 
     children,
     className: classNameFromProps,
-    id: idFromProps,
+    id: panelId,
     style: {
       ...style,
       ...styleFromProps,


Test patch:
diff --git a/packages/react-resizable-panels/src/Panel.test.tsx b/packages/react-resizable-panels/src/Panel.test.tsx
index 647df06..61cebd8 100644
--- a/packages/react-resizable-panels/src/Panel.test.tsx
+++ b/packages/react-resizable-panels/src/Panel.test.tsx
@@ -1012,7 +1012,7 @@ describe("PanelGroup", () => {
       expect(element?.getAttribute("id")).toBe("explicit-id");
     });
 
-    it("should not pass auto-generated id prop to DOM", () => {
+    it("should pass auto-generated id prop to DOM", () => {
       act(() => {
         root.render(
           <PanelGroup direction="horizontal">
@@ -1024,7 +1024,7 @@ describe("PanelGroup", () => {
       const element = container.querySelector("[data-panel]");
 
       expect(element).not.toBeNull();
-      expect(element?.getAttribute("id")).toBeNull();
+      expect(element?.getAttribute("id")).not.toBeNull();
     });
   });