chore: cleanup

Author: pkerschbaum

README.md

@@ -13,6 +13,7 @@ To install and set up the project, follow these steps:
 1. Ensure you have Node.js v20 installed. You can download it from the [official Node.js website](https://nodejs.org/).
 2. Clone the repository to your local machine.
 3. Install the project dependencies using npm - `npm install`.
+4. Setup Docker to run E2E tests via Playwright ([Docker Desktop](https://www.docker.com/products/docker-desktop/) or [Docker Engine](https://docs.docker.com/engine/install/)).
 
 This will install all the necessary packages and dependencies required to run the project.
 

e2e-tests/code-editing-and-ast-interaction.spec.ts

@@ -7,7 +7,7 @@ test(`should change code, then highlight code and AST nodes matching ESQuery sel
 
 	// focus code editor textbox
 	await page
-		.getByRole("region", { name: "Code Editor" })
+		.getByRole("region", { name: "Code Editor Panel" })
 		.getByRole("textbox")
 		.nth(1)
 		.click();

e2e-tests/tools.spec.ts

@@ -4,7 +4,7 @@ test("should switch to each tool and show it", async ({ page }) => {
 	await page.goto("/");
 
 	await expect(
-		page.getByRole("region", { name: "Code Analysis Tools" }),
+		page.getByRole("region", { name: "Code Analysis Tools Panel" }),
 	).toHaveScreenshot("tools-ast.png");
 
 	await page.getByRole("button", { name: "Scope" }).click();
@@ -13,12 +13,12 @@ test("should switch to each tool and show it", async ({ page }) => {
 	await page.mouse.move(0, 0);
 
 	await expect(
-		page.getByRole("region", { name: "Code Analysis Tools" }),
+		page.getByRole("region", { name: "Code Analysis Tools Panel" }),
 	).toHaveScreenshot("tools-scope.png");
 
 	await page.getByRole("button", { name: "Code Path" }).click();
 
 	await expect(
-		page.getByRole("region", { name: "Code Analysis Tools" }),
+		page.getByRole("region", { name: "Code Analysis Tools Panel" }),
 	).toHaveScreenshot("tools-code-path.png");
 });

src/App.tsx

@@ -31,7 +31,7 @@ function App() {
 									defaultSize={50}
 									minSize={25}
 									role="region"
-									aria-label="Code Editor"
+									aria-label="Code Editor Panel"
 								>
 									<EsquerySelectorInput />
 									<Editor
@@ -56,7 +56,7 @@ function App() {
 									defaultSize={50}
 									minSize={25}
 									role="region"
-									aria-label="Code Analysis Tools"
+									aria-label="Code Analysis Tools Panel"
 								>
 									<div className="bg-muted overflow-auto h-[70dvh] sm:h-full relative flex flex-col">
 										<div className="flex sm:items-center flex-col sm:flex-row justify-between p-4 gap-2 z-10">