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

package/dist/internals/components/AMARuleError.js

@@ -0,0 +1,161 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AMARuleError = void 0;
+/* eslint-disable react-native/no-inline-styles */
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const rules_1 = require("../utils/rules");
+const SEVERITIES = __DEV__
+    ? {
+        Serious: 'Serious',
+        Critical: 'Critical',
+        Warning: 'Warning',
+    }
+    : null;
+const REGEX_MARKDOWN = /(`[^`]+`|\*\*[^*]+\*\*)/g;
+exports.AMARuleError = __DEV__
+    ? ({ issue, maxHeight, onClose, }) => {
+        const ruleHelp = rules_1.RULES_HELP[issue.rule];
+        const COLOR_TOKEN_REGEX = /(\(#[0-9A-Fa-f]{3,8}\))/g;
+        const renderMarkdown = (text) => {
+            const parts = text.split(REGEX_MARKDOWN);
+            return parts.map((part, index) => {
+                if (part.startsWith('`') && part.endsWith('`') && Code) {
+                    return <Code key={index}>{part.slice(1, -1)}</Code>;
+                }
+                if (part.startsWith('**') && part.endsWith('**')) {
+                    return (<react_native_1.Text key={index} style={[styles === null || styles === void 0 ? void 0 : styles.text, styles === null || styles === void 0 ? void 0 : styles.bold]}>
+                {part.slice(2, -2)}
+              </react_native_1.Text>);
+                }
+                return (<react_native_1.Text key={index} style={styles === null || styles === void 0 ? void 0 : styles.text}>
+              {part}
+            </react_native_1.Text>);
+            });
+        };
+        const renderHowToFix = (text) => {
+            if (typeof text === 'string') {
+                return <react_native_1.Text style={styles === null || styles === void 0 ? void 0 : styles.text}>{renderMarkdown(text)}</react_native_1.Text>;
+            }
+            return (<react_native_1.View>
+            {text.map((value, index) => {
+                    return (<react_native_1.Text key={index} style={styles.text}>
+                  {renderMarkdown(value)}
+                </react_native_1.Text>);
+                })}
+          </react_native_1.View>);
+        };
+        const renderTextWithColorSwatches = (text) => {
+            const parts = text.split(COLOR_TOKEN_REGEX);
+            return parts.map((part, index) => {
+                if (part.startsWith('(#') && part.endsWith(')')) {
+                    const color = part.slice(1, -1);
+                    return (<react_1.default.Fragment key={index}>
+                <react_native_1.Text style={styles === null || styles === void 0 ? void 0 : styles.text} importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>
+                  (
+                </react_native_1.Text>
+                <react_native_1.Text style={styles.swatchFrame} importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>
+                  <react_native_1.Text style={[styles.swatchGlyph, { color }]} importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>
+                    ■
+                  </react_native_1.Text>
+                </react_native_1.Text>
+                <react_native_1.Text style={styles === null || styles === void 0 ? void 0 : styles.text} importantForAccessibility="no-hide-descendants" accessibilityElementsHidden accessible={false}>
+                  {` ${color}`}
+                </react_native_1.Text>
+                <react_native_1.Text style={styles === null || styles === void 0 ? void 0 : styles.text} importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>
+                  )
+                </react_native_1.Text>
+              </react_1.default.Fragment>);
+                }
+                return (<react_native_1.Text key={index} style={styles === null || styles === void 0 ? void 0 : styles.text}>
+              {part}
+            </react_native_1.Text>);
+            });
+        };
+        return (<react_native_1.ScrollView style={{ maxHeight, flex: 1, width: '100%', padding: 12 }}>
+          <react_native_1.View style={styles.row}>
+            <react_native_1.Text style={styles.bold} aria-role="header">
+              {SEVERITIES[ruleHelp.severity]}:
+            </react_native_1.Text>
+            <react_native_1.Text style={styles.flex}>{ruleHelp.issue}</react_native_1.Text>
+            <react_native_1.Pressable hitSlop={{ left: 18, top: 18, bottom: 18, right: 18 }} role="button" aria-label="Close Error information" onPress={onClose}>
+              <react_native_1.Text> ✖ </react_native_1.Text>
+            </react_native_1.Pressable>
+          </react_native_1.View>
+
+          <react_native_1.Text style={[styles.bold, styles === null || styles === void 0 ? void 0 : styles.full]} aria-role="header">
+            Why this matters:
+          </react_native_1.Text>
+          <react_native_1.View style={[styles.row, styles === null || styles === void 0 ? void 0 : styles.column]}>
+            <react_native_1.Text style={styles === null || styles === void 0 ? void 0 : styles.text}>{ruleHelp.message}</react_native_1.Text>
+            {issue.extra ? (<react_native_1.View style={styles.extraInline}>
+                {renderTextWithColorSwatches(String(issue.extra))}
+              </react_native_1.View>) : null}
+          </react_native_1.View>
+          <react_native_1.Text style={[styles.bold, styles === null || styles === void 0 ? void 0 : styles.full]} aria-role="header">
+            How to fix:
+          </react_native_1.Text>
+          <react_native_1.View style={styles.row}>{renderHowToFix(ruleHelp.howToFix)}</react_native_1.View>
+        </react_native_1.ScrollView>);
+    }
+    : null;
+const Code = __DEV__
+    ? ({ children }) => {
+        const code = typeof children === 'string' ? children.replace(/`/g, '') : children;
+        return <react_native_1.Text style={styles.code}> {code} </react_native_1.Text>;
+    }
+    : null;
+const styles = __DEV__
+    ? react_native_1.StyleSheet.create({
+        row: {
+            flexDirection: 'row',
+            alignContent: 'center',
+            alignItems: 'center',
+            fontSize: 14,
+            width: '100%',
+            marginBottom: 12,
+            flex: 1,
+        },
+        bold: {
+            fontSize: 14,
+            fontWeight: 600,
+            paddingRight: 12,
+        },
+        full: {
+            width: '100%',
+            marginBottom: 4,
+        },
+        text: {
+            lineHeight: 18,
+            paddingBottom: 4,
+        },
+        column: {
+            flexDirection: 'column',
+        },
+        flex: {
+            flex: 1,
+        },
+        code: {
+            backgroundColor: '#333',
+            color: '#fff',
+        },
+        extraInline: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+        },
+        swatchFrame: {
+            backgroundColor: '#000',
+            paddingHorizontal: 2,
+            marginHorizontal: 2,
+            lineHeight: 14,
+        },
+        swatchGlyph: {
+            fontSize: 11,
+            lineHeight: 14,
+        },
+    })
+    : null;

