Fix accessibility of options tutorial. (#8308)

Use button instead of non-interactive element (div).
(Removes a Svelte a11y warning.)
pull/8311/head
brunnerh 2 years ago committed by GitHub
parent a0cedf8d82
commit e3e912ab58
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -4,21 +4,23 @@
export let todo; export let todo;
let div; let button;
afterUpdate(() => { afterUpdate(() => {
flash(div); flash(button);
}); });
</script> </script>
<!-- the text will flash red whenever <!-- the text will flash red whenever
the `todo` object changes --> the `todo` object changes -->
<div bind:this={div} on:click> <button bind:this={button} type="button" on:click>
{todo.done ? '👍': ''} {todo.text} {todo.done ? '👍': ''} {todo.text}
</div> </button>
<style> <style>
div { button {
all: unset;
display: block;
cursor: pointer; cursor: pointer;
line-height: 1.5; line-height: 1.5;
} }

@ -6,21 +6,23 @@
export let todo; export let todo;
let div; let button;
afterUpdate(() => { afterUpdate(() => {
flash(div); flash(button);
}); });
</script> </script>
<!-- the text will flash red whenever <!-- the text will flash red whenever
the `todo` object changes --> the `todo` object changes -->
<div bind:this={div} on:click> <button bind:this={button} type="button" on:click>
{todo.done ? '👍': ''} {todo.text} {todo.done ? '👍': ''} {todo.text}
</div> </button>
<style> <style>
div { button {
all: unset;
display: block;
cursor: pointer; cursor: pointer;
line-height: 1.5; line-height: 1.5;
} }

Loading…
Cancel
Save