mirror of https://github.com/sveltejs/svelte
Simon Holthausen
3 years ago
commit
e790740810
@ -0,0 +1,28 @@
|
|||||||
|
const items = [ { id: 'a' }, { id: 'b' } ];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
foo: null,
|
||||||
|
items
|
||||||
|
},
|
||||||
|
|
||||||
|
test({ assert, component, target }) {
|
||||||
|
const select = target.querySelector( 'select' );
|
||||||
|
const options = target.querySelectorAll( 'option' );
|
||||||
|
|
||||||
|
assert.equal( options[0].selected, true );
|
||||||
|
assert.equal( options[0].disabled, true );
|
||||||
|
assert.equal( options[1].selected, false );
|
||||||
|
assert.equal( options[1].disabled, false );
|
||||||
|
|
||||||
|
// placeholder option value must be blank string for native required field validation
|
||||||
|
assert.equal( options[0].value, '' );
|
||||||
|
assert.equal( select.checkValidity(), false );
|
||||||
|
|
||||||
|
component.foo = items[0];
|
||||||
|
|
||||||
|
assert.equal( options[0].selected, false );
|
||||||
|
assert.equal( options[1].selected, true );
|
||||||
|
assert.equal( select.checkValidity(), true );
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
export let foo;
|
||||||
|
export let items;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<select bind:value={foo} required>
|
||||||
|
<option value={null} disabled>Select an option</option>
|
||||||
|
{#each items as item}
|
||||||
|
<option value={item}>{item.id}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
@ -0,0 +1,153 @@
|
|||||||
|
import type { Action, ActionReturn } from '$runtime/action';
|
||||||
|
|
||||||
|
// ---------------- Action
|
||||||
|
|
||||||
|
const href: Action<HTMLAnchorElement> = (node) => {
|
||||||
|
node.href = '';
|
||||||
|
// @ts-expect-error
|
||||||
|
node.href = 1;
|
||||||
|
};
|
||||||
|
href;
|
||||||
|
|
||||||
|
const required: Action<HTMLElement, boolean> = (node, param) => {
|
||||||
|
node;
|
||||||
|
param;
|
||||||
|
};
|
||||||
|
required(null as any, true);
|
||||||
|
// @ts-expect-error (only in strict mode) boolean missing
|
||||||
|
required(null as any);
|
||||||
|
// @ts-expect-error no boolean
|
||||||
|
required(null as any, 'string');
|
||||||
|
|
||||||
|
const required1: Action<HTMLElement, boolean> = (node, param) => {
|
||||||
|
node;
|
||||||
|
param;
|
||||||
|
return {
|
||||||
|
update: (p) => p === true,
|
||||||
|
destroy: () => {}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
required1;
|
||||||
|
|
||||||
|
const required2: Action<HTMLElement, boolean> = (node) => {
|
||||||
|
node;
|
||||||
|
};
|
||||||
|
required2;
|
||||||
|
|
||||||
|
const required3: Action<HTMLElement, boolean> = (node, param) => {
|
||||||
|
node;
|
||||||
|
param;
|
||||||
|
return {
|
||||||
|
// @ts-expect-error comparison always resolves to false
|
||||||
|
update: (p) => p === 'd',
|
||||||
|
destroy: () => {}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
required3;
|
||||||
|
|
||||||
|
const optional: Action<HTMLElement, boolean | undefined> = (node, param?) => {
|
||||||
|
node;
|
||||||
|
param;
|
||||||
|
};
|
||||||
|
optional(null as any, true);
|
||||||
|
optional(null as any);
|
||||||
|
// @ts-expect-error no boolean
|
||||||
|
optional(null as any, 'string');
|
||||||
|
|
||||||
|
const optional1: Action<HTMLElement, boolean | undefined> = (node, param?) => {
|
||||||
|
node;
|
||||||
|
param;
|
||||||
|
return {
|
||||||
|
update: (p) => p === true,
|
||||||
|
destroy: () => {}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
optional1;
|
||||||
|
|
||||||
|
const optional2: Action<HTMLElement, boolean | undefined> = (node) => {
|
||||||
|
node;
|
||||||
|
};
|
||||||
|
optional2;
|
||||||
|
|
||||||
|
const optional3: Action<HTMLElement, boolean | undefined> = (node, param) => {
|
||||||
|
node;
|
||||||
|
param;
|
||||||
|
};
|
||||||
|
optional3;
|
||||||
|
|
||||||
|
const optional4: Action<HTMLElement, boolean | undefined> = (node, param?) => {
|
||||||
|
node;
|
||||||
|
param;
|
||||||
|
return {
|
||||||
|
// @ts-expect-error comparison always resolves to false
|
||||||
|
update: (p) => p === 'd',
|
||||||
|
destroy: () => {}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
optional4;
|
||||||
|
|
||||||
|
const no: Action<HTMLElement, never> = (node) => {
|
||||||
|
node;
|
||||||
|
};
|
||||||
|
// @ts-expect-error second param
|
||||||
|
no(null as any, true);
|
||||||
|
no(null as any);
|
||||||
|
// @ts-expect-error second param
|
||||||
|
no(null as any, 'string');
|
||||||
|
|
||||||
|
const no1: Action<HTMLElement, never> = (node) => {
|
||||||
|
node;
|
||||||
|
return {
|
||||||
|
destroy: () => {}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
no1;
|
||||||
|
|
||||||
|
// @ts-expect-error param given
|
||||||
|
const no2: Action<HTMLElement, never> = (node, param?) => {};
|
||||||
|
no2;
|
||||||
|
|
||||||
|
// @ts-expect-error param given
|
||||||
|
const no3: Action<HTMLElement, never> = (node, param) => {};
|
||||||
|
no3;
|
||||||
|
|
||||||
|
// @ts-expect-error update method given
|
||||||
|
const no4: Action<HTMLElement, never> = (node) => {
|
||||||
|
return {
|
||||||
|
update: () => {},
|
||||||
|
destroy: () => {}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
no4;
|
||||||
|
|
||||||
|
// ---------------- ActionReturn
|
||||||
|
|
||||||
|
const requiredReturn: ActionReturn<string> = {
|
||||||
|
update: (p) => p.toString()
|
||||||
|
};
|
||||||
|
requiredReturn;
|
||||||
|
|
||||||
|
const optionalReturn: ActionReturn<boolean | undefined> = {
|
||||||
|
update: (p) => {
|
||||||
|
p === true;
|
||||||
|
// @ts-expect-error could be undefined
|
||||||
|
p.toString();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
optionalReturn;
|
||||||
|
|
||||||
|
const invalidProperty: ActionReturn = {
|
||||||
|
// @ts-expect-error invalid property
|
||||||
|
invalid: () => {}
|
||||||
|
};
|
||||||
|
invalidProperty;
|
||||||
|
|
||||||
|
type Attributes = ActionReturn<never, { a: string; }>['$$_attributes'];
|
||||||
|
const attributes: Attributes = { a: 'a' };
|
||||||
|
attributes;
|
||||||
|
// @ts-expect-error wrong type
|
||||||
|
const invalidAttributes1: Attributes = { a: 1 };
|
||||||
|
invalidAttributes1;
|
||||||
|
// @ts-expect-error missing prop
|
||||||
|
const invalidAttributes2: Attributes = {};
|
||||||
|
invalidAttributes2;
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
import { createEventDispatcher } from '$runtime/internal/lifecycle';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher<{
|
||||||
|
loaded: never
|
||||||
|
change: string
|
||||||
|
valid: boolean
|
||||||
|
optional: number | null
|
||||||
|
}>();
|
||||||
|
|
||||||
|
// @ts-expect-error: dispatch invalid event
|
||||||
|
dispatch('some-event');
|
||||||
|
|
||||||
|
dispatch('loaded');
|
||||||
|
dispatch('loaded', null);
|
||||||
|
dispatch('loaded', undefined);
|
||||||
|
dispatch('loaded', undefined, { cancelable: true });
|
||||||
|
// @ts-expect-error: no detail accepted
|
||||||
|
dispatch('loaded', 123);
|
||||||
|
|
||||||
|
// @ts-expect-error: detail not provided
|
||||||
|
dispatch('change');
|
||||||
|
dispatch('change', 'string');
|
||||||
|
dispatch('change', 'string', { cancelable: true });
|
||||||
|
// @ts-expect-error: wrong type of detail
|
||||||
|
dispatch('change', 123);
|
||||||
|
// @ts-expect-error: wrong type of detail
|
||||||
|
dispatch('change', undefined);
|
||||||
|
|
||||||
|
dispatch('valid', true);
|
||||||
|
dispatch('valid', true, { cancelable: true });
|
||||||
|
// @ts-expect-error: wrong type of detail
|
||||||
|
dispatch('valid', 'string');
|
||||||
|
|
||||||
|
dispatch('optional');
|
||||||
|
dispatch('optional', 123);
|
||||||
|
dispatch('optional', 123, { cancelable: true });
|
||||||
|
dispatch('optional', null);
|
||||||
|
dispatch('optional', undefined);
|
||||||
|
dispatch('optional', undefined, { cancelable: true });
|
||||||
|
// @ts-expect-error: wrong type of optional detail
|
||||||
|
dispatch('optional', 'string');
|
||||||
|
// @ts-expect-error: wrong type of option
|
||||||
|
dispatch('optional', undefined, { cancelabled: true });
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"rootDir": "../..",
|
||||||
|
"baseUrl": "../../",
|
||||||
|
"paths": {
|
||||||
|
"$runtime/*": ["src/runtime/*"]
|
||||||
|
},
|
||||||
|
// enable strictest options
|
||||||
|
"allowUnreachableCode": false,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"strict": true,
|
||||||
|
},
|
||||||
|
"include": ["."]
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<!-- VALID -->
|
||||||
|
<div role="presentation" on:mouseup={() => {}} />
|
||||||
|
<div role="button" tabindex="-1" on:click={() => {}} on:keypress={() => {}} />
|
||||||
|
<div role="listitem" aria-hidden on:click={() => {}} on:keypress={() => {}} />
|
||||||
|
<button on:click={() => {}} />
|
||||||
|
<h1 contenteditable="true" on:keydown={() => {}}>Heading</h1>
|
||||||
|
<h1>Heading</h1>
|
||||||
|
|
||||||
|
<!-- INVALID -->
|
||||||
|
<div role="listitem" on:mousedown={() => {}} />
|
||||||
|
<h1 on:click={() => {}} on:keydown={() => {}}>Heading</h1>
|
||||||
|
<h1 role="banner" on:keyup={() => {}}>Heading</h1>
|
||||||
|
<p on:keypress={() => {}} />
|
||||||
|
<div role="paragraph" on:mouseup={() => {}} />
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"code": "a11y-no-noninteractive-element-interactions",
|
||||||
|
"end": {
|
||||||
|
"column": 47,
|
||||||
|
"line": 10
|
||||||
|
},
|
||||||
|
"message": "A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.",
|
||||||
|
"start": {
|
||||||
|
"column": 0,
|
||||||
|
"line": 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "a11y-no-noninteractive-element-interactions",
|
||||||
|
"end": {
|
||||||
|
"column": 58,
|
||||||
|
"line": 11
|
||||||
|
},
|
||||||
|
"message": "A11y: Non-interactive element <h1> should not be assigned mouse or keyboard event listeners.",
|
||||||
|
"start": {
|
||||||
|
"column": 0,
|
||||||
|
"line": 11
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "a11y-no-noninteractive-element-interactions",
|
||||||
|
"end": {
|
||||||
|
"column": 50,
|
||||||
|
"line": 12
|
||||||
|
},
|
||||||
|
"message": "A11y: Non-interactive element <h1> should not be assigned mouse or keyboard event listeners.",
|
||||||
|
"start": {
|
||||||
|
"column": 0,
|
||||||
|
"line": 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "a11y-no-noninteractive-element-interactions",
|
||||||
|
"end": {
|
||||||
|
"column": 28,
|
||||||
|
"line": 13
|
||||||
|
},
|
||||||
|
"message": "A11y: Non-interactive element <p> should not be assigned mouse or keyboard event listeners.",
|
||||||
|
"start": {
|
||||||
|
"column": 0,
|
||||||
|
"line": 13
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "a11y-no-noninteractive-element-interactions",
|
||||||
|
"end": {
|
||||||
|
"column": 46,
|
||||||
|
"line": 14
|
||||||
|
},
|
||||||
|
"message": "A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.",
|
||||||
|
"start": {
|
||||||
|
"column": 0,
|
||||||
|
"line": 14
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<script>
|
||||||
|
const dynamicRole = "button";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- valid -->
|
||||||
|
<button on:click={() => {}} />
|
||||||
|
<!-- svelte-ignore a11y-interactive-supports-focus -->
|
||||||
|
<div on:keydown={() => {}} role="button" />
|
||||||
|
<input type="text" on:click={() => {}} />
|
||||||
|
<div on:copy={() => {}} />
|
||||||
|
<a href="/foo" on:click={() => {}}>link</a>
|
||||||
|
<div role={dynamicRole} on:click={() => {}} />
|
||||||
|
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||||
|
<footer on:keydown={() => {}} />
|
||||||
|
|
||||||
|
<!-- invalid -->
|
||||||
|
<div on:keydown={() => {}} />
|
||||||
|
<!-- svelte-ignore a11y-missing-attribute -->
|
||||||
|
<a on:mousedown={() => {}} on:mouseup={() => {}} on:copy={() => {}}>link</a>
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"code": "a11y-no-static-element-interactions",
|
||||||
|
"end": {
|
||||||
|
"column": 29,
|
||||||
|
"line": 17
|
||||||
|
},
|
||||||
|
"message": "A11y: <div> with keydown handler must have an ARIA role",
|
||||||
|
"start": {
|
||||||
|
"column": 0,
|
||||||
|
"line": 17
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"code": "a11y-no-static-element-interactions",
|
||||||
|
"end": {
|
||||||
|
"column": 76,
|
||||||
|
"line": 19
|
||||||
|
},
|
||||||
|
"message": "A11y: <a> with mousedown, mouseup handlers must have an ARIA role",
|
||||||
|
"start": {
|
||||||
|
"column": 0,
|
||||||
|
"line": 19
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
Loading…
Reference in new issue