Skip to content

Make the library accessible now #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
asgupta9 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Make the library accessible now #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c0edd51
Make the app accessible
asgupta9 Dec 12, 2019
e7b4d63
Update Readme according to accessibility fixes
asgupta9 Dec 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions FlipToggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ class FlipToggle extends React.Component {
offLabel: PropTypes.string,
buttonOnColor: PropTypes.string,
buttonOffColor: PropTypes.string,
accessibilityLabelComponent: PropTypes.string,
disabledButtonOnColor: PropTypes.string,
disabledButtonOffColor: PropTypes.string,
sliderOnColor: PropTypes.string,
Expand Down Expand Up @@ -58,6 +59,7 @@ class FlipToggle extends React.Component {
disabledSliderOnColor: '#444',
disabledSliderOffColor: '#444',
labelStyle: {},
accessibilityLabelComponent: '',
buttonRadius: 0,
sliderRadius: 0,
labelStyle: {
Expand Down Expand Up @@ -197,6 +199,11 @@ class FlipToggle extends React.Component {
return (
<View style={[styles.container]}>
<TouchableOpacity
accessible={true}
accessibilityLiveRegion={'assertive'}
accessibilityLabel={
this.props.disabled ? this.props.accessibilityLabelComponent + ' disabled toggle button' :
this.props.accessibilityLabelComponent + ', ' + (this.props.value ? 'On' : 'Off') + ', toggle button'}
disabled={this.props.disabled}
style={{
justifyContent: 'center',
Expand All @@ -215,6 +222,7 @@ class FlipToggle extends React.Component {
</Text>
) : null}
<Animated.View

style={{
margin: this.dimensions.margin,
transform: [{ translateX: this.offsetX }],
Expand Down
6 changes: 4 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
[![npm version](https://badge.fury.io/js/react-native-flip-toggle-button.svg)](https://badge.fury.io/js/react-native-flip-toggle-button)


A cross-platform customisable toggle button built upon react-native's TouchableOpacity and Animated APIs.
A cross-platform customisable accessible toggle button built upon react-native's TouchableOpacity and Animated APIs.


### Why flip toggle?

Well, this toggle button provides a label centered within the button which flips as per the toggle's on / off state.
You have seen it on old iOS homescreen (swipe to unlock). react-native-flip-toggle-button uses Animated APIs useNativeDriver flag to offload animations from the JS thread and thus provide more responsive and seamless toggle transition even when the JS thread is busy.
You have seen it on old iOS homescreen (swipe to unlock). react-native-flip-toggle-button uses Animated APIs useNativeDriver flag to offload animations from the JS thread and thus provide more responsive and seamless toggle transition even when the JS thread is busy. It is now accessible also for talback on android or voice over on ios.

## Contents
- Checkout this package on npm - [react-native-flip-toggle-button](https://www.npmjs.com/package/react-native-flip-toggle-button)
Expand Down Expand Up @@ -43,6 +43,7 @@ Then, use the FlipToggle component as shown below
labelStyle={{ color: 'black' }}
onToggle={(newState) => console.log(`toggle is ${this.state.isActive ? `on` : `off`}`)}
onToggleLongPress={() => console.log('toggle long pressed!')}
accessibilityLabelComponent={PURPOSE_OF_TOGGLE_BUTTON}
/>
```
## API
Expand Down Expand Up @@ -71,6 +72,7 @@ Then, use the FlipToggle component as shown below
|sliderOffColor|'string'|no|'#dba628'|background color of the slider when it is off|
|disabledSliderOnColor|'string'|no|'#444'|background color of the slider when the toggling is disabled but set at on|
|disabledSliderOffColor|'string'|no|'#444'|background color of the slider when the toggling is disabled but set at off|
|accessibilityLabelComponent|'string'|no|''|purpose of the toggle button to be spoken by Talkback or Voice Over|

## Issues
If you face any issues with implementing this component or have a feature request or queries, please create a new [issue](https://github.com/ashishpandey001/react-native-flip-toggle-button/issues).
Expand Down