chore: bump eslint config to latest (#308)

* chore: bump eslint config to latest

* lint fix

* lint pass

* use roles directly

Author: thymikee

.eslintrc

@@ -9,6 +9,7 @@
     "import/no-unresolved": [
       2,
       { "ignore": ["^@theme", "^@docusaurus", "^@generated"] }
-    ]
+    ],
+    "react-native-a11y/has-valid-accessibility-ignores-invert-colors": 0
   }
 }

package.json

@@ -21,7 +21,7 @@
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.0",
-    "@callstack/eslint-config": "^9.1.0",
+    "@callstack/eslint-config": "^10.0.0",
     "@release-it/conventional-changelog": "^1.1.0",
     "@types/react": "^16.9.34",
     "@types/react-native": "^0.62.2",

src/__tests__/a11yAPI.test.js

@@ -5,10 +5,8 @@ import { render } from '..';
 
 const BUTTON_LABEL = 'cool button';
 const BUTTON_HINT = 'click this button';
-const BUTTON_ROLE = 'button';
 const TEXT_LABEL = 'cool text';
 const TEXT_HINT = 'static text';
-const TEXT_ROLE = 'link';
 // Little hack to make all the methods happy with type
 const NO_MATCHES_TEXT: any = 'not-existent-element';
 const NO_INSTANCES_FOUND = 'No instances found';
