@react-native-ama/core 1.2.1 → 2.0.0-beta.1

package/src/internals/checks/checkTextInput.ts

@@ -0,0 +1,65 @@
+import { Platform } from 'react-native';
+import { AmaNode } from '../../ReactNativeAma.types';
+import { AmaError } from '../types';
+import { isRuleDisabled } from '../utils/isRuleDisabled';
+
+const RETURN_DONE = Platform.select({ ios: 0, default: 6 });
+
+const REMOVE_ENDING_REGEXT = /\W$/;
+
+const removeEndingSymbol = (text?: string) => {
+    if (!text) {
+        return null;
+    }
+
+    const result = text.replace(REMOVE_ENDING_REGEXT, '').trim().toLowerCase();
+
+    return result;
+};
+
+export const checkTextInputs = (nodesToCheck: AmaNode[]): AmaError[] => {
+    const inputs = nodesToCheck.filter((node) => node.type === 'TextInput');
+    const errors: AmaError[] = [];
+
+    for (const key in inputs) {
+        const index = parseInt(key, 10);
+        const inputText = inputs[key];
+        const canHaveReturnTypeDone = index === inputs.length - 1;
+        const ariaLabel = removeEndingSymbol(inputText.ariaLabel);
+        const textInputLabel = ariaLabel
+            ? nodesToCheck.find(
+                // Ignores symbols like ":"
+                (node) => node.type === 'Text' && removeEndingSymbol(node.content) === ariaLabel
+            )
+            : false;
+
+        const isLabelAlsoAccessible =
+            textInputLabel && textInputLabel?.isAccessible;
+        const hasLabel = Boolean(textInputLabel);
+
+        if (inputText.returnType === RETURN_DONE && !canHaveReturnTypeDone) {
+            errors.push({
+                rule: 'INPUT_INVALID_RETURN_KEY',
+                viewId: inputText.viewId,
+            });
+        }
+
+        if (isLabelAlsoAccessible) {
+            errors.push({
+                rule: 'INPUT_HAS_FOCUSABLE_LABEL',
+                viewId: textInputLabel.viewId,
+            });
+        }
+
+        if (ariaLabel && !hasLabel) {
+            errors.push({
+                rule: 'INPUT_HAS_NO_VISIBLE_LABEL',
+                viewId: inputText.viewId,
+            });
+        }
+    }
+
+    return errors.filter(
+        (item): item is AmaError => !isRuleDisabled?.(item)
+    );
+};

package/src/internals/checks/performChecks.test.ts

