[Mobile] Accessibility Mark I - Button (#14697)

* Improving accessibility on Mobile button component. * Fix lint issues
WordPress · Apr 3, 2019 · 342961e · 342961e
1 parent 7a2a9ba
commit 342961e
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js
@@ -55,6 +55,7 @@ export default function Button( props ) {
 		children,
 		onClick,
 		disabled,
+		hint,
 		'aria-disabled': ariaDisabled,
 		'aria-label': ariaLabel,
 		'aria-pressed': ariaPressed,
@@ -67,11 +68,23 @@ export default function Button( props ) {
 		...( ariaPressed ? styles.buttonActive : styles.buttonInactive ),
 	};
 
+	const states = [];
+	if ( ariaPressed ) {
+		states.push( 'selected' );
+	}
+
+	if ( isDisabled ) {
+		states.push( 'disabled' );
+	}
+
 	return (
 		<TouchableOpacity
 			activeOpacity={ 0.7 }
 			accessible={ true }
 			accessibilityLabel={ ariaLabel }
+			accessibilityStates={ states }
+			accessibilityRole={ 'button' }
+			accessibilityHint={ hint }
 			onPress={ onClick }
 			style={ styles.container }
 			disabled={ isDisabled }