@@ -27,13 +25,13 @@ class Button extends React.Component<any> {
       <TouchableOpacity
         accessibilityHint={BUTTON_HINT}
         accessibilityLabel={BUTTON_LABEL}
-        accessibilityRole={BUTTON_ROLE}
+        accessibilityRole="button"
         accessibilityStates={['selected']}
       >
         <Typography
           accessibilityHint={TEXT_HINT}
           accessibilityLabel={TEXT_LABEL}
-          accessibilityRole={TEXT_ROLE}
+          accessibilityRole="link"
           accessibilityStates={['selected']}
           accessibilityState={{ expanded: false, selected: true }}
           accessibilityValue={{ min: 40, max: 60 }}
@@ -51,7 +49,7 @@ function Section() {
       <Typography
         accessibilityHint={TEXT_HINT}
         accessibilityLabel={TEXT_LABEL}
-        accessibilityRole={TEXT_ROLE}
+        accessibilityRole="link"
         // $FlowFixMe - removed in RN 0.62
         accessibilityStates={['selected', 'disabled']}
         accessibilityState={{ expanded: false }}

src/__tests__/debug.test.js

@@ -32,7 +32,7 @@ class Button extends React.Component<any, any> {
 }
 
 test('debug', () => {
-  jest.spyOn(console, 'log').mockImplementation(x => x);
+  jest.spyOn(console, 'log').mockImplementation((x) => x);
   const component = <Button onPress={jest.fn} text="Press me" />;
   debug(component);
 

src/__tests__/questionsBoard.test.js

@@ -20,8 +20,9 @@ function QuestionsBoard({ questions, onSubmit }) {
             <Text>{q}</Text>
             <TextInput
               accessibilityLabel="answer input"
-              onChangeText={text => {
-                setData(state => ({
+              accessibilityHint="input"
+              onChangeText={(text) => {
+                setData((state) => ({
                   ...state,
                   [index + 1]: { q, a: text },
                 }));

src/__tests__/render.test.js

@@ -45,7 +45,7 @@ class Banana extends React.Component<any, any> {
   }
 
   changeFresh = () => {
-    this.setState(state => ({
+    this.setState((state) => ({
       fresh: !state.fresh,
     }));
   };
@@ -320,7 +320,7 @@ test('toJSON', () => {
 });
 
 test('debug', () => {
-  jest.spyOn(console, 'log').mockImplementation(x => x);
+  jest.spyOn(console, 'log').mockImplementation((x) => x);
 
   const { debug } = render(<Banana />);
 
@@ -343,7 +343,7 @@ test('debug', () => {
 });
 
 test('debug changing component', () => {
-  jest.spyOn(console, 'log').mockImplementation(x => x);
+  jest.spyOn(console, 'log').mockImplementation((x) => x);
 
   const { getByProps, debug } = render(<Banana />);
 
@@ -390,7 +390,9 @@ test('renders options.wrapper around updated node', () => {
     wrapper: WrapperComponent,
   });
 
-  rerender(<View testID="inner" accessibilityLabel="test" />);
+  rerender(
+    <View testID="inner" accessibilityLabel="test" accessibilityHint="test" />
+  );
 
   expect(getByTestId('wrapper')).toBeTruthy();
   expect(toJSON()).toMatchInlineSnapshot(`
@@ -399,6 +401,7 @@ test('renders options.wrapper around updated node', () => {
       testID="wrapper"
     >
       <View
+        accessibilityHint="test"
         accessibilityLabel="test"
         testID="inner"
       />

src/__tests__/waitForElement.test.js

@@ -24,7 +24,7 @@ class BananaContainer extends React.Component<{}, any> {
   state = { fresh: false };
 
   onChangeFresh = async () => {
-    await new Promise(resolve => setTimeout(resolve, 300));
+    await new Promise((resolve) => setTimeout(resolve, 300));
     this.setState({ fresh: true });
   };
 

src/cleanup.js

@@ -2,7 +2,7 @@
 let cleanupQueue = new Set();
 
 export default function cleanup() {
-  cleanupQueue.forEach(fn => fn());
+  cleanupQueue.forEach((fn) => fn());
   cleanupQueue.clear();
 }
 

src/flushMicrotasksQueue.js

@@ -3,5 +3,5 @@
  * Wait for microtasks queue to flush
  */
 export default function flushMicrotasksQueue(): Promise<any> {
-  return new Promise(resolve => setImmediate(resolve));
+  return new Promise((resolve) => setImmediate(resolve));
 }

src/helpers/a11yAPI.js

@@ -1,7 +1,7 @@
 // @flow
-import makeQuery from './makeQuery';
 import type { A11yRole, A11yStates, A11yState, A11yValue } from '../types.flow';
 import type { WaitForOptions } from './findByAPI';
+import makeQuery from './makeQuery';
 
 type GetReturn = ReactTestInstance;
 type GetAllReturn = Array<ReactTestInstance>;
@@ -44,18 +44,18 @@ type A11yAPI = {|
   findAllByA11yStates: (A11yStates, ?WaitForOptions) => FindAllReturn,
 
   // State
-  getByA11yState: A11yState => GetReturn,
-  getAllByA11yState: A11yState => GetAllReturn,
-  queryByA11yState: A11yState => QueryReturn,
-  queryAllByA11yState: A11yState => QueryAllReturn,
+  getByA11yState: (A11yState) => GetReturn,
+  getAllByA11yState: (A11yState) => GetAllReturn,
+  queryByA11yState: (A11yState) => QueryReturn,
+  queryAllByA11yState: (A11yState) => QueryAllReturn,
   findByA11yState: (A11yState, ?WaitForOptions) => FindReturn,
   findAllByA11yState: (A11yState, ?WaitForOptions) => FindAllReturn,
 
   // Value
-  getByA11yValue: A11yValue => GetReturn,
-  getAllByA11yValue: A11yValue => GetAllReturn,
-  queryByA11yValue: A11yValue => QueryReturn,
-  queryAllByA11yValue: A11yValue => QueryAllReturn,
+  getByA11yValue: (A11yValue) => GetReturn,
+  getAllByA11yValue: (A11yValue) => GetAllReturn,
+  queryByA11yValue: (A11yValue) => QueryReturn,
+  queryAllByA11yValue: (A11yValue) => QueryAllReturn,
   findByA11yValue: (A11yValue, ?WaitForOptions) => FindReturn,
   findAllByA11yValue: (A11yValue, ?WaitForOptions) => FindAllReturn,
 |};
@@ -87,14 +87,14 @@ export function matchArrayValue(
     return prop.includes(matcher);
   }
 
-  return !matcher.some(e => !prop.includes(e));
+  return !matcher.some((e) => !prop.includes(e));
 }
 
 export function matchObject<T: {}>(prop?: T, matcher: T): boolean {
   return prop
     ? Object.keys(matcher).length !== 0 &&
         Object.keys(prop).length !== 0 &&
-        !Object.keys(matcher).some(key => prop[key] !== matcher[key])
+        !Object.keys(matcher).some((key) => prop[key] !== matcher[key])
     : false;
 }