コンパイラの警告

<!-- svelte-ignore a11y_autofocus -->
<input autofocus />

<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (because of reasons) -->
<div onclick>...</div>

Avoid using accesskey

<!-- A11y: Avoid using accesskey -->
<div accesskey="z"></div>

An element with an aria-activedescendant attribute should have a tabindex value

<!-- A11y: Elements with attribute aria-activedescendant should have tabindex value -->
<div aria-activedescendant="some-id"></div>

`<%name%>` should not have aria-* attributes

<!-- A11y: <meta> should not have aria-* attributes -->
<meta aria-hidden="false" />

'%value%' is an invalid value for 'autocomplete' on `<input type="%type%">`

Avoid using autofocus

<!-- A11y: Avoid using autofocus -->
<input autofocus />

Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate. See https://svelte.dokyumento.jp/docs/accessibility-warnings#a11y-click-events-have-key-events for more details

<!-- A11y: visible, non-interactive elements with an onclick event must be accompanied by a keyboard event handler. -->
<div onclick={() => {}}></div>

Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute

Avoid `<%name%>` elements

<!-- A11y: Avoid <marquee> elements -->
<marquee></marquee>

`<figcaption>` must be first or last child of `<figure>`

`<figcaption>` must be an immediate child of `<figure>`

<!-- A11y: <figcaption> must be an immediate child of <figure> -->
<div>
	<figcaption>Image caption</figcaption>
</div>

`<%name%>` element should not be hidden

<!-- A11y: <h2> element should not be hidden -->
<h2 aria-hidden="true">invisible header</h2>

Screenreaders already announce `<img>` elements as an image

<img src="foo" alt="Foo eating a sandwich." />

<!-- aria-hidden, won't be announced by screen reader -->
<img src="bar" aria-hidden="true" alt="Picture of me taking a photo of an image" />

<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="foo" alt="Photo of foo being weird." />

<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="bar" alt="Image of me at a bar!" />

<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="foo" alt="Picture of baz fixing a bug." />

The value of '%attribute%' must be a %type%

<!-- A11y: The value of 'aria-hidden' must be exactly one of true or false -->
<div aria-hidden="yes"></div>

The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty

The value of '%attribute%' must be a string that represents a DOM element ID

The value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs

The value of '%attribute%' must be an integer

The value of '%attribute%' must be exactly one of %values%

The value of '%attribute%' must be a space-separated list of one or more of %values%

The value of '%attribute%' must be exactly one of true, false, or mixed

Elements with the '%role%' interactive role must have a tabindex value

<!-- A11y: Elements with the 'button' interactive role must have a tabindex value. -->
<div role="button" onkeypress={() => {}} />

'%href_value%' is not a valid %href_attribute% attribute

<!-- A11y: '' is not a valid href attribute -->
<a href="">invalid</a>

A form label must be associated with a control

<label for="id">B</label>

<label>C <input type="text" /></label>

<!-- A11y: A form label must be associated with a control. -->
<label>A</label>

`<video>` elements must have a `<track kind="captions">`

<video><track kind="captions" /></video>

<audio muted></audio>

<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
<video></video>

<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
<video><track /></video>

`<%name%>` should not have role attribute

<!-- A11y: <meta> should not have role attribute -->
<meta role="tooltip" />

The scope attribute should only be used with `<th>` elements

<!-- A11y: The scope attribute should only be used with <th> elements -->
<div scope="row" />

`<%name%>` element should have %article% %sequence% attribute

<!-- A11y: <input type=\"image\"> element should have an alt, aria-label or aria-labelledby attribute -->
<input type="image" />

<!-- A11y: <html> element should have a lang attribute -->
<html></html>

<!-- A11y: <a> element should have an href attribute -->
<a>text</a>

`<%name%>` element should contain text

<!-- A11y: <a> element should have child content -->
<a href="/foo"></a>

<!-- A11y: <h1> element should have child content -->
<h1></h1>

'%event%' event must be accompanied by '%accompanied_by%' event

<!-- A11y: onmouseover must be accompanied by onfocus -->
<div onmouseover={handleMouseover} />

<!-- A11y: onmouseout must be accompanied by onblur -->
<div onmouseout={handleMouseout} />

