Skip to content

Commit fdca4ee

Browse files
JDMathewJDMathew
authored
fix spelling typos in components and docs (#222)
1 parent 018549a commit fdca4ee

File tree

7 files changed

+117
-116
lines changed

7 files changed

+117
-116
lines changed

‎packages/core/src/hooks/useButtonChecks.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const useButtonChecks = __DEV__
4949
});
5050
checkCompatibleAccessibilityState({
5151
accessibilityStates: props?.accessibilityState,
52-
accessibilityRole: props?.accessiblityRole,
52+
accessibilityRole: props?.accessibilityRole,
5353
});
5454
checkAccessibilityRole(props.accessibilityRole);
5555

‎packages/forms/src/components/FormSubmit.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ describe('FormSubmit', () => {
3232
);
3333
});
3434

35-
it('hides the children from the accessiblity tree', () => {
35+
it('hides the children from the accessibility tree', () => {
3636
const { getByTestId } = render(
3737
<FormSubmit
3838
accessibilityLabel="This is the label"

‎packages/react-native/docs/TouchableOpacity.md

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@ TouchableOpacity is an extension of the React Native [TouchableOpacity](https://
77
```tsx
88
import { TouchableOpacity } from 'react-native-ama';
99

10-
<TouchableOpacity accessibilityRole="button" accessibilityLabel="I'm pressable!">
11-
<Text>I'm pressable</Text>
10+
<TouchableOpacity
11+
accessibilityRole="button"
12+
accessibilityLabel="I'm pressable!">
13+
<Text>I'm pressable</Text>
1214
</TouchableOpacity>;
1315
```
1416

@@ -73,28 +75,28 @@ Indicates whether an element is currently busy or not.
7375

7476
```tsx
7577
import { ActivityIndicator } from 'react-native';
76-
import { TouchableOpacity, Text } from 'react-native-ama';
78+
import { Text, TouchableOpacity } from 'react-native-ama';
7779

7880
const Test = () => {
79-
const [isLoading, setIsLoading] = React.useState(false);
81+
const [isLoading, setIsLoading] = React.useState(false);
8082

81-
const doSometing = async () => {
82-
setIsLoading(true);
83+
const doSomething = async () => {
84+
setIsLoading(true);
8385

84-
await slowCall();
86+
await slowCall();
8587

86-
setIsLoading(true);
87-
};
88+
setIsLoading(true);
89+
};
8890

89-
return (
90-
<TouchableOpacity
91-
accessiblityRole="button"
92-
accessibilityLabel="Do it"
93-
busy={isLoading}
94-
onPress={doSometing}>
95-
{isLoading ? <ActivityIndicator /> : <Text>Do it</Text>}
96-
</TouchableOpacity>
97-
);
91+
return (
92+
<TouchableOpacity
93+
accessibilityRole="button"
94+
accessibilityLabel="Do it"
95+
busy={isLoading}
96+
onPress={doSomething}>
97+
{isLoading ? <ActivityIndicator /> : <Text>Do it</Text>}
98+
</TouchableOpacity>
99+
);
98100
};
99101
```
100102

@@ -126,23 +128,23 @@ Indicates whether an expandable element is currently expanded or collapsed.
126128

127129
```tsx
128130
import { ActivityIndicator } from 'react-native';
129-
import { TouchableOpacity, Text } from 'react-native-ama';
131+
import { Text, TouchableOpacity } from 'react-native-ama';
130132

131133
const Test = () => {
132-
const [isExpanded, setIsExpanded] = React.useState(false);
133-
134-
return (
135-
<>
136-
<TouchableOpacity
137-
accessiblityRole="button"
138-
accessibilityLabel={isExpanded ? 'Less' : 'More'}
139-
expanded={isExpanded}
140-
onPress={() => setIsExpanded(expanded => !expanded)}>
141-
{isExpanded ? <MinumIcon /> : <PlusIcon />}
142-
</TouchableOpacity>
143-
{isExpanded ? <>{/* content goes here */}</> : null}
144-
</>
145-
);
134+
const [isExpanded, setIsExpanded] = React.useState(false);
135+
136+
return (
137+
<>
138+
<TouchableOpacity
139+
accessibilityRole="button"
140+
accessibilityLabel={isExpanded ? 'Less' : 'More'}
141+
expanded={isExpanded}
142+
onPress={() => setIsExpanded(expanded => !expanded)}>
143+
{isExpanded ? <MiniumIcon /> : <PlusIcon />}
144+
</TouchableOpacity>
145+
{isExpanded ? <>{/* content goes here */}</> : null}
146+
</>
147+
);
146148
};
147149
```
148150

‎packages/react-native/docs/TouchableWithoutFeedback.md

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ import { TouchableWithoutFeedback } from 'react-native-ama';
1010

1111
<TouchableWithoutFeedback
1212
accessibilityRole="button"
13-
accessibilityLabel="I'm pressable!"
14-
>
13+
accessibilityLabel="I'm pressable!">
1514
<View>
1615
<Text> I'm pressable</Text>
1716
</View>
@@ -84,7 +83,7 @@ import { Text, TouchableWithoutFeedback } from 'react-native-ama';
8483
const Test = () => {
8584
const [isLoading, setIsLoading] = React.useState(false);
8685

87-
const doSometing = async () => {
86+
const doSomething = async () => {
8887
setIsLoading(true);
8988

9089
await slowCall();
@@ -94,11 +93,10 @@ const Test = () => {
9493

9594
return (
9695
<TouchableWithoutFeedback
97-
accessiblityRole="button"
96+
accessibilityRole="button"
9897
accessibilityLabel="Do it"
9998
busy={isLoading}
100-
onPress={doSometing}
101-
>
99+
onPress={doSomething}>
102100
{isLoading ? <ActivityIndicator /> : <Text>Do it</Text>}
103101
</TouchableWithoutFeedback>
104102
);
@@ -141,11 +139,10 @@ const Test = () => {
141139
return (
142140
<>
143141
<TouchableWithoutFeedback
144-
accessiblityRole="button"
142+
accessibilityRole="button"
145143
accessibilityLabel={isExpanded ? 'Less' : 'More'}
146144
expanded={isExpanded}
147-
onPress={() => setIsExpanded(expanded => !expanded)}
148-
>
145+
onPress={() => setIsExpanded(expanded => !expanded)}>
149146
{isExpanded ? <MinumIcon /> : <PlusIcon />}
150147
</TouchableWithoutFeedback>
151148
{isExpanded ? <>{/* content goes here */}</> : null}

‎website/versioned_docs/version-0.7.x/components/Pressable.mdx

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,18 @@ Pressable is an extension of the React Native [Pressable](https://reactnative.de
88
import { Pressable } from 'react-native-ama';
99

1010
<Pressable accessibilityRole="button" accessibilityLabel="I'm pressable!">
11-
<Text>I'm pressable</Text>
11+
<Text>I'm pressable</Text>
1212
</Pressable>;
1313
```
1414

1515
## Accessibility improvements
1616

1717
Compared to the default React Native component, this custom component:
1818

19-
- Forces the use of `accessibilityRole` and `accessibilityLabel` <DevOnly />
19+
- Forces the use of `accessibilityRole` and `accessibilityLabel` <DevOnly />
2020
- `accessibilityState` has been removed as its states `busy`, `checked`, `selected`, `expanded` are exposed as a property
2121
- Performs a [Minimum Size](../guidelines/minimum-size.md) check <DevOnly />
22-
- Performs a [contrast checker](../guidelines/contrast.md) between its background color and its children color <DevOnly />
22+
- Performs a [contrast checker](../guidelines/contrast.md) between its background color and its children color <DevOnly />
2323

2424
### accessibilityRole
2525

@@ -77,25 +77,25 @@ import { ActivityIndicator } from 'react-native';
7777
import { Pressable, Text } from 'react-native-ama';
7878

7979
const Test = () => {
80-
const [isLoading, setIsLoading] = React.useState(false);
80+
const [isLoading, setIsLoading] = React.useState(false);
8181

82-
const doSometing = async () => {
83-
setIsLoading(true);
82+
const doSomething = async () => {
83+
setIsLoading(true);
8484

85-
await slowCall();
85+
await slowCall();
8686

87-
setIsLoading(true);
88-
};
87+
setIsLoading(true);
88+
};
8989

90-
return (
91-
<Pressable
92-
accessiblityRole="button"
93-
accessibilityLabel="Do it"
94-
busy={isLoading}
95-
onPress={doSometing}>
96-
{isLoading ? <ActivityIndicator /> : <Text>Do it</Text>}
97-
</Pressable>
98-
);
90+
return (
91+
<Pressable
92+
accessibilityRole="button"
93+
accessibilityLabel="Do it"
94+
busy={isLoading}
95+
onPress={doSomething}>
96+
{isLoading ? <ActivityIndicator /> : <Text>Do it</Text>}
97+
</Pressable>
98+
);
9999
};
100100
```
101101

@@ -130,20 +130,20 @@ import { ActivityIndicator } from 'react-native';
130130
import { Pressable, Text } from 'react-native-ama';
131131

132132
const Test = () => {
133-
const [isExpanded, setIsExpanded] = React.useState(false);
134-
135-
return (
136-
<>
137-
<Pressable
138-
accessiblityRole="button"
139-
accessibilityLabel={isExpanded ? 'Less' : 'More'}
140-
expanded={isExpanded}
141-
onPress={() => setIsExpanded(expanded => !expanded)}>
142-
{isExpanded ? <MinumIcon /> : <PlusIcon />}
143-
</Pressable>
144-
{isExpanded ? <>{/* content goes here */}</> : null}
145-
</>
146-
);
133+
const [isExpanded, setIsExpanded] = React.useState(false);
134+
135+
return (
136+
<>
137+
<Pressable
138+
accessibilityRole="button"
139+
accessibilityLabel={isExpanded ? 'Less' : 'More'}
140+
expanded={isExpanded}
141+
onPress={() => setIsExpanded(expanded => !expanded)}>
142+
{isExpanded ? <MinumIcon /> : <PlusIcon />}
143+
</Pressable>
144+
{isExpanded ? <>{/* content goes here */}</> : null}
145+
</>
146+
);
147147
};
148148
```
149149

‎website/versioned_docs/version-0.7.x/components/TouchableOpacity.md

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@ TouchableOpacity is an extension of the React Native [TouchableOpacity](https://
77
```tsx
88
import { TouchableOpacity } from 'react-native-ama';
99

10-
<TouchableOpacity accessibilityRole="button" accessibilityLabel="I'm pressable!">
11-
<Text>I'm pressable</Text>
10+
<TouchableOpacity
11+
accessibilityRole="button"
12+
accessibilityLabel="I'm pressable!">
13+
<Text>I'm pressable</Text>
1214
</TouchableOpacity>;
1315
```
1416

@@ -73,28 +75,28 @@ Indicates whether an element is currently busy or not.
7375

7476
```tsx
7577
import { ActivityIndicator } from 'react-native';
76-
import { TouchableOpacity, Text } from 'react-native-ama';
78+
import { Text, TouchableOpacity } from 'react-native-ama';
7779

7880
const Test = () => {
79-
const [isLoading, setIsLoading] = React.useState(false);
81+
const [isLoading, setIsLoading] = React.useState(false);
8082

81-
const doSometing = async () => {
82-
setIsLoading(true);
83+
const doSomething = async () => {
84+
setIsLoading(true);
8385

84-
await slowCall();
86+
await slowCall();
8587

86-
setIsLoading(true);
87-
};
88+
setIsLoading(true);
89+
};
8890

89-
return (
90-
<TouchableOpacity
91-
accessiblityRole="button"
92-
accessibilityLabel="Do it"
93-
busy={isLoading}
94-
onPress={doSometing}>
95-
{isLoading ? <ActivityIndicator /> : <Text>Do it</Text>}
96-
</TouchableOpacity>
97-
);
91+
return (
92+
<TouchableOpacity
93+
accessibilityRole="button"
94+
accessibilityLabel="Do it"
95+
busy={isLoading}
96+
onPress={doSomething}>
97+
{isLoading ? <ActivityIndicator /> : <Text>Do it</Text>}
98+
</TouchableOpacity>
99+
);
98100
};
99101
```
100102

@@ -126,23 +128,23 @@ Indicates whether an expandable element is currently expanded or collapsed.
126128

127129
```tsx
128130
import { ActivityIndicator } from 'react-native';
129-
import { TouchableOpacity, Text } from 'react-native-ama';
131+
import { Text, TouchableOpacity } from 'react-native-ama';
130132

131133
const Test = () => {
132-
const [isExpanded, setIsExpanded] = React.useState(false);
133-
134-
return (
135-
<>
136-
<TouchableOpacity
137-
accessiblityRole="button"
138-
accessibilityLabel={isExpanded ? 'Less' : 'More'}
139-
expanded={isExpanded}
140-
onPress={() => setIsExpanded(expanded => !expanded)}>
141-
{isExpanded ? <MinumIcon /> : <PlusIcon />}
142-
</TouchableOpacity>
143-
{isExpanded ? <>{/* content goes here */}</> : null}
144-
</>
145-
);
134+
const [isExpanded, setIsExpanded] = React.useState(false);
135+
136+
return (
137+
<>
138+
<TouchableOpacity
139+
accessibilityRole="button"
140+
accessibilityLabel={isExpanded ? 'Less' : 'More'}
141+
expanded={isExpanded}
142+
onPress={() => setIsExpanded(expanded => !expanded)}>
143+
{isExpanded ? <MinumIcon /> : <PlusIcon />}
144+
</TouchableOpacity>
145+
{isExpanded ? <>{/* content goes here */}</> : null}
146+
</>
147+
);
146148
};
147149
```
148150

0 commit comments

Comments
 (0)