Fix

website/src/frontend-scripts/util.ts

@@ -8,8 +8,7 @@ export const matchesDark: undefined | MediaQueryList =
 export function getCurrentTheme(): ThemeName {
 	let currentScheme = window.localStorage.getItem("data-theme");
 	if (currentScheme == null) {
-		currentScheme =
-			matchesDark !== undefined && matchesDark.matches ? "dark" : "light";
+		currentScheme = matchesDark?.matches ? "dark" : "light";
 	}
 	return currentScheme === "dark" ? "dark" : "light";
 }

website/src/playground/Playground.tsx

@@ -1,7 +1,4 @@
-import type {
-	PlaygroundProps,
-	RomeAstSyntacticData,
-} from "./types";
+import type { PlaygroundProps, RomeAstSyntacticData } from "./types";
 import type { ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import CodeMirror from "./CodeMirror";
 import type { ViewUpdate } from "@codemirror/view";

website/src/playground/tabs/DiagnosticsListTab.tsx

@@ -44,13 +44,13 @@ function renderDiagnosticMessage(diagnostic: Diagnostic) {
 function DiagnosticIcon({ severity }: { severity: Diagnostic["severity"] }) {
 	switch (severity) {
 		case "Information":
-			return <img src={infoIcon} />;
+			return <img alt="Info" src={infoIcon} />;
 
 		case "Warning":
-			return <img src={warningIcon} />;
+			return <img alt="Warning" src={warningIcon} />;
 
 		default:
-			return <img src={errorIcon} />;
+			return <img alt="Error" src={errorIcon} />;
 	}
 }
 

website/src/playground/tabs/SettingsTab.tsx

@@ -82,11 +82,13 @@ export default function SettingsTab({
 				return state;
 			}
 
+			const { [state.currentFile]: _, ...otherFiles } = state.files;
+
 			const files: PlaygroundState["files"] = {
-				...state.files,
+				...otherFiles,
 				[newFilename]: state.files[state.currentFile]!,
 			};
-			delete files[state.currentFile];
+
 			return {
 				...state,
 				currentFile: newFilename,
@@ -97,6 +99,7 @@ export default function SettingsTab({
 
 	function createFile(filename: string) {
 		if (
+			// rome-ignore lint(complexity/useSimplifiedLogicExpression): Not sure how else to do this
 			!isScriptFilename(filename) &&
 			!isJSXFilename(filename) &&
 			!isTypeScriptFilename(filename)
@@ -233,7 +236,11 @@ function FileViewItem({
 	onClick: () => void;
 }) {
 	return (
-		<li className={classnames(isActive && "active")} onClick={onClick}>
+		<li
+			className={classnames(isActive && "active")}
+			onClick={onClick}
+			onKeyDown={onClick}
+		>
 			{filename}
 		</li>
 	);
@@ -273,6 +280,7 @@ function NewFileInput({
 	return (
 		<input
 			type="text"
+			// rome-ignore lint(a11y/noAutofocus): Not sure how else to do this
 			autoFocus={true}
 			onKeyDown={onKeyDown}
 			onChange={onChange}

website/src/playground/workers/romeWorker.ts

@@ -190,7 +190,7 @@ self.addEventListener("message", async (e) => {
 				syntax: {
 					// Replace 4 spaced indentation with 2
 					// TODO replace this in Rome itself
-					ast: syntaxTree.ast.replace(/    /g, "  "),
+					ast: syntaxTree.ast.replace(/ {4}/g, "  "),
 					cst: syntaxTree.cst,
 				},
 				diagnostics: {