fix spelling typos in components and docs (#222)

FormidableLabs · Aug 6, 2024 · fdca4ee · fdca4ee
1 parent 018549a
commit fdca4ee
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 116 deletions.
diff --git a/packages/core/src/hooks/useButtonChecks.ts b/packages/core/src/hooks/useButtonChecks.ts
@@ -49,7 +49,7 @@ export const useButtonChecks = __DEV__
         });
       checkCompatibleAccessibilityState({
         accessibilityStates: props?.accessibilityState,
-        accessibilityRole: props?.accessiblityRole,
+        accessibilityRole: props?.accessibilityRole,
       });
       checkAccessibilityRole(props.accessibilityRole);
 

diff --git a/packages/forms/src/components/FormSubmit.test.tsx b/packages/forms/src/components/FormSubmit.test.tsx
@@ -32,7 +32,7 @@ describe('FormSubmit', () => {
     );
   });
 
-  it('hides the children from the accessiblity tree', () => {
+  it('hides the children from the accessibility tree', () => {
     const { getByTestId } = render(
       <FormSubmit
         accessibilityLabel="This is the label"

diff --git a/packages/react-native/docs/TouchableOpacity.md b/packages/react-native/docs/TouchableOpacity.md
@@ -7,8 +7,10 @@ TouchableOpacity is an extension of the React Native [TouchableOpacity](https://
 ```tsx
 import { TouchableOpacity } from 'react-native-ama';
 
-<TouchableOpacity accessibilityRole="button" accessibilityLabel="I'm pressable!">
-    <Text>I'm pressable</Text>
+<TouchableOpacity
+  accessibilityRole="button"
+  accessibilityLabel="I'm pressable!">
+  <Text>I'm pressable</Text>
 </TouchableOpacity>;
 ```
 
@@ -73,28 +75,28 @@ Indicates whether an element is currently busy or not.
 
 ```tsx
 import { ActivityIndicator } from 'react-native';
-import { TouchableOpacity, Text } from 'react-native-ama';
+import { Text, TouchableOpacity } from 'react-native-ama';
 
 const Test = () => {
-    const [isLoading, setIsLoading] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
 
-    const doSometing = async () => {
-        setIsLoading(true);
+  const doSomething = async () => {
+    setIsLoading(true);
 
-        await slowCall();
+    await slowCall();
 
-        setIsLoading(true);
-    };
+    setIsLoading(true);
+  };
 
-    return (
-        <TouchableOpacity
-            accessiblityRole="button"
-            accessibilityLabel="Do it"
-            busy={isLoading}
-            onPress={doSometing}>
-            {isLoading ? <ActivityIndicator /> : <Text>Do it</Text>}
-        </TouchableOpacity>
-    );
+  return (
+    <TouchableOpacity
+      accessibilityRole="button"
+      accessibilityLabel="Do it"
+      busy={isLoading}
+      onPress={doSomething}>
+      {isLoading ? <ActivityIndicator /> : <Text>Do it</Text>}
+    </TouchableOpacity>
+  );
 };
 ```
 
@@ -126,23 +128,23 @@ Indicates whether an expandable element is currently expanded or collapsed.
 
 ```tsx
 import { ActivityIndicator } from 'react-native';
-import { TouchableOpacity, Text } from 'react-native-ama';
+import { Text, TouchableOpacity } from 'react-native-ama';
 
 const Test = () => {
-    const [isExpanded, setIsExpanded] = React.useState(false);
-
-    return (
-        <>
-            <TouchableOpacity
-                accessiblityRole="button"
-                accessibilityLabel={isExpanded ? 'Less' : 'More'}
-                expanded={isExpanded}
-                onPress={() => setIsExpanded(expanded => !expanded)}>
-                {isExpanded ? <MinumIcon /> : <PlusIcon />}
-            </TouchableOpacity>
-            {isExpanded ? <>{/* content goes here */}</> : null}
-        </>
-    );
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  return (
+    <>
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={isExpanded ? 'Less' : 'More'}
+        expanded={isExpanded}
+        onPress={() => setIsExpanded(expanded => !expanded)}>
+        {isExpanded ? <MiniumIcon /> : <PlusIcon />}
+      </TouchableOpacity>
+      {isExpanded ? <>{/* content goes here */}</> : null}
+    </>
+  );
 };
 ```
 

diff --git a/packages/react-native/docs/TouchableWithoutFeedback.md b/packages/react-native/docs/TouchableWithoutFeedback.md
@@ -10,8 +10,7 @@ import { TouchableWithoutFeedback } from 'react-native-ama';
 
 <TouchableWithoutFeedback
   accessibilityRole="button"
-  accessibilityLabel="I'm pressable!"
->
+  accessibilityLabel="I'm pressable!">
   <View>
     <Text> I'm pressable</Text>
   </View>
@@ -84,7 +83,7 @@ import { Text, TouchableWithoutFeedback } from 'react-native-ama';
 const Test = () => {
   const [isLoading, setIsLoading] = React.useState(false);
 
-  const doSometing = async () => {
+  const doSomething = async () => {
     setIsLoading(true);
 
     await slowCall();
@@ -94,11 +93,10 @@ const Test = () => {
 
   return (
     <TouchableWithoutFeedback
-      accessiblityRole="button"
+      accessibilityRole="button"
       accessibilityLabel="Do it"
       busy={isLoading}
-      onPress={doSometing}
-    >
+      onPress={doSomething}>
       {isLoading ? <ActivityIndicator /> : <Text>Do it</Text>}
     </TouchableWithoutFeedback>
   );
@@ -141,11 +139,10 @@ const Test = () => {
   return (
     <>
       <TouchableWithoutFeedback
-        accessiblityRole="button"
+        accessibilityRole="button"
         accessibilityLabel={isExpanded ? 'Less' : 'More'}
         expanded={isExpanded}
-        onPress={() => setIsExpanded(expanded => !expanded)}
-      >
+        onPress={() => setIsExpanded(expanded => !expanded)}>
         {isExpanded ? <MinumIcon /> : <PlusIcon />}
       </TouchableWithoutFeedback>
       {isExpanded ? <>{/* content goes here */}</> : null}

diff --git a/website/versioned_docs/version-0.7.x/components/Pressable.mdx b/website/versioned_docs/version-0.7.x/components/Pressable.mdx
@@ -8,18 +8,18 @@ Pressable is an extension of the React Native [Pressable](https://reactnative.de
 import { Pressable } from 'react-native-ama';
 
 <Pressable accessibilityRole="button" accessibilityLabel="I'm pressable!">
-    <Text>I'm pressable</Text>
+  <Text>I'm pressable</Text>
 </Pressable>;
 ```
 
 ## Accessibility improvements
 
 Compared to the default React Native component, this custom component:
 
-- Forces the use of `accessibilityRole` and `accessibilityLabel`  <DevOnly />
+- Forces the use of `accessibilityRole` and `accessibilityLabel` <DevOnly />
 - `accessibilityState` has been removed as its states `busy`, `checked`, `selected`, `expanded` are exposed as a property
 - Performs a [Minimum Size](../guidelines/minimum-size.md) check <DevOnly />
-- Performs a [contrast checker](../guidelines/contrast.md) between its background color and its children color  <DevOnly />
+- Performs a [contrast checker](../guidelines/contrast.md) between its background color and its children color <DevOnly />
 
 ### accessibilityRole
 
@@ -77,25 +77,25 @@ import { ActivityIndicator } from 'react-native';
 import { Pressable, Text } from 'react-native-ama';
 
 const Test = () => {
-    const [isLoading, setIsLoading] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
 
-    const doSometing = async () => {
-        setIsLoading(true);
+  const doSomething = async () => {
+    setIsLoading(true);
 
-        await slowCall();
+    await slowCall();
 
-        setIsLoading(true);
-    };
+    setIsLoading(true);
+  };
 
-    return (
-        <Pressable
-            accessiblityRole="button"
-            accessibilityLabel="Do it"
-            busy={isLoading}
-            onPress={doSometing}>
-            {isLoading ? <ActivityIndicator /> : <Text>Do it</Text>}
-        </Pressable>
-    );
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel="Do it"
+      busy={isLoading}
+      onPress={doSomething}>
+      {isLoading ? <ActivityIndicator /> : <Text>Do it</Text>}
+    </Pressable>
+  );
 };
 ```
 
@@ -130,20 +130,20 @@ import { ActivityIndicator } from 'react-native';
 import { Pressable, Text } from 'react-native-ama';
 
 const Test = () => {
-    const [isExpanded, setIsExpanded] = React.useState(false);
-
-    return (
-        <>
-            <Pressable
-                accessiblityRole="button"
-                accessibilityLabel={isExpanded ? 'Less' : 'More'}
-                expanded={isExpanded}
-                onPress={() => setIsExpanded(expanded => !expanded)}>
-                {isExpanded ? <MinumIcon /> : <PlusIcon />}
-            </Pressable>
-            {isExpanded ? <>{/* content goes here */}</> : null}
-        </>
-    );
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  return (
+    <>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={isExpanded ? 'Less' : 'More'}
+        expanded={isExpanded}
+        onPress={() => setIsExpanded(expanded => !expanded)}>
+        {isExpanded ? <MinumIcon /> : <PlusIcon />}
+      </Pressable>
+      {isExpanded ? <>{/* content goes here */}</> : null}
+    </>
+  );
 };
 ```
 

diff --git a/website/versioned_docs/version-0.7.x/components/TouchableOpacity.md b/website/versioned_docs/version-0.7.x/components/TouchableOpacity.md
@@ -7,8 +7,10 @@ TouchableOpacity is an extension of the React Native [TouchableOpacity](https://
 ```tsx
 import { TouchableOpacity } from 'react-native-ama';
 
-<TouchableOpacity accessibilityRole="button" accessibilityLabel="I'm pressable!">
-    <Text>I'm pressable</Text>
+<TouchableOpacity
+  accessibilityRole="button"
+  accessibilityLabel="I'm pressable!">
+  <Text>I'm pressable</Text>
 </TouchableOpacity>;
 ```
 
@@ -73,28 +75,28 @@ Indicates whether an element is currently busy or not.
 
 ```tsx
 import { ActivityIndicator } from 'react-native';
-import { TouchableOpacity, Text } from 'react-native-ama';
+import { Text, TouchableOpacity } from 'react-native-ama';
 
 const Test = () => {
-    const [isLoading, setIsLoading] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
 
-    const doSometing = async () => {
-        setIsLoading(true);
+  const doSomething = async () => {
+    setIsLoading(true);
 
-        await slowCall();
+    await slowCall();
 
-        setIsLoading(true);
-    };
+    setIsLoading(true);
+  };
 
-    return (
-        <TouchableOpacity
-            accessiblityRole="button"
-            accessibilityLabel="Do it"
-            busy={isLoading}
-            onPress={doSometing}>
-            {isLoading ? <ActivityIndicator /> : <Text>Do it</Text>}
-        </TouchableOpacity>
-    );
+  return (
+    <TouchableOpacity
+      accessibilityRole="button"
+      accessibilityLabel="Do it"
+      busy={isLoading}
+      onPress={doSomething}>
+      {isLoading ? <ActivityIndicator /> : <Text>Do it</Text>}
+    </TouchableOpacity>
+  );
 };
 ```
 
@@ -126,23 +128,23 @@ Indicates whether an expandable element is currently expanded or collapsed.
 
 ```tsx
 import { ActivityIndicator } from 'react-native';
-import { TouchableOpacity, Text } from 'react-native-ama';
+import { Text, TouchableOpacity } from 'react-native-ama';
 
 const Test = () => {
-    const [isExpanded, setIsExpanded] = React.useState(false);
-
-    return (
-        <>
-            <TouchableOpacity
-                accessiblityRole="button"
-                accessibilityLabel={isExpanded ? 'Less' : 'More'}
-                expanded={isExpanded}
-                onPress={() => setIsExpanded(expanded => !expanded)}>
-                {isExpanded ? <MinumIcon /> : <PlusIcon />}
-            </TouchableOpacity>
-            {isExpanded ? <>{/* content goes here */}</> : null}
-        </>
-    );
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  return (
+    <>
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={isExpanded ? 'Less' : 'More'}
+        expanded={isExpanded}
+        onPress={() => setIsExpanded(expanded => !expanded)}>
+        {isExpanded ? <MinumIcon /> : <PlusIcon />}
+      </TouchableOpacity>
+      {isExpanded ? <>{/* content goes here */}</> : null}
+    </>
+  );
 };
 ```