chore: fix tests to follow latest Svelte 5 (#751)

I just added Node 22 but CI does not pass in
#750

sveltejs/svelte#11327 changes warning messages,
so I mainly copied exist tests and optimized for Svelte 5.

Author: baseballyama

docs-svelte-kit/src/lib/components/ESLintPlayground.svelte

@@ -190,10 +190,9 @@
 				<ol>
 					{#each messages as msg, i (`${msg.line}:${msg.column}:${msg.ruleId}@${i}`)}
 						<li class="message">
-							<!-- svelte-ignore a11y-invalid-attribute -->
-							<a href="#" on:click={(evt) => onClickMessage(evt, msg)} class="message-link"
-								>[{msg.line}:{msg.column}]</a
-							>:
+							<button on:click={(evt) => onClickMessage(evt, msg)} class="message-link">
+								[{msg.line}:{msg.column}]
+							</button>:
 							{msg.message}
 							<a
 								class="rule-link {getRule(msg.ruleId)?.classes}"
@@ -268,6 +267,12 @@
 		color: #8080f2;
 	}
 	.message-link {
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+		outline: none;
+		padding: 0;
+		appearance: none;
 		color: #40b3ff;
 	}
 </style>

docs-svelte-kit/src/routes/+layout.svelte

@@ -33,7 +33,7 @@
 
 <SideMenu {sidebarOpen} hiddenMenu={frontmatter.hiddenMenu} />
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <main
 	class:hidden-menu={frontmatter.hiddenMenu}
 	on:click={sidebarOpen ? resetSidebarOpen : null}

eslint.config.mjs

@@ -128,7 +128,8 @@ const config = [
 		},
 		rules: {
 			'n/file-extension-in-import': 'off',
-			'n/no-unsupported-features/es-syntax': 'off'
+			'n/no-unsupported-features/es-syntax': 'off',
+			'n/no-unsupported-features/es-builtins': 'off'
 		}
 	},
 	{

tests/fixtures/rules/no-unused-svelte-ignore/invalid/html-comment-input.svelte

@@ -1,5 +1,5 @@
-<!-- svelte-ignore a11y-autofocus a11y-missing-attribute -->
+<!-- svelte-ignore a11y_autofocus a11y_missing_attribute -->
 <img src="foo" alt="Foo" />
 
-<!-- svelte-ignore a11y-autofocus a11y-missing-attribute -->
+<!-- svelte-ignore a11y_autofocus a11y_missing_attribute -->
 <img src="foo" alt="Foo" autofocus />

tests/fixtures/rules/no-unused-svelte-ignore/invalid/html-comment-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.0.0-0"
+}

tests/fixtures/rules/no-unused-svelte-ignore/invalid/html-comment-svelte4-errors.yaml

@@ -0,0 +1,12 @@
+- message: svelte-ignore comment is used, but not warned
+  line: 1
+  column: 20
+  suggestions: null
+- message: svelte-ignore comment is used, but not warned
+  line: 1
+  column: 35
+  suggestions: null
+- message: svelte-ignore comment is used, but not warned
+  line: 4
+  column: 35
+  suggestions: null

tests/fixtures/rules/no-unused-svelte-ignore/invalid/html-comment-svelte4-input.svelte

@@ -0,0 +1,5 @@
+<!-- svelte-ignore a11y-autofocus a11y-missing-attribute -->
+<img src="foo" alt="Foo" />
+
+<!-- svelte-ignore a11y-autofocus a11y-missing-attribute -->
+<img src="foo" alt="Foo" autofocus />

tests/fixtures/rules/no-unused-svelte-ignore/invalid/html-comment-svelte4-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": "^3.0.0 || ^4.0.0"
+}

tests/fixtures/rules/no-unused-svelte-ignore/invalid/invalid-svelte-ignore01-input.svelte

@@ -1,7 +1,7 @@
 <div>
 	{#if true}
 		A
-		<!-- svelte-ignore a11y-label-has-associated-control a11y-no-noninteractive-tabindex -->
+		<!-- svelte-ignore a11y_label_has_associated_control a11y_no_noninteractive_tabindex -->
 	{:else}
 		<label tabindex="0">Click</label>
 		<ul tabindex="0"></ul>

tests/fixtures/rules/no-unused-svelte-ignore/invalid/invalid-svelte-ignore01-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.0.0-0"
+}