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