@@ -0,0 +1,171 @@
+import type { AmaNode } from '../../ReactNativeAma.types';
+import { checkTextInputs } from './checkTextInput';
+import { performChecks } from './performChecks';
+
+jest.mock('../utils/isRuleDisabled', () => ({
+  isRuleDisabled: jest.fn(() => false),
+}));
+
+jest.mock('../utils/getRuleAction', () => ({
+  getRuleAction: jest.fn(() => 'PLEASE_FORGIVE_ME'),
+}));
+
+jest.mock('../utils/ignoreContrastCheck', () => ({
+  shouldIgnoreContrastCheckForDisabledElement: jest.fn(() => false),
+}));
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  const { isRuleDisabled } = require('../utils/isRuleDisabled');
+  isRuleDisabled.mockReturnValue(false);
+  const { getRuleAction } = require('../utils/getRuleAction');
+  getRuleAction.mockReturnValue('PLEASE_FORGIVE_ME');
+});
+
+const createNode = (overrides: Partial<AmaNode> = {}): AmaNode => ({
+  type: 'Pressable',
+  viewId: 1,
+  bounds: [100, 100, 0, 0],
+  hasOnSubmitEditing: false,
+  ...overrides,
+});
+
+describe('checkTextInputs', () => {
+  describe('Label is focusable', () => {
+    it('reports INPUT_HAS_FOCUSABLE_LABEL when Text node matches aria-label and is accessible', () => {
+      const nodes: AmaNode[] = [
+        createNode({ type: 'TextInput', viewId: 1, ariaLabel: 'Email:', isAccessible: undefined }),
+        createNode({ type: 'Text', viewId: 2, content: 'Email', isAccessible: true }),
+      ];
+
+      const result = checkTextInputs(nodes);
+      expect(result).toContainEqual({ rule: 'INPUT_HAS_FOCUSABLE_LABEL', viewId: 2 });
+    });
+
+    it('does not report INPUT_HAS_FOCUSABLE_LABEL when Text node is not accessible', () => {
+      const nodes: AmaNode[] = [
+        createNode({ type: 'TextInput', viewId: 1, ariaLabel: 'Email:', isAccessible: undefined }),
+        createNode({ type: 'Text', viewId: 2, content: 'Email', isAccessible: false }),
+      ];
+
+      const result = checkTextInputs(nodes);
+      expect(result.find(e => e.rule === 'INPUT_HAS_FOCUSABLE_LABEL')).toBeUndefined();
+    });
+
+    it('does not report INPUT_HAS_FOCUSABLE_LABEL when matching Text node is missing', () => {
+      const nodes: AmaNode[] = [
+        createNode({ type: 'TextInput', viewId: 1, ariaLabel: 'Email:', isAccessible: undefined }),
+      ];
+
+      const result = checkTextInputs(nodes);
+      expect(result.find(e => e.rule === 'INPUT_HAS_FOCUSABLE_LABEL')).toBeUndefined();
+    });
+
+    it('strips trailing punctuation when matching label text', () => {
+      const nodes: AmaNode[] = [
+        createNode({ type: 'TextInput', viewId: 1, ariaLabel: 'Name:', isAccessible: undefined }),
+        createNode({ type: 'Text', viewId: 2, content: 'Name', isAccessible: true }),
+      ];
+
+      const result = checkTextInputs(nodes);
+      expect(result).toContainEqual({ rule: 'INPUT_HAS_FOCUSABLE_LABEL', viewId: 2 });
+    });
+
+    it('performs case-insensitive matching', () => {
+      const nodes: AmaNode[] = [
+        createNode({ type: 'TextInput', viewId: 1, ariaLabel: 'EMAIL:', isAccessible: undefined }),
+        createNode({ type: 'Text', viewId: 2, content: 'email', isAccessible: true }),
+      ];
+
+      const result = checkTextInputs(nodes);
+      expect(result).toContainEqual({ rule: 'INPUT_HAS_FOCUSABLE_LABEL', viewId: 2 });
+    });
+  });
+
+  describe('Missing visible label', () => {
+    it('reports INPUT_HAS_NO_VISIBLE_LABEL when aria-label is set but no matching Text node', () => {
+      const nodes: AmaNode[] = [
+        createNode({ type: 'TextInput', viewId: 1, ariaLabel: 'Email:', isAccessible: undefined }),
+      ];
+
+      const result = checkTextInputs(nodes);
+      expect(result).toContainEqual({ rule: 'INPUT_HAS_NO_VISIBLE_LABEL', viewId: 1 });
+    });
+
+    it('does not report INPUT_HAS_NO_VISIBLE_LABEL when no aria-label is set', () => {
+      const nodes: AmaNode[] = [
+        createNode({ type: 'TextInput', viewId: 1, ariaLabel: undefined, isAccessible: undefined }),
+      ];
+
+      const result = checkTextInputs(nodes);
+      expect(result.find(e => e.rule === 'INPUT_HAS_NO_VISIBLE_LABEL')).toBeUndefined();
+    });
+
+    it('does not report INPUT_HAS_NO_VISIBLE_LABEL when matching Text node exists', () => {
+      const nodes: AmaNode[] = [
+        createNode({ type: 'TextInput', viewId: 1, ariaLabel: 'Email:', isAccessible: undefined }),
+        createNode({ type: 'Text', viewId: 2, content: 'Email', isAccessible: false }),
+      ];
+
+      const result = checkTextInputs(nodes);
+      expect(result.find(e => e.rule === 'INPUT_HAS_NO_VISIBLE_LABEL')).toBeUndefined();
+    });
+  });
+
+  describe('Invalid return key', () => {
+    it('reports INPUT_INVALID_RETURN_KEY for non-last input with returnType RETURN_DONE', () => {
+      const nodes: AmaNode[] = [
+        createNode({ type: 'TextInput', viewId: 1, ariaLabel: 'Email:', returnType: 0, isAccessible: undefined }),
+        createNode({ type: 'TextInput', viewId: 2, ariaLabel: 'Password:', returnType: 1, isAccessible: undefined }),
+      ];
+
+      const result = checkTextInputs(nodes);
+      expect(result).toContainEqual({ rule: 'INPUT_INVALID_RETURN_KEY', viewId: 1 });
+    });
+
+    it('does not report INPUT_INVALID_RETURN_KEY for last input with returnType RETURN_DONE', () => {
+      const nodes: AmaNode[] = [
+        createNode({ type: 'TextInput', viewId: 1, ariaLabel: 'Email:', returnType: 0, isAccessible: undefined }),
+      ];
+
+      const result = checkTextInputs(nodes);
+      expect(result.find(e => e.rule === 'INPUT_INVALID_RETURN_KEY')).toBeUndefined();
+    });
+  });
+
+  describe('Rule disable via config', () => {
+    it('filters out disabled rules from checkTextInputs results', () => {
+      const { isRuleDisabled } = require('../utils/isRuleDisabled');
+      isRuleDisabled.mockImplementation((error: { rule: string }) =>
+        error.rule === 'INPUT_HAS_NO_VISIBLE_LABEL',
+      );
+
+      const nodes: AmaNode[] = [
+        createNode({ type: 'TextInput', viewId: 1, ariaLabel: 'Email:', isAccessible: undefined }),
+      ];
+
+      const result = checkTextInputs(nodes);
+      expect(result.find(e => e.rule === 'INPUT_HAS_NO_VISIBLE_LABEL')).toBeUndefined();
+    });
+
+    it('filters out disabled rules from performChecks results', () => {
+      const { isRuleDisabled } = require('../utils/isRuleDisabled');
+      isRuleDisabled.mockImplementation((error: { rule: string }) =>
+        error.rule === 'NO_ACCESSIBILITY_LABEL',
+      );
+
+      const node = createNode({ type: 'Pressable', ariaLabel: undefined, isAccessible: true });
+      const result = performChecks(node);
+      expect(result.find(e => e.rule === 'NO_ACCESSIBILITY_LABEL')).toBeUndefined();
+    });
+
+    it('includes enabled rules in performChecks results', () => {
+      const { isRuleDisabled } = require('../utils/isRuleDisabled');
+      isRuleDisabled.mockReturnValue(false);
+
+      const node = createNode({ type: 'Pressable', ariaLabel: undefined, isAccessible: true });
+      const result = performChecks(node);
+      expect(result.find(e => e.rule === 'NO_ACCESSIBILITY_LABEL')).toBeDefined();
+    });
+  });
+});

