fix(form): buttons

This commit is contained in:
Manu Mtz.-Almeida
2018-02-10 00:00:41 +01:00
parent 25b23d1138
commit 606d55c959
6 changed files with 13 additions and 1 deletions

View File

@ -619,6 +619,7 @@ export class Datetime {
return [ return [
<div class={ datetimeTextClasses }>{ datetimeText }</div>, <div class={ datetimeTextClasses }>{ datetimeText }</div>,
<button <button
type='button'
aria-haspopup='true' aria-haspopup='true'
id={this.datetimeId} id={this.datetimeId}
aria-labelledby={this.labelId} aria-labelledby={this.labelId}

View File

@ -337,6 +337,7 @@ export class Input implements InputComponent {
onKeyDown={this.inputKeydown.bind(this)} onKeyDown={this.inputKeydown.bind(this)}
/>, />,
<button <button
type='button'
hidden={this.clearInput !== true} hidden={this.clearInput !== true}
class='input-clear-icon' class='input-clear-icon'
onClick={this.clearTextInput.bind(this)} onClick={this.clearTextInput.bind(this)}

View File

@ -105,9 +105,12 @@ export class Item {
if (clickable) { if (clickable) {
TagType = this.href ? 'a' : 'button'; TagType = this.href ? 'a' : 'button';
} }
const attrs = (TagType === 'button')
? {type: 'button'}
: {};
return ( return (
<TagType class={themedClasses}> <TagType class={themedClasses} {...attrs}>
<slot name='start'></slot> <slot name='start'></slot>
<div class='item-inner'> <div class='item-inner'>
<div class='input-wrapper'> <div class='input-wrapper'>

View File

@ -324,6 +324,7 @@ export class Searchbar {
const cancelButton = const cancelButton =
this.showCancelButton this.showCancelButton
? <button ? <button
type='button'
tabindex={this.mode === 'ios' && !this.activated ? -1 : null} tabindex={this.mode === 'ios' && !this.activated ? -1 : null}
onClick={this.cancelSearchbar.bind(this)} onClick={this.cancelSearchbar.bind(this)}
onMouseDown={this.cancelSearchbar.bind(this)} onMouseDown={this.cancelSearchbar.bind(this)}
@ -350,6 +351,7 @@ export class Searchbar {
autoCorrect={this.autocorrect} autoCorrect={this.autocorrect}
spellCheck={this.spellcheck}/> spellCheck={this.spellcheck}/>
<button <button
type='button'
class='searchbar-clear-icon' class='searchbar-clear-icon'
onClick={this.clearInput.bind(this)} onClick={this.clearInput.bind(this)}
onMouseDown={this.clearInput.bind(this)}> onMouseDown={this.clearInput.bind(this)}>

View File

@ -85,9 +85,13 @@ export class SegmentButton {
}; };
const TagType = this.href ? 'a' : 'button'; const TagType = this.href ? 'a' : 'button';
const attrs = (TagType === 'button')
? {type: 'button'}
: {};
return [ return [
<TagType <TagType
{...attrs}
aria-pressed={this.activated} aria-pressed={this.activated}
class={buttonClasses} class={buttonClasses}
disabled={this.disabled} disabled={this.disabled}

View File

@ -508,6 +508,7 @@ export class Select {
<div class='select-icon-inner'></div> <div class='select-icon-inner'></div>
</div>, </div>,
<button <button
type='button'
role='combobox' role='combobox'
aria-haspopup='dialog' aria-haspopup='dialog'
aria-expanded={this.isExpanded} aria-expanded={this.isExpanded}