package/dist/internals/config.d.ts

@@ -0,0 +1,23 @@
+import { AmaRule, AmaRuleAction } from './utils/rules';
+export declare const NON_OVERRIDABLE_RULES: string[] | undefined;
+export type HighlightMode = 'border' | 'background' | 'both';
+export type LogMode = 'always' | 'inspect';
+export type AmaProjectConfig = {
+    rules: Record<Partial<AmaRule> | 'CONTRAST_CHECKER_MAX_DEPTH' | 'IGNORE_CONTRAST_FOR_DISABLED_ELEMENTS', AmaRuleAction> | null;
+    accessibilityLabelExceptions: string[];
+    highlight: {
+        mode: HighlightMode;
+        borderWidth?: number;
+        gap?: number;
+    };
+    log: LogMode;
+    uppercaseMinLength: number;
+    longNumberMinLength: number;
+    checks: {
+        ui: boolean;
+        forms: boolean;
+        delay: number;
+    };
+};
+declare let projectRules: AmaProjectConfig;
+export default projectRules;

package/dist/internals/config.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NON_OVERRIDABLE_RULES = void 0;
+const logger_1 = __importDefault(require("./utils/logger"));
+exports.NON_OVERRIDABLE_RULES = __DEV__
+    ? [
+        'NO_ACCESSIBILITY_ROLE',
+        'NO_ACCESSIBILITY_LABEL',
+        'NO_KEYBOARD_TRAP',
+        'NO_UNDEFINED',
+        'INPUT_HAS_NO_VISIBLE_LABEL',
+        'FLATLIST_NO_COUNT_IN_PLURAL_MESSAGE',
+        'BOTTOM_SHEET_CLOSE_ACTION',
+        'INCOMPATIBLE_ACCESSIBILITY_STATE',
+        'INCOMPATIBLE_ACCESSIBILITY_ROLE',
+    ]
+    : undefined;
+const defaultRules = require('./../../ama.config.json');
+let projectRules = defaultRules;
+try {
+    // look upwards to user's project root
+    const userDefinedRules = require('./../../../../ama.config.json');
+    projectRules = Object.assign(projectRules, userDefinedRules);
+    logger_1.default === null || logger_1.default === void 0 ? void 0 : logger_1.default.log("Using project's config file");
+}
+catch (_) {
+    logger_1.default === null || logger_1.default === void 0 ? void 0 : logger_1.default.log('Project config not found, using default one!');
+}
+logger_1.default === null || logger_1.default === void 0 ? void 0 : logger_1.default.log(JSON.stringify(projectRules, null, 2));
+exports.default = projectRules;

