[WIP] Native checks

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  extends: ['@react-native'],
+  extends: ['@react-native', 'plugin:jest/recommended'],
   plugins: ['jest', 'import'],
   env: {
     browser: true,
@@ -9,6 +9,7 @@ module.exports = {
   rules: {
     '@typescript-eslint/no-unused-vars': 'off',
     'react-hooks/rules-of-hooks': 'off',
+    '@typescript-eslint/func-call-spacing': 'off',
   },
   parserOptions: {
     project: ['./tsconfig.json'],

.gitattributes

@@ -1 +1,3 @@
 *.excalidraw filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -47,3 +47,9 @@ coverage
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+example/.yarn
+playground/.yarn/cache/
+playground/android
+playground/ios
+
+.java-version

.nvmrc

@@ -1 +1 @@
-v16
+v24.0.0

README.md

@@ -6,21 +6,39 @@
 
 [![github][github-image]][github-url] [![npm][npm-image]][npm-url] [![docs][docs-image]][docs-url] [![Maintenance Status][maintenance-image]](#maintenance-status)
 
-A.M.A. stands for **A**ccessible **M**obile **A**pp and is react native library that aim offers the best accessibility tooling experience and guides to guide you through accessibility best practices while you code your app.
-That's why we created A.M.A., a set of components and hooks designed to enforce minimum accessibility requirements.
-This is combined with extensive [guidelines](https://commerce.nearform.com/open-source/react-native-ama/guidelines/) to help you understand how accessibility should work when manually testing your app. Finally we have provided a [checklist](https://commerce.nearform.com/open-source/react-native-ama/checklist/) which condenses these guidelines, explaining their intended functionality against specific features or components.
+**A.M.A.** stands for **A**ccessible **M**obile **A**pp and is a React Native library that offers the best accessibility tooling experience as well as expert guides to support you with accessibility best practices while developing your app.
 
-While in development AMA also provides run time accessibility checks against components
+The library consists of
 
-#### Example of AMA checks performed in development:
+1. Runtime checks that help you catch common accessibility issues during development.
+2. A set of popular components that are designed with accessibility in mind.
+2. Extensive [guidelines](https://commerce.nearform.com/open-source/react-native-ama/guidelines/) to help you understand how accessibility should work when manually testing your app.
+3. A [checklist](https://commerce.nearform.com/open-source/react-native-ama/checklist/) which condenses these guidelines, explaining their intended functionality against specific features or components.
 
-<img alt="Example of runtime failure detected by AMA" src="https://github.com/FormidableLabs/react-native-ama/blob/main/website/docs/ama/ama-demo.png?raw=true" height=700 />
+**AMA** consists of a family of packages under the npm `@react-native-ama` namespace.
+These packages are designed to work independently, allowing you to pick and choose the ones that suit your needs.
+This modular approach enables developers to create a tailored experience for their applications without the overhead of unnecessary dependencies.
 
-> [!NOTE]  
-> This is an example of a runtime failure detected by AMA with additional information and links to guidelines provided in the console.
+## Runtime Dev Tooling (Accessibility Checks)
 
-**Example of additional console info**:
-<img alt="Example of console warning by AMA" src="https://github.com/FormidableLabs/react-native-ama/blob/main/website/docs/ama-console-error.png?raw=true" width=550 />
+Adopting an "accessibility-first" approach is the best way to ensure that digital experiences are inclusive for everyone. By prioritizing accessibility in the early stages of code development, you avoid having to later apply retroactive fixes which can be very time-consuming, expensive and difficult.
+
+### How it works
+
+When you wrap your application with the AMAProvider from the [@react-native-ama/core](/core/) package, AMA begins scanning your UI for accessibility (a11y) issues as the app is running.
+
+If any issues are found at the end of a scan, AMA will:
+
+- Highlight the offending component directly on the screen.
+- Print a detailed report of the issue to the console.
+- Display a summary of the total number of errors and warnings detected.
+
+You can use the built-in developer UI to get more information about the issues affecting each component.
+As you modify your code to fix them, AMA reacts to the changes and removes the issues from the report in real-time.
+
+| Real Time scanning | AMA in-app info |
+|---------|-------------|
+| ![AMA flags multiple accessibility issues in real time, including missing roles and contrast failures, and visually marks each element with severity indicators to guide developers toward immediate fixes.](/img/ama-checks.png) | ![AMA’s real-time accessibility checker detecting a missing role on a pressable element, with detailed guidance, severity level, and direct links to related guidelines.](/img/ama-issue.png) |
 
 ## Getting started
 
@@ -31,7 +49,7 @@ AMA is made of the following packages:
 - `@react-native-ama/react-native`: for accessibility-first React Native replacement components
 - `@react-native-ama/forms`: to create accessible forms
 - `@react-native-ama/lists`: to create accessible lists
-- `@react-native-ama/extras`: extra compound components and hooks beyond the scope of the base React Native components for building accessible react native apps
+- `@react-native-ama/bottom-sheet`: to create accessible bottom sheets
 
 The `core` package, is the minimum installable setup for AMA to function. This package contains the AMA context provider and consumer as well various other hooks and utilities for focusing, WCAG checks, accessibility tree management, etc.
 
@@ -49,7 +67,7 @@ yarn add @react-native-ama/core
 npm install @react-native-ama/core
 ```
 
-**2. Wrap App in `<AMAProvider>`**
+**2. Wrap the App in `<AMAProvider>`**
 
 ```jsx {2-4,6,8-9}
 import { AMAProvider } from '@react-native-ama/core';
@@ -63,6 +81,12 @@ export const App = () => {
 };
 ```
 
+### Playground
+
+You can use the playground app within this repository to see how AMA checks work in practice.
+The playground can also be used to learn how to fix accessibility issues in your app.
+
+
 ## 📃 [Documentation](https://commerce.nearform.com/open-source/react-native-ama)
 
 The documentation contains everything you need to know about `@react-native-ama/...`. It contains several sections in order of importance when you first get started:

ama.config.json

@@ -0,0 +1,6 @@
+{
+  "rules": {},
+  "accessibilityLabelExceptions": [],
+  "highlight": "border"
+}
+

babel.base.js

@@ -1,41 +1,36 @@
-// eslint-disable-next-line
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
-  plugins: [
-    [
-      'module-resolver',
-      {
-        root: './',
-        extensions: [
-          '.ios.ts',
-          '.android.ts',
-          '.ts',
-          '.ios.tsx',
-          '.android.tsx',
-          '.tsx',
-          '.jsx',
-          '.js',
-          '.json',
-          'jpg',
-          'jpeg',
-        ],
-        alias: {
-          '@react-native-ama/core/src': `${__dirname}/packages/core/src`,
-          '@react-native-ama/core': `${__dirname}/packages/core/src`,
-          '@react-native-ama/internal/src': `${__dirname}/packages/internal/src`,
-          '@react-native-ama/internal': `${__dirname}/packages/internal/src`,
-          '@react-native-ama/animations/src': `${__dirname}/packages/animations/src`,
-          '@react-native-ama/animations': `${__dirname}/packages/animations/src`,
-          '@react-native-ama/extras/src': `${__dirname}/packages/extras/src`,
-          '@react-native-ama/extras': `${__dirname}/packages/extras/src`,
-          '@react-native-ama/lists/src': `${__dirname}/packages/lists/src`,
-          '@react-native-ama/lists': `${__dirname}/packages/lists/src`,
-          '@react-native-ama/react-native/src': `${__dirname}/packages/react-native/src`,
-          '@react-native-ama/react-native': `${__dirname}/packages/react-native/src`,
-          '@react-native-ama/internal/src': `${__dirname}/packages/internal/src`,
-          '@react-native-ama/internal': `${__dirname}/packages/internal/src`,
-        },
-      },
-    ],
-  ],
+	presets: ['module:metro-react-native-babel-preset'],
+	plugins: [
+		[
+			'module-resolver',
+			{
+				root: './',
+				extensions: [
+					'.ios.ts',
+					'.android.ts',
+					'.ts',
+					'.ios.tsx',
+					'.android.tsx',
+					'.tsx',
+					'.jsx',
+					'.js',
+					'.json',
+					'jpg',
+					'jpeg',
+				],
+				alias: {
+					'@react-native-ama/core/src': `${__dirname}/packages/core/src`,
+					'@react-native-ama/core': `${__dirname}/packages/core/src`,
+					'@react-native-ama/animations/src': `${__dirname}/packages/animations/src`,
+					'@react-native-ama/animations': `${__dirname}/packages/animations/src`,
+					'@react-native-ama/bottom-sheet/src': `${__dirname}/packages/bottom-sheet/src`,
+					'@react-native-ama/bottom-sheet': `${__dirname}/packages/bottom-sheet/src`,
+					'@react-native-ama/lists/src': `${__dirname}/packages/lists/src`,
+					'@react-native-ama/lists': `${__dirname}/packages/lists/src`,
+					'@react-native-ama/react-native/src': `${__dirname}/packages/react-native/src`,
+					'@react-native-ama/react-native': `${__dirname}/packages/react-native/src`,
+				},
+			},
+		],
+	],
 };