@@ -20,6 +20,7 @@ const propTypes = {
2020 name : PropTypes . string ,
2121 required : PropTypes . bool ,
2222 onChange : PropTypes . func ,
23+ role : PropTypes . oneOf ( [ 'switch' , 'checkbox' , 'radio' ] ) ,
2324 type : PropTypes . oneOf ( [ 'checkbox' , 'radio' ] ) ,
2425 variant : PropTypes . oneOf ( [ '' , '3d' , 'pill' ] ) ,
2526 className : PropTypes . string ,
@@ -36,6 +37,7 @@ const defaultProps = {
3637 defaultChecked : false ,
3738 disabled : false ,
3839 required : false ,
40+ role : 'switch' ,
3941 type : 'checkbox' ,
4042 variant : '' ,
4143 dataOn : 'On' ,
@@ -46,6 +48,8 @@ class AppSwitch extends Component {
4648 constructor ( props ) {
4749 super ( props ) ;
4850 this . onChange = this . onChange . bind ( this ) ;
51+ this . onKeyboard = this . onKeyboard . bind ( this ) ;
52+ this . input = React . createRef ( ) ;
4953 this . state = {
5054 checked : this . props . defaultChecked || this . props . checked ,
5155 selected : [ ]
@@ -71,8 +75,23 @@ class AppSwitch extends Component {
7175 }
7276 }
7377
78+ onKeyboard ( event ) {
79+ if ( event . key === "Enter" || event . key === " " ) {
80+ event . preventDefault ( )
81+ event . stopPropagation ( )
82+ const target = event . target . firstChild ;
83+ this . setState ( {
84+ checked : ! target . checked ,
85+ } )
86+
87+ if ( this . props . onChange ) {
88+ this . props . onChange ( event ) ;
89+ }
90+ }
91+ }
92+
7493 render ( ) {
75- const { className, disabled, color, name, label, outline, size, required, type, value, dataOn, dataOff, variant, ...attributes } = this . props ;
94+ const { className, disabled, color, name, label, outline, size, required, role , type, value, dataOn, dataOff, variant, ...attributes } = this . props ;
7695
7796 delete attributes . checked
7897 delete attributes . defaultChecked
@@ -98,8 +117,20 @@ class AppSwitch extends Component {
98117 ) ;
99118
100119 return (
101- < label className = { classes } >
102- < input type = { type } className = { inputClasses } onChange = { this . onChange } checked = { this . state . checked } name = { name } required = { required } disabled = { disabled } value = { value } { ...attributes } />
120+ < label className = { classes } onKeyPress = { this . onKeyboard } tabIndex = { disabled ? "-1" : "0" } >
121+ < input ref = { this . input }
122+ type = { type }
123+ role = { role }
124+ aria-checked = { this . state . checked }
125+ className = { inputClasses }
126+ onChange = { this . onChange }
127+ checked = { this . state . checked }
128+ name = { name }
129+ value = { value }
130+ required = { required }
131+ disabled = { disabled }
132+ { ...attributes }
133+ />
103134 < span className = { sliderClasses } data-checked = { dataOn } data-unchecked = { dataOff } > </ span >
104135 </ label >
105136 ) ;
0 commit comments