package/dist/internals/types.d.ts

@@ -0,0 +1,9 @@
+import { AmaRule, AmaRuleAction } from './utils/rules';
+export type { AmaRule, AmaRuleAction };
+export type Position = [number, number, number, number];
+export type AmaError = {
+    rule: AmaRule;
+    extra?: any;
+    label?: string;
+    viewId: number;
+};

package/dist/internals/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/internals/useAMADev.d.ts

@@ -0,0 +1,8 @@
+import type { RefObject } from 'react';
+import type { AmaError, AmaRule } from './types';
+export type UseAMADevValue = {
+    issues: AmaError[];
+    trackError: (rule: AmaRule, ref?: RefObject<any>) => void;
+};
+export type UseAMADev = () => UseAMADevValue;
+export declare const useAMADev: UseAMADev | null;

package/dist/internals/useAMADev.dev.d.ts

@@ -0,0 +1,2 @@
+import type { UseAMADev } from './useAMADev';
+export declare const useAMADev: UseAMADev | null;

package/dist/internals/useAMADev.dev.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAMADev = void 0;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const ReactNativeAmaModule_1 = __importDefault(require("../ReactNativeAmaModule"));
+const config_1 = __importDefault(require("./config"));
+const useAMADevNodeChecks_dev_1 = require("./useAMADevNodeChecks.dev");
+const useAMADevUiInteraction_dev_1 = require("./useAMADevUiInteraction.dev");
+const amaClearHighlight_1 = require("./utils/amaClearHighlight");
+const logError_1 = require("./utils/logError");
+const logger_1 = __importDefault(require("./utils/logger"));
+const startAMA = __DEV__
+    ? () => {
+        var _a, _b;
+        logger_1.default === null || logger_1.default === void 0 ? void 0 : logger_1.default.log('👀 Start Monitoring 👀: ' + JSON.stringify(config_1.default.checks));
+        ReactNativeAmaModule_1.default.start(Object.assign(Object.assign({}, config_1.default.checks), { borderWidth: (_a = config_1.default.highlight) === null || _a === void 0 ? void 0 : _a.borderWidth, gap: (_b = config_1.default.highlight) === null || _b === void 0 ? void 0 : _b.gap }));
+    }
+    : null;
+exports.useAMADev = __DEV__
+    ? () => {
+        const isMonitoring = (0, react_1.useRef)(true);
+        const lastNodesChecked = (0, react_1.useRef)({});
+        const previousNodeIssues = (0, react_1.useRef)([]);
+        const jsFailedChecks = (0, react_1.useRef)([]);
+        const highlightedIssues = (0, react_1.useRef)({});
+        const issuesRef = (0, react_1.useRef)([]);
+        const [issues, setIssues] = (0, react_1.useState)([]);
+        (0, react_1.useEffect)(() => {
+            issuesRef.current = issues;
+        }, [issues]);
+        const checkNodes = (nodesToCheck) => {
+            var _a;
+            lastNodesChecked.current = nodesToCheck;
+            const nodeIssues = (_a = useAMADevNodeChecks_dev_1.runNodeChecks === null || useAMADevNodeChecks_dev_1.runNodeChecks === void 0 ? void 0 : (0, useAMADevNodeChecks_dev_1.runNodeChecks)({
+                nodesToCheck,
+                previousNodeIssues: previousNodeIssues.current,
+                jsFailedChecks: jsFailedChecks.current,
+                highlightedIssues: highlightedIssues.current,
+            })) !== null && _a !== void 0 ? _a : [];
+            setIssues((currentIssues) => {
+                var _a;
+                return (_a = useAMADevNodeChecks_dev_1.getNodeIssueState === null || useAMADevNodeChecks_dev_1.getNodeIssueState === void 0 ? void 0 : (0, useAMADevNodeChecks_dev_1.getNodeIssueState)(currentIssues, nodeIssues, nodesToCheck)) !== null && _a !== void 0 ? _a : currentIssues;
+            });
+            previousNodeIssues.current = nodeIssues;
+        };
+        const checkResultUiInteraction = (data) => {
+            var _a;
+            if (!data) {
+                return;
+            }
+            const itemsToFlag = Array.from((_a = useAMADevUiInteraction_dev_1.getItemsWithNoStateUpdated === null || useAMADevUiInteraction_dev_1.getItemsWithNoStateUpdated === void 0 ? void 0 : (0, useAMADevUiInteraction_dev_1.getItemsWithNoStateUpdated)(data, lastNodesChecked.current)) !== null && _a !== void 0 ? _a : []);
+            setIssues((prevIssues) => {
+                var _a;
+                return (_a = useAMADevUiInteraction_dev_1.syncUiInteractionIssues === null || useAMADevUiInteraction_dev_1.syncUiInteractionIssues === void 0 ? void 0 : (0, useAMADevUiInteraction_dev_1.syncUiInteractionIssues)(prevIssues, itemsToFlag, data.rootTag)) !== null && _a !== void 0 ? _a : prevIssues;
+            });
+        };
+        const stopAMA = () => {
+            logger_1.default === null || logger_1.default === void 0 ? void 0 : logger_1.default.log('[React Native AMA]: 🙈 Stop Monitoring 🙈');
+            for (const issue of issuesRef.current) {
+                amaClearHighlight_1.amaClearHighlight === null || amaClearHighlight_1.amaClearHighlight === void 0 ? void 0 : (0, amaClearHighlight_1.amaClearHighlight)(issue);
+            }
+            highlightedIssues.current = {};
+            ReactNativeAmaModule_1.default.stop();
+        };
+        (0, react_1.useEffect)(() => {
+            startAMA === null || startAMA === void 0 ? void 0 : startAMA();
+            const amaOnNodesListener = ReactNativeAmaModule_1.default.addListener('onAmaNodes', checkNodes);
+            const amaOnUiInteraction = ReactNativeAmaModule_1.default.addListener('onUIInteraction', checkResultUiInteraction);
+            return () => {
+                stopAMA();
+                amaOnNodesListener.remove();
+                amaOnUiInteraction.remove();
+            };
+        }, []);
+        const toggleReactNativeAMA = () => {
+            if (isMonitoring.current) {
+                stopAMA();
+                setIssues([]);
+            }
+            else {
+                startAMA === null || startAMA === void 0 ? void 0 : startAMA();
+            }
+            isMonitoring.current = !isMonitoring.current;
+        };
+        const trackError = (rule, ref) => {
+            var _a, _b;
+            const viewId = (_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.__nativeTag) !== null && _b !== void 0 ? _b : -1;
+            const issue = { rule, viewId };
+            logError_1.logError === null || logError_1.logError === void 0 ? void 0 : (0, logError_1.logError)(issue);
+            const alreadyTracked = jsFailedChecks.current.some((item) => item.viewId === viewId && item.rule === rule);
+            if (!alreadyTracked) {
+                jsFailedChecks.current.push(issue);
+                setIssues((currentIssues) => [...currentIssues, issue]);
+                checkNodes(lastNodesChecked.current);
+            }
+        };
+        (0, react_1.useEffect)(() => {
+            react_native_1.DevSettings.addMenuItem('Toggle React Native AMA', toggleReactNativeAMA);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+        return {
+            issues,
+            trackError,
+        };
+    }
+    : null;

package/dist/internals/useAMADev.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAMADev = void 0;
+exports.useAMADev = __DEV__
+    ? require('./useAMADev.dev').useAMADev
+    : null;

package/dist/internals/useAMADevNodeChecks.dev.d.ts

@@ -0,0 +1,16 @@
+import type { AmaNodes } from '../ReactNativeAma.types';
+import type { AmaError } from './types';
+type HighlightedIssues = Record<number, number>;
+type RunNodeChecksOptions = {
+    nodesToCheck: AmaNodes;
+    previousNodeIssues: AmaError[];
+    jsFailedChecks: AmaError[];
+    highlightedIssues: HighlightedIssues;
+};
+type RunNodeChecks = (options: RunNodeChecksOptions) => AmaError[];
+type CollectNodeIssues = (nodesToCheck: AmaNodes) => AmaError[];
+type GetNodeIssueState = (currentIssues: AmaError[], nodeIssues: AmaError[], nodesToCheck: AmaNodes) => AmaError[];
+export declare const runNodeChecks: RunNodeChecks | null;
+export declare const collectNodeIssues: CollectNodeIssues | null;
+export declare const getNodeIssueState: GetNodeIssueState | null;
+export {};

package/dist/internals/useAMADevNodeChecks.dev.js

@@ -0,0 +1,115 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNodeIssueState = exports.collectNodeIssues = exports.runNodeChecks = void 0;
+const checkTextInput_1 = require("./checks/checkTextInput");
+const performChecks_1 = require("./checks/performChecks");
+const config_1 = __importDefault(require("./config"));
+const amaClearHighlight_1 = require("./utils/amaClearHighlight");
+const amaHighlightComponent_1 = require("./utils/amaHighlightComponent");
+const logFoundIssues_1 = require("./utils/logFoundIssues");
+exports.runNodeChecks = __DEV__
+    ? ({ nodesToCheck, previousNodeIssues, jsFailedChecks, highlightedIssues }) => {
+        var _a;
+        const nodeIssues = (_a = exports.collectNodeIssues === null || exports.collectNodeIssues === void 0 ? void 0 : (0, exports.collectNodeIssues)(nodesToCheck)) !== null && _a !== void 0 ? _a : [];
+        if (previousNodeIssues.length) {
+            clearFixedNodeIssues === null || clearFixedNodeIssues === void 0 ? void 0 : clearFixedNodeIssues(previousNodeIssues, nodeIssues, jsFailedChecks);
+        }
+        logFoundIssues_1.logFoundIssues === null || logFoundIssues_1.logFoundIssues === void 0 ? void 0 : (0, logFoundIssues_1.logFoundIssues)(nodeIssues);
+        syncHighlightedIssues === null || syncHighlightedIssues === void 0 ? void 0 : syncHighlightedIssues(nodeIssues, jsFailedChecks, highlightedIssues);
+        return nodeIssues;
+    }
+    : null;
+exports.collectNodeIssues = __DEV__
+    ? (nodesToCheck) => {
+        const nodes = Object.values(nodesToCheck);
+        let hasAtLeastOneHeader = false;
+        let hasTextInput = false;
+        const nodeIssues = [];
+        for (const node of nodes) {
+            if (node.type === 'TextInput') {
+                hasTextInput = true;
+            }
+            if (!hasAtLeastOneHeader && (isHeaderNode === null || isHeaderNode === void 0 ? void 0 : isHeaderNode(node))) {
+                hasAtLeastOneHeader = true;
+            }
+            nodeIssues.push(...(0, performChecks_1.performChecks)(node));
+        }
+        if (hasTextInput && config_1.default.checks.forms) {
+            nodeIssues.push(...(0, checkTextInput_1.checkTextInputs)(nodes));
+        }
+        if (!hasAtLeastOneHeader) {
+            nodeIssues.push({ rule: 'NO_HEADER_FOUND', viewId: -1 });
+        }
+        return nodeIssues;
+    }
+    : null;
+exports.getNodeIssueState = __DEV__
+    ? (currentIssues, nodeIssues, nodesToCheck) => {
+        var _a, _b;
+        const issuesToKeep = (_a = keepNoStateHandledOrKeyboardTrapIssuesStillInView === null || keepNoStateHandledOrKeyboardTrapIssuesStillInView === void 0 ? void 0 : keepNoStateHandledOrKeyboardTrapIssuesStillInView(currentIssues, nodesToCheck)) !== null && _a !== void 0 ? _a : [];
+        return [
+            ...issuesToKeep,
+            ...((_b = sortIssuesByViewId === null || sortIssuesByViewId === void 0 ? void 0 : sortIssuesByViewId(nodeIssues)) !== null && _b !== void 0 ? _b : nodeIssues),
+        ];
+    }
+    : null;
+const isHeaderNode = __DEV__
+    ? (node) => {
+        var _a;
+        return node.type === 'Text' &&
+            (((_a = node.traits) === null || _a === void 0 ? void 0 : _a.includes('header')) || node.ariaRole === 'header');
+    }
+    : null;
+const clearFixedNodeIssues = __DEV__
+    ? (previousNodeIssues, nodeIssues, jsIssues) => {
+        const fixedIssues = previousNodeIssues.filter((issue) => nodeIssues.find((item) => item.viewId === issue.viewId) ===
+            undefined && issue.rule !== 'NO_ACCESSIBILITY_STATE_SET');
+        for (const issue of fixedIssues) {
+            amaClearHighlight_1.amaClearHighlight === null || amaClearHighlight_1.amaClearHighlight === void 0 ? void 0 : (0, amaClearHighlight_1.amaClearHighlight)(issue);
+            const jsIndex = jsIssues.findIndex((item) => item.viewId === issue.viewId && item.rule === issue.rule);
+            if (jsIndex >= 0) {
+                jsIssues.splice(jsIndex, 1);
+            }
+        }
+    }
+    : null;
+const syncHighlightedIssues = __DEV__
+    ? (nodeIssues, jsFailedChecks, highlightedIssues) => {
+        var _a;
+        const issuesByViewId = (_a = groupIssuesByViewId === null || groupIssuesByViewId === void 0 ? void 0 : groupIssuesByViewId([...nodeIssues, ...jsFailedChecks])) !== null && _a !== void 0 ? _a : {};
+        for (const viewIdStr of Object.keys(issuesByViewId)) {
+            const viewId = Number(viewIdStr);
+            const issuesForView = issuesByViewId[viewId];
+            if (highlightedIssues[viewId] !== issuesForView.length) {
+                amaHighlightComponent_1.amaHighlightComponent === null || amaHighlightComponent_1.amaHighlightComponent === void 0 ? void 0 : (0, amaHighlightComponent_1.amaHighlightComponent)(issuesForView);
+                highlightedIssues[viewId] = issuesForView.length;
+            }
+        }
+    }
+    : null;
+const groupIssuesByViewId = __DEV__
+    ? (issues) => {
+        return issues.reduce((groupedIssues, issue) => {
+            if (issue.viewId >= 0) {
+                if (!groupedIssues[issue.viewId]) {
+                    groupedIssues[issue.viewId] = [];
+                }
+                groupedIssues[issue.viewId].push(issue);
+            }
+            return groupedIssues;
+        }, {});
+    }
+    : null;
+const sortIssuesByViewId = __DEV__
+    ? (issues) => [...issues].sort((a, b) => a.viewId - b.viewId)
+    : null;
+const keepNoStateHandledOrKeyboardTrapIssuesStillInView = __DEV__
+    ? (issues, nodesInView) => {
+        return issues.filter((item) => (item.rule === 'NO_ACCESSIBILITY_STATE_SET' ||
+            item.rule === 'NO_KEYBOARD_TRAP') &&
+            nodesInView[item.viewId]);
+    }
+    : null;

package/dist/internals/useAMADevUiInteraction.dev.d.ts

@@ -0,0 +1,7 @@
+import type { AmaNode, AmaUiSnapshotsData } from '../ReactNativeAma.types';
+import type { AmaError } from './types';
+type GetItemsWithNoStateUpdated = (data: AmaUiSnapshotsData, nodesInView: Record<number, AmaNode>) => Set<number>;
+type SyncUiInteractionIssues = (prevIssues: AmaError[], itemsToFlag: number[], rootTag: number) => AmaError[];
+export declare const getItemsWithNoStateUpdated: GetItemsWithNoStateUpdated | null;
+export declare const syncUiInteractionIssues: SyncUiInteractionIssues | null;
+export {};

package/dist/internals/useAMADevUiInteraction.dev.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.syncUiInteractionIssues = exports.getItemsWithNoStateUpdated = void 0;
+const amaClearHighlight_1 = require("./utils/amaClearHighlight");
+const amaHighlightComponent_1 = require("./utils/amaHighlightComponent");
+const A11Y_STATE_KEYS = [
+    'parentId',
+    'isChecked',
+    'isBusy',
+    'isSelected',
+    'isDisabled',
+    'isExpanded',
+];
+exports.getItemsWithNoStateUpdated = __DEV__
+    ? (data, nodesInView) => {
+        var _a, _b;
+        const viewsBefore = data.before;
+        const viewsAfter = (_a = data.afterSettled) !== null && _a !== void 0 ? _a : data.after;
+        const issues = new Set();
+        const afterKeys = Object.keys(viewsAfter).map(Number);
+        if (!afterKeys.includes(data.rootTag) ||
+            data.beforeModalVisible !== data.afterModalVisible) {
+            return issues;
+        }
+        // The tapped element is no longer in the UI, usually after navigation.
+        if (!nodesInView[data.rootTag]) {
+            return issues;
+        }
+        let hasSomethingChanged = false;
+        for (const tagId of afterKeys) {
+            const snapBefore = viewsBefore[tagId];
+            const snapAfter = viewsAfter[tagId];
+            if (!snapBefore) {
+                hasSomethingChanged = true;
+                continue;
+            }
+            const subKeys = Object.keys(snapAfter).filter((key) => key !== 'parentId');
+            for (const subKey of subKeys) {
+                const hasPropertyChanged = !A11Y_STATE_KEYS.includes(subKey) &&
+                    snapBefore[subKey] !== snapAfter[subKey];
+                if (hasPropertyChanged) {
+                    hasSomethingChanged = true;
+                    break;
+                }
+            }
+        }
+        if (hasSomethingChanged) {
+            const parentId = data.rootTag;
+            const after = data.after[parentId];
+            const settled = (_b = data.afterSettled) === null || _b === void 0 ? void 0 : _b[parentId];
+            const before = data.before[parentId];
+            const hasStateChanged = A11Y_STATE_KEYS.some((key) => before[key] !== after[key] ||
+                (settled && before[key] !== settled[key]));
+            if (parentId && !hasStateChanged) {
+                issues.add(parentId);
+            }
+        }
+        return issues;
+    }
+    : null;
+exports.syncUiInteractionIssues = __DEV__
+    ? (prevIssues, itemsToFlag, rootTag) => {
+        var _a;
+        if (itemsToFlag.length === 0) {
+            return (_a = clearNoStateIssueForRoot === null || clearNoStateIssueForRoot === void 0 ? void 0 : clearNoStateIssueForRoot(prevIssues, rootTag)) !== null && _a !== void 0 ? _a : prevIssues;
+        }
+        const newIssues = itemsToFlag
+            .map((viewId) => {
+            const found = prevIssues.find((item) => item.viewId === viewId &&
+                item.rule === 'NO_ACCESSIBILITY_STATE_SET');
+            if (found) {
+                return null;
+            }
+            const issue = {
+                rule: 'NO_ACCESSIBILITY_STATE_SET',
+                viewId,
+            };
+            amaHighlightComponent_1.amaHighlightComponent === null || amaHighlightComponent_1.amaHighlightComponent === void 0 ? void 0 : (0, amaHighlightComponent_1.amaHighlightComponent)(issue);
+            return issue;
+        })
+            .filter((issue) => { var _a; return (_a = nonNullable === null || nonNullable === void 0 ? void 0 : nonNullable(issue)) !== null && _a !== void 0 ? _a : false; });
+        if (newIssues.length === 0) {
+            return prevIssues;
+        }
+        return [...prevIssues, ...newIssues];
+    }
+    : null;
+const clearNoStateIssueForRoot = __DEV__
+    ? (issues, rootTag) => {
+        const issueIndex = issues.findIndex((item) => item.viewId === rootTag && item.rule === 'NO_ACCESSIBILITY_STATE_SET');
+        if (issueIndex < 0) {
+            return issues;
+        }
+        amaClearHighlight_1.amaClearHighlight === null || amaClearHighlight_1.amaClearHighlight === void 0 ? void 0 : (0, amaClearHighlight_1.amaClearHighlight)(issues[issueIndex]);
+        return issues.filter((_, index) => index !== issueIndex);
+    }
+    : null;
+const nonNullable = __DEV__
+    ? (value) => value !== null && value !== undefined
+    : null;

package/dist/internals/utils/amaClearHighlight.d.ts

@@ -0,0 +1,2 @@
+import { AmaError } from '../types';
+export declare const amaClearHighlight: ((issue: AmaError) => void) | null;

package/dist/internals/utils/amaClearHighlight.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.amaClearHighlight = void 0;
+const ReactNativeAmaModule_1 = __importDefault(require("../../ReactNativeAmaModule"));
+exports.amaClearHighlight = __DEV__
+    ? (issue) => {
+        ReactNativeAmaModule_1.default.clearHighlight(issue.viewId);
+    }
+    : null;

package/dist/internals/utils/amaHighlightComponent.d.ts

@@ -0,0 +1,3 @@
+import { HighlightMode } from '../config';
+import { AmaError } from '../types';
+export declare const amaHighlightComponent: ((issues: AmaError | AmaError[], mode?: HighlightMode) => Promise<import("../types").Position | null>) | null;