fix(radio-tile): move keydown, tabindex to input element

This commit is contained in:
Eric Liu 2020-09-14 06:54:35 -07:00
commit 17d97d1dbf
2 changed files with 13 additions and 10 deletions

View file

@ -57,14 +57,21 @@
name="{name}" name="{name}"
value="{value}" value="{value}"
checked="{checked}" checked="{checked}"
tabindex="{tabindex}"
class:bx--tile-input="{true}" class:bx--tile-input="{true}"
on:change on:change
on:change="{() => { on:change="{() => {
update(value); update(value);
}}"
on:keydown
on:keydown="{(e) => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
update(value);
}
}}" /> }}" />
<label <label
for="{id}" for="{id}"
tabindex="{tabindex}"
class:bx--tile="{true}" class:bx--tile="{true}"
class:bx--tile--selectable="{true}" class:bx--tile--selectable="{true}"
class:bx--tile--is-selected="{checked}" class:bx--tile--is-selected="{checked}"
@ -73,14 +80,7 @@
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave>
on:keydown
on:keydown="{(e) => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
update(value);
}
}}">
<span class:bx--tile__checkmark="{true}"> <span class:bx--tile__checkmark="{true}">
<CheckmarkFilled16 <CheckmarkFilled16
aria-label="{iconDescription}" aria-label="{iconDescription}"

View file

@ -52,7 +52,10 @@
{...$$props} {...$$props}
value="{value}" value="{value}"
id="{id}" id="{id}"
labelText="{labelText}"> labelText="{labelText}"
on:keydown="{() => {
console.log('keydown');
}}">
Selectable Tile Selectable Tile
</RadioTile> </RadioTile>
{/each} {/each}