package/src/internals/checks/performChecks.ts

@@ -0,0 +1,24 @@
+import { AmaNode } from '../../ReactNativeAma.types';
+import { AmaError } from '../types';
+import { isRuleDisabled } from '../utils/isRuleDisabled';
+import { checkAriaLabel } from './checkAriaLabel';
+import { checkAriaRole } from './checkAriaRole';
+import { checkContrast } from './checkContrast';
+import { checkImageAlt } from './checkImageAlt';
+import { checkIsUppercase } from './checkIsUppercase';
+import { checkLongNumber } from './checkLongNumber';
+import { checkMinimumSize } from './checkMinimumSize';
+
+export const performChecks = (node: AmaNode): AmaError[] => {
+  return [
+    checkAriaLabel(node),
+    checkAriaRole(node),
+    checkImageAlt(node),
+    checkMinimumSize(node),
+    checkIsUppercase({ node }),
+    checkContrast(node),
+    checkLongNumber(node),
+  ].filter(
+    (item): item is AmaError => item !== null && !isRuleDisabled?.(item)
+  );
+};

package/src/internals/components/AMAErrorOverlay.test.tsx

@@ -0,0 +1,139 @@
+import { render, screen, fireEvent, act } from '@testing-library/react-native';
+import React from 'react';
+
+const rn = jest.requireMock('react-native');
+
+
+jest.mock('../utils/amaClearHighlight', () => ({
+  amaClearHighlight: jest.fn(),
+}));
+jest.mock('../utils/amaHighlightComponent', () => ({
+  amaHighlightComponent: jest.fn().mockResolvedValue([0, 100, 200, 50]),
+}));
+jest.mock('../utils/logError', () => ({
+  logError: jest.fn(),
+}));
+jest.mock('../utils/getRuleErrorInfo', () => ({
+  getAMARuleErrorInfo: jest.fn(() => ({
+    message: 'Test message',
+    url: 'https://example.com',
+    severity: 'Critical',
+  })),
+}));
+
+const { AMAErrorOverlay: AMAErrorComponent } = require('./AMAErrorOverlay');
+
+const issue = { rule: 'NO_ACCESSIBILITY_LABEL' as const, viewId: 1, label: 'Button' };
+
+describe('AMAErrorComponent', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders nothing when issues is empty', () => {
+    const { toJSON } = render(<AMAErrorComponent issues={[]} />);
+    expect(toJSON()).toBeNull();
+  });
+
+  it('renders nothing when issues is undefined', () => {
+    const { toJSON } = render(<AMAErrorComponent />);
+    expect(toJSON()).toBeNull();
+  });
+
+  it('shows the issue count in the failed bar', () => {
+    render(<AMAErrorComponent issues={[issue]} />);
+    expect(screen.getByText('Inspect ›', { includeHiddenElements: true })).toBeTruthy();
+    expect(screen.getByText(/detected/, { includeHiddenElements: true })).toBeTruthy();
+  });
+
+  it('renders when multiple issues are provided', () => {
+    const issue2 = { rule: 'CONTRAST_FAILED' as const, viewId: 2 };
+    const { toJSON } = render(<AMAErrorComponent issues={[issue, issue2]} />);
+    expect(toJSON()).not.toBeNull();
+  });
+
+  it('opens the overlay when the Inspect button is pressed', async () => {
+    const { UNSAFE_getByProps } = render(<AMAErrorComponent issues={[issue]} />);
+
+    await act(async () => {
+      fireEvent.press(UNSAFE_getByProps({ role: 'button' }));
+    });
+
+    expect(screen.getByText('Why this matters:')).toBeTruthy();
+  });
+
+  it('shows issue index counter once overlay is open', async () => {
+    const issue2 = { rule: 'CONTRAST_FAILED' as const, viewId: 2 };
+    const { UNSAFE_getByProps } = render(<AMAErrorComponent issues={[issue, issue2]} />);
+
+    await act(async () => {
+      fireEvent.press(UNSAFE_getByProps({ role: 'button' }));
+    });
+
+    expect(screen.getByText('1 / 2')).toBeTruthy();
+  });
+
+  it('closes the overlay when the close button in AMARuleError is pressed', async () => {
+    const { UNSAFE_getByProps } = render(<AMAErrorComponent issues={[issue]} />);
+
+    await act(async () => {
+      fireEvent.press(UNSAFE_getByProps({ role: 'button' }));
+    });
+
+    await act(async () => {
+      fireEvent.press(screen.getByLabelText('Close Error information'));
+    });
+
+    expect(screen.queryByText('Why this matters:')).toBeNull();
+  });
+
+  it('navigates to next issue when Next is pressed', async () => {
+    const issue2 = { rule: 'CONTRAST_FAILED' as const, viewId: 2 };
+    const { UNSAFE_getByProps, UNSAFE_getAllByProps } = render(
+      <AMAErrorComponent issues={[issue, issue2]} />,
+    );
+
+    await act(async () => {
+      fireEvent.press(UNSAFE_getByProps({ role: 'button' }));
+    });
+
+    expect(screen.getByText('1 / 2')).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.press(UNSAFE_getAllByProps({ role: 'button' }).find(
+        (el: any) => el.props['aria-label'] === undefined &&
+          el.props.importantForAccessibility === 'no'
+      ) ?? UNSAFE_getAllByProps({ role: 'button' })[1]);
+    });
+  });
+
+  it('closes the overlay when the transparent overlay is pressed', async () => {
+    const { UNSAFE_getByProps, UNSAFE_getAllByProps } = render(<AMAErrorComponent issues={[issue]} />);
+
+    await act(async () => {
+      fireEvent.press(UNSAFE_getByProps({ role: 'button' }));
+    });
+
+    expect(screen.getByText('Why this matters:')).toBeTruthy();
+
+    await act(async () => {
+      const overlayPressable = UNSAFE_getAllByProps({ accessible: false }).find(
+        (el: any) => el.props.importantForAccessibility === 'no' && !el.props.accessibilityElementsHidden
+      );
+      if (overlayPressable) {
+        fireEvent.press(overlayPressable);
+      }
+    });
+  });
+
+  it('renders on android (uses different bottom offset)', () => {
+    rn.Platform.OS = 'android';
+    rn.Platform.select = jest.fn((spec: any) => spec.android ?? spec.default);
+
+    const { toJSON } = render(<AMAErrorComponent issues={[issue]} />);
+    expect(toJSON()).not.toBeNull();
+
+    rn.Platform.OS = 'ios';
+    rn.Platform.select = jest.fn((spec: any) => spec.ios ?? spec.default);
+  });
+});