Abstract role '%role%' is forbidden

`<%element%>` cannot have role '%role%'

<!-- A11y: <textarea> cannot have role 'listitem' -->
<textarea role="listitem"></textarea>

Non-interactive element `<%element%>` should not be assigned mouse or keyboard event listeners

<!-- `A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.` -->
<li onclick={() => {}}></li>

<!-- `A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.` -->
<div role="listitem" onclick={() => {}}></div>

Non-interactive element `<%element%>` cannot have interactive role '%role%'

<!-- A11y: Non-interactive element <h3> cannot have interactive role 'searchbox' -->
<h3 role="searchbox">Button</h3>

noninteractive element cannot have nonnegative tabIndex value

<!-- A11y: noninteractive element cannot have nonnegative tabIndex value -->
<div tabindex="0"></div>

Redundant role '%role%'

<!-- A11y: Redundant role 'button' -->
<button role="button">...</button>

<!-- A11y: Redundant role 'img' -->
<img role="img" src="foo.jpg" />

`<%element%>` with a %handler% handler must have an ARIA role

<!-- A11y: <div> with click handler must have an ARIA role -->
<div onclick={() => ''}></div>

Avoid tabindex values above zero

<!-- A11y: avoid tabindex values above zero -->
<div tabindex="1"></div>

Elements with the ARIA role "%role%" must have the following attributes defined: %props%

<!-- A11y: A11y: Elements with the ARIA role "checkbox" must have the following attributes defined: "aria-checked" -->
<span role="checkbox" aria-labelledby="foo" tabindex="0"></span>

The attribute '%attribute%' is not supported by the role '%role%'

<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->
<div role="link" aria-multiline></div>

<!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. -->
<li aria-required></li>

The attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element `<%name%>`

<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->
<div role="link" aria-multiline></div>

<!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. -->
<li aria-required></li>

Unknown aria attribute 'aria-%attribute%'

Unknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?

<!-- A11y: Unknown aria attribute 'aria-labeledby' (did you mean 'labelledby'?) -->
<input type="image" aria-labeledby="foo" />

Unknown role '%role%'

Unknown role '%role%'. Did you mean '%suggestion%'?

<!-- A11y: Unknown role 'toooltip' (did you mean 'tooltip'?) -->
<div role="toooltip"></div>

The "is" attribute is not supported cross-browser and should be avoided

You are referencing `globalThis.%name%`. Did you forget to declare a variable with that name?

Attributes should not contain ':' characters to prevent ambiguity with Svelte directives

'%wrong%' is not a valid HTML attribute. Did you mean '%right%'?

Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes

The rest operator (...) will create a new object and binding '%name%' with the original object will not work

Empty block

`<%name%>` will be treated as an HTML element unless it begins with a capital letter

Unused CSS selector "%name%"

Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`

Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead

Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`

`%code%` is no longer valid — please use `%suggestion%` instead

Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.

%message%. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning

`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates

The `accessors` option has been deprecated. It will have no effect in runes mode

The `immutable` option has been deprecated. It will have no effect in runes mode

The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?

The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them

The `hydratable` option has been removed. Svelte components are always hydratable now

The `loopGuardTimeout` option has been removed

`generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively

Avoid 'new class' — instead, declare the class at the top level scope

Avoid declaring classes below the top level scope

Reactive declarations only exist at the top level of the instance script

Reassignments of module-level declarations will not cause reactive statements to update

`context="module"` is deprecated, use the `module` attribute instead

Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it

Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead

State referenced in its own scope will never update. Did you mean to reference it inside a closure?

It looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity

`<svelte:component>` is deprecated in runes mode — components are dynamic by default

{#each items as item}
	<svelte:component this={item.condition ? Y : Z} />
	{@const Component = item.condition ? Y : Z}
	<Component />
{/each}

<script>
	// ...
	let condition = $state(false);
	const Component = $derived(condition ? Y : Z);
</script>

<svelte:component this={condition ? Y : Z} />
<Component />

`this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte

`<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead

`%code%` is not a recognised code

`%code%` is not a recognised code (did you mean `%suggestion%`?)