verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve acessibility (#135)

This commit is contained in:
Rodrigo Nascimento 2017-12-11 18:37:33 -02:00 committed by Guilherme Gazzo
parent 5435c79700
commit e42a146e4f
17 changed files with 296 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@ -37,6 +37,7 @@ module.exports = {
"jsx-quotes": [2, "prefer-single"], "jsx-quotes": [2, "prefer-single"],
"jsx-a11y/href-no-hash": 0, "jsx-a11y/href-no-hash": 0,
"import/prefer-default-export": 0, "import/prefer-default-export": 0,
"camelcase": 0,
"no-underscore-dangle": 0, "no-underscore-dangle": 0,
"no-return-assign": 0, "no-return-assign": 0,
"no-param-reassign": 0, "no-param-reassign": 0,

78
__tests__/__snapshots__/RoomItem.js.snap
View File

@ -4,8 +4,8 @@ exports[`render channel 1`] = `
<View> <View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel="general, last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -22,10 +22,9 @@ exports[`render channel 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -98,8 +97,6 @@ exports[`render channel 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
undefined, undefined,
] ]
@ -117,7 +114,6 @@ exports[`render channel 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >
@ -132,8 +128,8 @@ exports[`render no icon 1`] = `
<View> <View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel="name, last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -150,10 +146,9 @@ exports[`render no icon 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -226,8 +221,6 @@ exports[`render no icon 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
undefined, undefined,
] ]
@ -245,7 +238,6 @@ exports[`render no icon 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >
@ -260,8 +252,8 @@ exports[`render private group 1`] = `
<View> <View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel="private-group, last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -278,10 +270,9 @@ exports[`render private group 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -354,8 +345,6 @@ exports[`render private group 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
undefined, undefined,
] ]
@ -373,7 +362,6 @@ exports[`render private group 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >
@ -389,8 +377,8 @@ exports[`render unread +999 1`] = `
<View> <View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel="name, 1000 alerts, last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -407,10 +395,9 @@ exports[`render unread +999 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -436,7 +423,7 @@ exports[`render unread +999 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -472,8 +459,6 @@ exports[`render unread +999 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
undefined, undefined,
] ]
@ -491,7 +476,6 @@ exports[`render unread +999 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >
@ -526,8 +510,8 @@ exports[`render unread 1`] = `
<View> <View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel="name, 1 alert, last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -544,10 +528,9 @@ exports[`render unread 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -573,7 +556,7 @@ exports[`render unread 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -609,8 +592,6 @@ exports[`render unread 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
undefined, undefined,
] ]
@ -628,7 +609,6 @@ exports[`render unread 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >
@ -663,8 +643,8 @@ exports[`renders correctly 1`] = `
<View> <View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel="name, last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -681,10 +661,9 @@ exports[`renders correctly 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -710,7 +689,7 @@ exports[`renders correctly 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -746,8 +725,6 @@ exports[`renders correctly 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
undefined, undefined,
] ]
@ -765,7 +742,6 @@ exports[`renders correctly 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >

162
__tests__/__snapshots__/Storyshots.test.js.snap
View File

@ -23,7 +23,7 @@ exports[`Storyshots Avatar avatar 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -59,7 +59,7 @@ exports[`Storyshots Avatar avatar 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -95,7 +95,7 @@ exports[`Storyshots Avatar avatar 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -131,7 +131,7 @@ exports[`Storyshots Avatar avatar 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -156,8 +156,8 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
<View> <View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel="rocket.cat, last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -174,10 +174,9 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -203,7 +202,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -239,8 +238,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
undefined, undefined,
] ]
@ -258,7 +255,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >
@ -268,8 +264,8 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
</View> </View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel="rocket.cat, last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -286,10 +282,9 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -315,7 +310,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -351,8 +346,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
Object { Object {
"fontWeight": "bold", "fontWeight": "bold",
@ -372,7 +365,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >
@ -382,8 +374,8 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
</View> </View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel="rocket.cat, 1 alert, last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -400,10 +392,9 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -429,7 +420,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -465,8 +456,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
undefined, undefined,
] ]
@ -484,7 +473,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >
@ -514,8 +502,8 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
</View> </View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 9 alerts, last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -532,10 +520,9 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -561,7 +548,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -597,8 +584,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
Object { Object {
"fontWeight": "bold", "fontWeight": "bold",
@ -618,7 +603,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >
@ -648,8 +632,8 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
</View> </View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 99 alerts, last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -666,10 +650,9 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -695,7 +678,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -731,8 +714,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
undefined, undefined,
] ]
@ -750,7 +731,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >
@ -780,8 +760,8 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
</View> </View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 100 alerts, last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -798,10 +778,9 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -827,7 +806,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -863,8 +842,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
undefined, undefined,
] ]
@ -882,7 +859,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >
@ -912,8 +888,8 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
</View> </View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 100000 alerts, last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -930,10 +906,9 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -959,7 +934,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -995,8 +970,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
undefined, undefined,
] ]
@ -1014,7 +987,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >
@ -1044,8 +1016,8 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
</View> </View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 100000 alerts, you were mentioned, last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -1062,10 +1034,9 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -1091,7 +1062,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -1127,8 +1098,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
undefined, undefined,
] ]
@ -1146,7 +1115,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >
@ -1176,8 +1144,8 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
</View> </View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel="W, last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -1194,10 +1162,9 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -1223,7 +1190,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -1259,8 +1226,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
undefined, undefined,
] ]
@ -1278,7 +1243,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >
@ -1288,8 +1252,8 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
</View> </View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel="WW, last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -1306,10 +1270,9 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -1335,7 +1298,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -1371,8 +1334,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
undefined, undefined,
] ]
@ -1390,7 +1351,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >
@ -1400,8 +1360,8 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
</View> </View>
<View <View
accessibilityComponentType={undefined} accessibilityComponentType={undefined}
accessibilityLabel={undefined} accessibilityLabel=", last message Nov 10"
accessibilityTraits={undefined} accessibilityTraits="selected"
accessible={true} accessible={true}
collapsable={undefined} collapsable={undefined}
hitSlop={undefined} hitSlop={undefined}
@ -1418,10 +1378,9 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
Object { Object {
"alignItems": "center", "alignItems": "center",
"flexDirection": "row", "flexDirection": "row",
"height": 56,
"opacity": 1, "opacity": 1,
"paddingLeft": 16, "paddingHorizontal": 16,
"paddingRight": 16, "paddingVertical": 10,
} }
} }
testID={undefined} testID={undefined}
@ -1447,7 +1406,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
> >
<Text <Text
accessible={true} accessible={true}
allowFontScaling={true} allowFontScaling={false}
ellipsizeMode="tail" ellipsizeMode="tail"
style={ style={
Array [ Array [
@ -1483,8 +1442,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#444", "color": "#444",
"flex": 1, "flex": 1,
"fontSize": 16, "fontSize": 16,
"height": 16,
"paddingTop": 10,
}, },
undefined, undefined,
] ]
@ -1502,7 +1459,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
"color": "#888", "color": "#888",
"flex": 1, "flex": 1,
"fontSize": 10, "fontSize": 10,
"height": 10,
} }
} }
> >

2
app/containers/Avatar.js
View File

@ -58,7 +58,7 @@ class Avatar extends React.PureComponent {
); );
return ( return (
<View style={[styles.iconContainer, iconContainerStyle, style]}> <View style={[styles.iconContainer, iconContainerStyle, style]}>
<Text style={[styles.avatarInitials, avatarInitialsStyle]}>{initials}</Text> <Text style={[styles.avatarInitials, avatarInitialsStyle]} allowFontScaling={false}>{initials}</Text>
{image} {image}
</View>); </View>);
} }

26
app/containers/MessageBox/index.js
View File

@ -54,9 +54,27 @@ export default class MessageBox extends React.Component {
get leftButtons() { get leftButtons() {
const { editing } = this.props; const { editing } = this.props;
if (editing) { if (editing) {
return <Icon style={styles.actionButtons} name='ios-close' onPress={() => this.editCancel()} />; return (<Icon
style={styles.actionButtons}
name='ios-close'
accessibilityLabel='Cancel editing'
accessibilityTraits='button'
onPress={() => this.editCancel()}
/>);
} }
return !this.state.emoji ? <Icon style={styles.actionButtons} onPress={() => this.openEmoji()} name='md-happy' /> : <Icon onPress={() => this.openEmoji()} style={styles.actionButtons} name='md-sad' />; return !this.state.emoji ? (<Icon
style={styles.actionButtons}
onPress={() => this.openEmoji()}
accessibilityLabel='Open emoji selector'
accessibilityTraits='button'
name='md-happy'
/>) : (<Icon
onPress={() => this.openEmoji()}
style={styles.actionButtons}
accessibilityLabel='Close emoji selector'
accessibilityTraits='button'
name='md-sad'
/>);
} }
get rightButtons() { get rightButtons() {
const icons = []; const icons = [];
@ -66,6 +84,8 @@ export default class MessageBox extends React.Component {
style={[styles.actionButtons, { color: '#1D74F5' }]} style={[styles.actionButtons, { color: '#1D74F5' }]}
name='send' name='send'
key='sendIcon' key='sendIcon'
accessibilityLabel='Send message'
accessibilityTraits='button'
onPress={() => this.submit(this.component._lastNativeText)} onPress={() => this.submit(this.component._lastNativeText)}
/>); />);
} }
@ -73,6 +93,8 @@ export default class MessageBox extends React.Component {
style={[styles.actionButtons, { color: '#2F343D', fontSize: 16 }]} style={[styles.actionButtons, { color: '#2F343D', fontSize: 16 }]}
name='plus' name='plus'
key='fileIcon' key='fileIcon'
accessibilityLabel='Message actions'
accessibilityTraits='button'
onPress={() => this.addFile()} onPress={() => this.addFile()}
/>); />);
return icons; return icons;

4
app/containers/message/index.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native'; import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import moment from 'moment';
import { actionsShow } from '../../actions/messages'; import { actionsShow } from '../../actions/messages';
import Image from './Image'; import Image from './Image';
@ -114,11 +115,14 @@ export default class Message extends React.Component {
const username = item.alias || item.u.username; const username = item.alias || item.u.username;
const isEditing = message._id === item._id && editing; const isEditing = message._id === item._id && editing;
const accessibilityLabel = `Message from ${ item.alias || item.u.username } at ${ moment(item.ts).format(this.props.Message_TimeFormat) }, ${ this.props.item.msg }`;
return ( return (
<TouchableOpacity <TouchableOpacity
onLongPress={() => this.onLongPress()} onLongPress={() => this.onLongPress()}
disabled={this.isDeleted()} disabled={this.isDeleted()}
style={[styles.message, extraStyle, isEditing ? styles.editing : null]} style={[styles.message, extraStyle, isEditing ? styles.editing : null]}
accessibilityLabel={accessibilityLabel}
> >
<Avatar <Avatar
style={{ marginRight: 10 }} style={{ marginRight: 10 }}

6
app/containers/routes/AuthRoutes.js
View File

@ -28,7 +28,11 @@ const AuthRoutes = StackNavigator(
} }
} }
}, },
{} {
navigationOptions: {
headerTitleAllowFontScaling: false
}
}
); );
const Routes = DrawerNavigator( const Routes = DrawerNavigator(

6
app/containers/routes/PublicRoutes.js
View File

@ -23,6 +23,8 @@ const PublicRoutes = StackNavigator(
<TouchableOpacity <TouchableOpacity
onPress={() => navigation.navigate('AddServer')} onPress={() => navigation.navigate('AddServer')}
style={{ width: 50, alignItems: 'center' }} style={{ width: 50, alignItems: 'center' }}
accessibilityLabel='Add server'
accessibilityTraits='button'
> >
<Icon name='plus' size={16} /> <Icon name='plus' size={16} />
</TouchableOpacity> </TouchableOpacity>
@ -68,7 +70,9 @@ const PublicRoutes = StackNavigator(
} }
}, },
{ {
navigationOptions: {
headerTitleAllowFontScaling: false
}
} }
); );

33
app/presentation/RoomItem.js
View File

@ -6,11 +6,9 @@ import Avatar from '../containers/Avatar';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
// flex: 1,
flexDirection: 'row', flexDirection: 'row',
paddingLeft: 16, paddingHorizontal: 16,
paddingRight: 16, paddingVertical: 10,
height: 56,
alignItems: 'center' alignItems: 'center'
}, },
number: { number: {
@ -30,10 +28,8 @@ const styles = StyleSheet.create({
marginRight: 4 marginRight: 4
}, },
roomName: { roomName: {
paddingTop: 10,
flex: 1, flex: 1,
fontSize: 16, fontSize: 16,
height: 16,
color: '#444' color: '#444'
}, },
alert: { alert: {
@ -45,7 +41,7 @@ const styles = StyleSheet.create({
update: { update: {
flex: 1, flex: 1,
fontSize: 10, fontSize: 10,
height: 10, // height: 10,
color: '#888' color: '#888'
} }
}); });
@ -69,8 +65,8 @@ export default class RoomItem extends React.PureComponent {
} }
formatDate = date => moment(date).calendar(null, { formatDate = date => moment(date).calendar(null, {
lastDay: 'dddd', lastDay: '[Yesterday]',
sameDay: 'HH:mm', sameDay: 'h:mm A',
lastWeek: 'dddd', lastWeek: 'dddd',
sameElse: 'MMM D' sameElse: 'MMM D'
}) })
@ -100,12 +96,27 @@ export default class RoomItem extends React.PureComponent {
favorite, alert, unread, userMentions, name, _updatedAt favorite, alert, unread, userMentions, name, _updatedAt
} = this.props; } = this.props;
const date = this.formatDate(_updatedAt);
let accessibilityLabel = name;
if (unread === 1) {
accessibilityLabel += `, ${ unread } alert`;
} else if (unread > 1) {
accessibilityLabel += `, ${ unread } alerts`;
}
if (userMentions > 0) {
accessibilityLabel += ', you were mentioned';
}
accessibilityLabel += `, last message ${ date }`;
return ( return (
<TouchableOpacity onPress={this.props.onPress} style={[styles.container, favorite && styles.favorite]}> <TouchableOpacity onPress={this.props.onPress} style={[styles.container, favorite && styles.favorite]} accessibilityLabel={accessibilityLabel} accessibilityTraits='selected'>
{this.icon} {this.icon}
<View style={styles.roomNameView}> <View style={styles.roomNameView}>
<Text style={[styles.roomName, alert && styles.alert]} ellipsizeMode='tail' numberOfLines={1}>{ name }</Text> <Text style={[styles.roomName, alert && styles.alert]} ellipsizeMode='tail' numberOfLines={1}>{ name }</Text>
{_updatedAt ? <Text style={styles.update} ellipsizeMode='tail' numberOfLines={1}>{ this.formatDate(_updatedAt) }</Text> : null} {_updatedAt ? <Text style={styles.update} ellipsizeMode='tail' numberOfLines={1}>{ date }</Text> : null}
</View> </View>
{this.renderNumber(unread, userMentions)} {this.renderNumber(unread, userMentions)}
</TouchableOpacity> </TouchableOpacity>

4
app/views/ForgotPasswordView.js
View File

@ -88,11 +88,11 @@ class ForgotPasswordView extends React.Component {
/> />
<TouchableOpacity style={styles.buttonContainer} onPress={this.resetPassword}> <TouchableOpacity style={styles.buttonContainer} onPress={this.resetPassword}>
<Text style={styles.button}>RESET PASSWORD</Text> <Text style={styles.button} accessibilityTraits='button'>RESET PASSWORD</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={styles.buttonContainer} onPress={this.backLogin}> <TouchableOpacity style={styles.buttonContainer} onPress={this.backLogin}>
<Text style={styles.button}>BACK TO LOGIN</Text> <Text style={styles.button} accessibilityTraits='button'>BACK TO LOGIN</Text>
</TouchableOpacity> </TouchableOpacity>
{this.props.login.failure && <Text style={styles.error}>{this.props.login.error.reason}</Text>} {this.props.login.failure && <Text style={styles.error}>{this.props.login.error.reason}</Text>}

1
app/views/ListServerView.js
View File

@ -158,6 +158,7 @@ export default class ListServerView extends React.Component {
<Text <Text
style={[styles.listItem]} style={[styles.listItem]}
onPress={() => { this.onPressItem(item); }} onPress={() => { this.onPressItem(item); }}
adjustsFontSizeToFit
> >
{item.id} {item.id}
</Text> </Text>

14
app/views/LoginView.js
View File

@ -3,7 +3,7 @@ import React from 'react';
import Spinner from 'react-native-loading-spinner-overlay'; import Spinner from 'react-native-loading-spinner-overlay';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Keyboard, Text, TextInput, View, TouchableOpacity, SafeAreaView } from 'react-native'; import { Keyboard, Text, TextInput, View, ScrollView, TouchableOpacity, SafeAreaView } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
// import * as actions from '../actions'; // import * as actions from '../actions';
@ -88,7 +88,7 @@ class LoginView extends React.Component {
contentContainerStyle={styles.container} contentContainerStyle={styles.container}
keyboardVerticalOffset={128} keyboardVerticalOffset={128}
> >
<View style={styles.loginView}> <ScrollView style={styles.loginView}>
<SafeAreaView> <SafeAreaView>
<View style={styles.formContainer}> <View style={styles.formContainer}>
<TextInput <TextInput
@ -121,21 +121,21 @@ class LoginView extends React.Component {
style={styles.buttonContainer} style={styles.buttonContainer}
onPress={this.submit} onPress={this.submit}
> >
<Text style={styles.button}>LOGIN</Text> <Text style={styles.button} accessibilityTraits='button'>LOGIN</Text>
</TouchableOpacity> </TouchableOpacity>
<View style={styles.loginSecondaryButtons}> <View style={styles.loginSecondaryButtons}>
<TouchableOpacity style={styles.buttonContainer_inverted} onPress={this.register}> <TouchableOpacity style={styles.buttonContainer_inverted} onPress={this.register}>
<Text style={styles.button_inverted}>REGISTER</Text> <Text style={styles.button_inverted} accessibilityTraits='button'>REGISTER</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={styles.buttonContainer_inverted} onPress={this.forgotPassword}> <TouchableOpacity style={styles.buttonContainer_inverted} onPress={this.forgotPassword}>
<Text style={styles.button_inverted}>FORGOT MY PASSWORD</Text> <Text style={styles.button_inverted} accessibilityTraits='button'>FORGOT MY PASSWORD</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<TouchableOpacity> <TouchableOpacity>
<Text style={styles.loginTermsText}> <Text style={styles.loginTermsText} accessibilityTraits='button'>
By proceeding you are agreeing to our By proceeding you are agreeing to our
<Text style={styles.link} onPress={this.termsService}> Terms of Service </Text> <Text style={styles.link} onPress={this.termsService}> Terms of Service </Text>
and and
@ -146,7 +146,7 @@ class LoginView extends React.Component {
</View> </View>
<Spinner visible={this.props.login.isFetching} textContent='Loading...' textStyle={{ color: '#FFF' }} /> <Spinner visible={this.props.login.isFetching} textContent='Loading...' textStyle={{ color: '#FFF' }} />
</SafeAreaView> </SafeAreaView>
</View> </ScrollView>
</KeyboardView> </KeyboardView>
); );
} }

1
app/views/RegisterView.js
View File

@ -133,6 +133,7 @@ class RegisterView extends React.Component {
style={[styles.button, this._valid() ? {} style={[styles.button, this._valid() ? {}
: { color: placeholderTextColor } : { color: placeholderTextColor }
]} ]}
accessibilityTraits='button'
>REGISTER >REGISTER
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>

17
app/views/RoomView/Header/index.js
View File

@ -57,14 +57,21 @@ export default class extends React.Component {
isDirect = () => this.state.room && this.state.room.t === 'd'; isDirect = () => this.state.room && this.state.room.t === 'd';
renderLeft = () => <HeaderBackButton onPress={() => this.props.navigation.goBack(null)} tintColor='#292E35' />; renderLeft = () => <HeaderBackButton onPress={() => this.props.navigation.goBack(null)} tintColor='#292E35' title='Back' titleStyle={{ display: 'none' }} />;
renderTitle() { renderTitle() {
if (!this.state.roomName) { if (!this.state.roomName) {
return null; return null;
} }
let accessibilityLabel = this.state.roomName;
if (this.isDirect()) {
accessibilityLabel += `, ${ this.getUserStatusLabel() }`;
}
return ( return (
<TouchableOpacity style={styles.titleContainer}> <TouchableOpacity style={styles.titleContainer} accessibilityLabel={accessibilityLabel} accessibilityTraits='header'>
{this.isDirect() ? {this.isDirect() ?
<View style={[styles.status, { backgroundColor: STATUS_COLORS[this.getUserStatus()] }]} /> <View style={[styles.status, { backgroundColor: STATUS_COLORS[this.getUserStatus()] }]} />
: null : null
@ -77,9 +84,9 @@ export default class extends React.Component {
type={this.state.room.t} type={this.state.room.t}
/> />
<View style={{ flexDirection: 'column' }}> <View style={{ flexDirection: 'column' }}>
<Text style={styles.title}>{this.state.roomName}</Text> <Text style={styles.title} allowFontScaling={false}>{this.state.roomName}</Text>
{this.isDirect() ? {this.isDirect() ?
<Text style={styles.userStatus}>{this.getUserStatusLabel()}</Text> <Text style={styles.userStatus} allowFontScaling={false}>{this.getUserStatusLabel()}</Text>
: null : null
} }
</View> </View>
@ -92,6 +99,8 @@ export default class extends React.Component {
<TouchableOpacity <TouchableOpacity
style={styles.headerButton} style={styles.headerButton}
onPress={() => {}} onPress={() => {}}
accessibilityLabel='Room actions'
accessibilityTraits='button'
> >
<Icon <Icon
name={Platform.OS === 'ios' ? 'ios-more' : 'md-more'} name={Platform.OS === 'ios' ? 'ios-more' : 'md-more'}

53
app/views/RoomsListView/Header/index.js
View File

@ -56,6 +56,15 @@ export default class extends React.Component {
}); });
} }
getUserStatus() {
return this.props.user.status || 'offline';
}
getUserStatusLabel() {
const status = this.getUserStatus();
return status.charAt(0).toUpperCase() + status.slice(1);
}
showModal() { showModal() {
this.setState({ isModalVisible: true }); this.setState({ isModalVisible: true });
} }
@ -69,8 +78,12 @@ export default class extends React.Component {
} }
renderLeft() { renderLeft() {
if (this.state.searching) {
return null;
}
return ( return (
<View style={styles.left}> <View style={styles.left} accessible accessibilityLabel="Server's list" accessibilityTraits='button'>
<TouchableOpacity <TouchableOpacity
style={styles.headerButton} style={styles.headerButton}
onPress={() => this.props.navigation.navigate('DrawerOpen')} onPress={() => this.props.navigation.navigate('DrawerOpen')}
@ -85,30 +98,43 @@ export default class extends React.Component {
} }
renderTitle() { renderTitle() {
if (this.state.searching) {
return null;
}
if (!this.props.user.username) { if (!this.props.user.username) {
return null; return null;
} }
const accessibilityLabel = `${ this.props.user.username }, ${ this.getUserStatusLabel() }, double tap to change status`;
return ( return (
<TouchableOpacity style={styles.titleContainer} onPress={() => this.showModal()}> <TouchableOpacity style={styles.titleContainer} onPress={() => this.showModal()} accessibilityLabel={accessibilityLabel} accessibilityTraits='header'>
<View style={[styles.status, { backgroundColor: STATUS_COLORS[this.props.user.status || 'offline'] }]} /> <View style={[styles.status, { backgroundColor: STATUS_COLORS[this.getUserStatus()] }]} />
<Avatar <Avatar
text={this.props.user.username} text={this.props.user.username}
size={24} size={24}
style={{ marginRight: 5 }} style={{ marginRight: 5 }}
baseUrl={this.props.baseUrl} baseUrl={this.props.baseUrl}
/> />
<Text style={styles.title}>{this.props.user.username}</Text> <Text accessible={false} style={styles.title} ellipsizeMode='tail' numberOfLines={1} allowFontScaling={false}>{this.props.user.username}</Text>
</TouchableOpacity> </TouchableOpacity>
); );
} }
renderRight() { renderRight() {
if (this.state.searching) {
return null;
}
return ( return (
<View style={styles.right}> <View style={styles.right}>
{Platform.OS === 'android' ? {Platform.OS === 'android' ?
<TouchableOpacity <TouchableOpacity
style={styles.headerButton} style={styles.headerButton}
onPress={() => this.onPressSearchButton()} onPress={() => this.onPressSearchButton()}
accessibilityLabel='Search'
accessibilityTraits='button'
> >
<Icon <Icon
name='md-search' name='md-search'
@ -121,6 +147,8 @@ export default class extends React.Component {
<TouchableOpacity <TouchableOpacity
style={styles.headerButton} style={styles.headerButton}
onPress={() => this.createChannel()} onPress={() => this.createChannel()}
accessibilityLabel='Create channel'
accessibilityTraits='button'
> >
<Icon <Icon
name='ios-add' name='ios-add'
@ -149,19 +177,6 @@ export default class extends React.Component {
); );
}; };
renderHeader() {
if (this.state.searching) {
return null;
}
return (
<View style={styles.header}>
{this.renderLeft()}
{this.renderTitle()}
{this.renderRight()}
</View>
);
}
renderSearch() { renderSearch() {
if (!this.state.searching) { if (!this.state.searching) {
return null; return null;
@ -188,7 +203,9 @@ export default class extends React.Component {
render() { render() {
return ( return (
<View style={styles.header}> <View style={styles.header}>
{this.renderHeader()} {this.renderLeft()}
{this.renderTitle()}
{this.renderRight()}
{this.renderSearch()} {this.renderSearch()}
<Modal <Modal
isVisible={this.state.isModalVisible} isVisible={this.state.isModalVisible}

6
app/views/Styles.js
View File

@ -73,7 +73,7 @@ export default StyleSheet.create({
color: 'white' color: 'white'
}, },
input_white: { input_white: {
height: 45, paddingVertical: 12,
marginBottom: 20, marginBottom: 20,
borderRadius: 2, borderRadius: 2,
// padding: 14, // padding: 14,
@ -154,7 +154,7 @@ export default StyleSheet.create({
}, },
loginSecondaryButtons: { loginSecondaryButtons: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-around', flexWrap: 'wrap',
alignItems: 'center' justifyContent: 'space-around'
} }
}); });

127
package-lock.json generated
View File

@ -4545,9 +4545,9 @@
} }
}, },
"eslint": { "eslint": {
"version": "4.11.0", "version": "4.13.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-4.11.0.tgz", "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.13.0.tgz",
"integrity": "sha512-UWbhQpaKlm8h5x/VLwm0S1kheMrDj8jPwhnBMjr/Dlo3qqT7MvcN/UfKAR3E1N4lr4YNtOvS4m3hwsrVc/ky7g==", "integrity": "sha512-1l2aVrEz9yiWsEQdL3XZEzTovHQJFZaTeIhOOilKQRiYNn1dVALoYOtn06iPoxhEwFukBPX4Ff8WoGD4r/7D2A==",
"dev": true, "dev": true,
"requires": { "requires": {
"ajv": "5.3.0", "ajv": "5.3.0",
@ -4556,7 +4556,7 @@
"concat-stream": "1.6.0", "concat-stream": "1.6.0",
"cross-spawn": "5.1.0", "cross-spawn": "5.1.0",
"debug": "3.1.0", "debug": "3.1.0",
"doctrine": "2.0.0", "doctrine": "2.0.2",
"eslint-scope": "3.7.1", "eslint-scope": "3.7.1",
"espree": "3.5.2", "espree": "3.5.2",
"esquery": "1.0.0", "esquery": "1.0.0",
@ -4565,7 +4565,7 @@
"file-entry-cache": "2.0.0", "file-entry-cache": "2.0.0",
"functional-red-black-tree": "1.0.1", "functional-red-black-tree": "1.0.1",
"glob": "7.1.2", "glob": "7.1.2",
"globals": "9.18.0", "globals": "11.1.0",
"ignore": "3.3.7", "ignore": "3.3.7",
"imurmurhash": "0.1.4", "imurmurhash": "0.1.4",
"inquirer": "3.3.0", "inquirer": "3.3.0",
@ -4618,12 +4618,27 @@
"ms": "2.0.0" "ms": "2.0.0"
} }
}, },
"doctrine": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.0.2.tgz",
"integrity": "sha512-y0tm5Pq6ywp3qSTZ1vPgVdAnbDEoeoc5wlOHXoY1c4Wug/a7JvqHIl7BTvwodaHmejWkK/9dSb3sCYfyo/om8A==",
"dev": true,
"requires": {
"esutils": "2.0.2"
}
},
"esprima": { "esprima": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz",
"integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==", "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==",
"dev": true "dev": true
}, },
"globals": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-11.1.0.tgz",
"integrity": "sha512-uEuWt9mqTlPDwSqi+sHjD4nWU/1N+q0fiWI9T1mZpD2UENqX20CFD5T/ziLZvztPaBKl7ZylUi1q6Qfm7E2CiQ==",
"dev": true
},
"js-yaml": { "js-yaml": {
"version": "3.10.0", "version": "3.10.0",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.10.0.tgz", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.10.0.tgz",
@ -4765,9 +4780,9 @@
} }
}, },
"eslint-plugin-react": { "eslint-plugin-react": {
"version": "7.4.0", "version": "7.5.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.4.0.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.5.1.tgz",
"integrity": "sha512-tvjU9u3VqmW2vVuYnE8Qptq+6ji4JltjOjJ9u7VAOxVYkUkyBZWRvNYKbDv5fN+L6wiA+4we9+qQahZ0m63XEA==", "integrity": "sha512-YGSjB9Qu6QbVTroUZi66pYky3DfoIPLdHQ/wmrBGyBRnwxQsBXAov9j2rpXt/55i8nyMv6IRWJv2s4d4YnduzQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"doctrine": "2.0.0", "doctrine": "2.0.0",
@ -4788,9 +4803,9 @@
} }
}, },
"eslint-plugin-react-native": { "eslint-plugin-react-native": {
"version": "3.1.0", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-native/-/eslint-plugin-react-native-3.1.0.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-react-native/-/eslint-plugin-react-native-3.2.0.tgz",
"integrity": "sha1-A/lflZv/eoJntUcsuH0BDjRvciQ=", "integrity": "sha512-b/VrvsLM17FCul+RTXi4owZaP/u3Xo0IWv2ZTxgGGAyaNKscGbTvvoV/MxhYxRSuDmG7uAM9l7DN6wTGyC2U+Q==",
"dev": true "dev": true
}, },
"eslint-restricted-globals": { "eslint-restricted-globals": {
@ -8389,6 +8404,11 @@
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.1.9.tgz", "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.1.9.tgz",
"integrity": "sha1-lkojxU5IiUBbSGGlyfBIDUUUHfo=" "integrity": "sha1-lkojxU5IiUBbSGGlyfBIDUUUHfo="
}, },
"keymirror": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/keymirror/-/keymirror-0.1.1.tgz",
"integrity": "sha1-kYiJ6hP40KQufFVyUO7nE63JXDU="
},
"kind-of": { "kind-of": {
"version": "3.2.2", "version": "3.2.2",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
@ -9826,9 +9846,9 @@
"integrity": "sha1-zz2C0YwMp/RY2PKiQIF7PcflSgE=" "integrity": "sha1-zz2C0YwMp/RY2PKiQIF7PcflSgE="
}, },
"moment": { "moment": {
"version": "2.19.2", "version": "2.19.4",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.19.2.tgz", "resolved": "https://registry.npmjs.org/moment/-/moment-2.19.4.tgz",
"integrity": "sha512-Rf6jiHPEfxp9+dlzxPTmRHbvoFXsh2L/U8hOupUMpnuecHQmI6cF6lUbJl3QqKPko1u6ujO+FxtcajLVfLpAtA==" "integrity": "sha512-1xFTAknSLfc47DIxHDUbnJWC+UwgWxATmymaxIPQpmMh7LBm7ZbwVEsuushqwL2GYZU0jie4xO+TK44hJPjNSQ=="
}, },
"morgan": { "morgan": {
"version": "1.6.1", "version": "1.6.1",
@ -12038,9 +12058,9 @@
} }
}, },
"react": { "react": {
"version": "16.1.1", "version": "16.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.1.1.tgz", "resolved": "https://registry.npmjs.org/react/-/react-16.2.0.tgz",
"integrity": "sha512-FQfiFfk2z2Fk87OngNJHT05KyC9DOVn8LPeB7ZX+9u5+yU1JK6o5ozRlU3PeOMr0IFkWNvgn9jU8/IhRxR1F0g==", "integrity": "sha512-ZmIomM7EE1DvPEnSFAHZn9Vs9zJl5A9H7el0EGTE6ZbW9FKe/14IYAlPbC8iH25YarEQxZL+E8VW7Mi7kfQrDQ==",
"requires": { "requires": {
"fbjs": "0.8.16", "fbjs": "0.8.16",
"loose-envify": "1.3.1", "loose-envify": "1.3.1",
@ -12084,9 +12104,9 @@
} }
}, },
"react-dom": { "react-dom": {
"version": "16.1.1", "version": "16.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.1.1.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz",
"integrity": "sha512-q06jiwST8SEPAMIEkAsu7BgynEZtqF87VrTc70XsW7nxVhWEu2Y4MF5UfxxHQO/mNtQHQWP0YcFxmwm9oMrMaQ==", "integrity": "sha512-zpGAdwHVn9K0091d+hr+R0qrjoJ84cIBFL2uU60KvWBPfZ7LPSrfqviTxGHWN0sjPZb2hxWzMexwrvJdKePvjg==",
"dev": true, "dev": true,
"requires": { "requires": {
"fbjs": "0.8.16", "fbjs": "0.8.16",
@ -12161,9 +12181,9 @@
} }
}, },
"react-native": { "react-native": {
"version": "0.50.3", "version": "0.50.4",
"resolved": "https://registry.npmjs.org/react-native/-/react-native-0.50.3.tgz", "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.50.4.tgz",
"integrity": "sha1-kSgr1TVsx9eUlpzcRDzHZDibmvQ=", "integrity": "sha1-GU9dpJOQh7Os7nEqUDR19JQtyn4=",
"requires": { "requires": {
"absolute-path": "0.0.0", "absolute-path": "0.0.0",
"art": "0.10.1", "art": "0.10.1",
@ -12232,9 +12252,9 @@
} }
}, },
"react-native-action-button": { "react-native-action-button": {
"version": "2.8.1", "version": "2.8.3",
"resolved": "https://registry.npmjs.org/react-native-action-button/-/react-native-action-button-2.8.1.tgz", "resolved": "https://registry.npmjs.org/react-native-action-button/-/react-native-action-button-2.8.3.tgz",
"integrity": "sha512-u5DWS2ZorgRGNNhh3H8+PKq0KHQqOIk6jr/w/qGaTrPpX4Fvg0t5WsqlSjDa4J6xrgWJ712OX3rhc56wLLSI3g==", "integrity": "sha512-Nh8EOQ8IxZPLTc2qHC8FkfbbCI4rmo9nOOs+GV7bLY4NjCGvQ/Nr92VEXIyjyeMhek+05KMKDOusF3ifTub5vQ==",
"requires": { "requires": {
"prop-types": "15.6.0" "prop-types": "15.6.0"
} }
@ -12252,11 +12272,6 @@
"prop-types": "15.6.0" "prop-types": "15.6.0"
} }
}, },
"react-native-card-view": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/react-native-card-view/-/react-native-card-view-0.0.3.tgz",
"integrity": "sha1-jbmsSj8B0I+L2feTQwgth/3wmQc="
},
"react-native-compat": { "react-native-compat": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/react-native-compat/-/react-native-compat-1.0.0.tgz", "resolved": "https://registry.npmjs.org/react-native-compat/-/react-native-compat-1.0.0.tgz",
@ -12406,6 +12421,14 @@
"resolved": "https://registry.npmjs.org/react-native-push-notification/-/react-native-push-notification-3.0.1.tgz", "resolved": "https://registry.npmjs.org/react-native-push-notification/-/react-native-push-notification-3.0.1.tgz",
"integrity": "sha1-DiPbMC0Du0o/KNwHLcryqaEXjtg=" "integrity": "sha1-DiPbMC0Du0o/KNwHLcryqaEXjtg="
}, },
"react-native-slider": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-native-slider/-/react-native-slider-0.11.0.tgz",
"integrity": "sha512-jV9K87eu9uWr0uJIyrSpBLnCKvVlOySC2wynq9TFCdV9oGgjt7Niq8Q1A8R8v+5GHsuBw/s8vEj1AAkkUi+u+w==",
"requires": {
"prop-types": "15.6.0"
}
},
"react-native-svg": { "react-native-svg": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-6.0.0.tgz", "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-6.0.0.tgz",
@ -12464,6 +12487,23 @@
} }
} }
}, },
"react-native-video": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-native-video/-/react-native-video-2.0.0.tgz",
"integrity": "sha1-8z+m+35+PJOrV4eUTO/Vi/c1WGc=",
"requires": {
"keymirror": "0.1.1",
"prop-types": "15.6.0"
}
},
"react-native-video-controls": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-native-video-controls/-/react-native-video-controls-2.0.0.tgz",
"integrity": "sha512-dejwvoR0mL3DQtP6BSO/tlGaUzOXfGlj3kWkBJm7q3pTGsHWDGJmEtpwVhyVtJBg95O8Fb5Nz15JwRqsjonagg==",
"requires": {
"lodash": "4.17.4"
}
},
"react-native-zeroconf": { "react-native-zeroconf": {
"version": "0.8.3", "version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-native-zeroconf/-/react-native-zeroconf-0.8.3.tgz", "resolved": "https://registry.npmjs.org/react-native-zeroconf/-/react-native-zeroconf-0.8.3.tgz",
@ -12560,9 +12600,9 @@
} }
}, },
"react-test-renderer": { "react-test-renderer": {
"version": "16.1.1", "version": "16.2.0",
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.1.1.tgz", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.2.0.tgz",
"integrity": "sha512-RV0Krfuc6wDnlv5C/BJzW3e2/s7ZTMZ25gfVjdXdT3hhXNDCQlZucP83HMD8mVh1XScGx9hRaXnIRJ7mE+2N6A==", "integrity": "sha512-Kd4gJFtpNziR9ElOE/C23LeflKLZPRpNQYWP3nQBY43SJ5a+xyEGSeMrm2zxNKXcnCbBS/q1UpD9gqd5Dv+rew==",
"dev": true, "dev": true,
"requires": { "requires": {
"fbjs": "0.8.16", "fbjs": "0.8.16",
@ -12718,14 +12758,14 @@
} }
}, },
"realm": { "realm": {
"version": "2.0.7", "version": "2.0.13",
"resolved": "https://registry.npmjs.org/realm/-/realm-2.0.7.tgz", "resolved": "https://registry.npmjs.org/realm/-/realm-2.0.13.tgz",
"integrity": "sha1-1SbWxzksVklafHgASDwG61hcbdY=", "integrity": "sha1-rE9x23J2OfZ2NjXV0wFLjGPACZo=",
"requires": { "requires": {
"command-line-args": "4.0.7", "command-line-args": "4.0.7",
"decompress": "4.2.0", "decompress": "4.2.0",
"decompress-tarxz": "2.1.1", "decompress-tarxz": "2.1.1",
"fs-extra": "4.0.2", "fs-extra": "4.0.3",
"ini": "1.3.4", "ini": "1.3.4",
"nan": "2.7.0", "nan": "2.7.0",
"node-fetch": "1.7.3", "node-fetch": "1.7.3",
@ -12739,9 +12779,9 @@
}, },
"dependencies": { "dependencies": {
"fs-extra": { "fs-extra": {
"version": "4.0.2", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.2.tgz", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
"integrity": "sha1-+RcExT0bRh+JNFKwwwfZmXZHq2s=", "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
"requires": { "requires": {
"graceful-fs": "4.1.11", "graceful-fs": "4.1.11",
"jsonfile": "4.0.0", "jsonfile": "4.0.0",
@ -12823,6 +12863,11 @@
"symbol-observable": "1.0.4" "symbol-observable": "1.0.4"
} }
}, },
"redux-enhancer-react-native-appstate": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/redux-enhancer-react-native-appstate/-/redux-enhancer-react-native-appstate-0.3.0.tgz",
"integrity": "sha1-+5Fwk3WM4J9DLNCytWPRNh6PV28="
},
"redux-immutable-state-invariant": { "redux-immutable-state-invariant": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/redux-immutable-state-invariant/-/redux-immutable-state-invariant-2.1.0.tgz", "resolved": "https://registry.npmjs.org/redux-immutable-state-invariant/-/redux-immutable-state-invariant-2.1.0.tgz",