From 1801845ad4345a5c79bc51ec8a959e547229c7ce Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 8 Aug 2024 18:04:25 -0700 Subject: [PATCH 1/3] update getting-started doc --- website/docs/ama/getting-started.md | 42 +++++++++++++++++++---------- 1 file changed, 28 insertions(+), 14 deletions(-) diff --git a/website/docs/ama/getting-started.md b/website/docs/ama/getting-started.md index 47810673..b47930dc 100644 --- a/website/docs/ama/getting-started.md +++ b/website/docs/ama/getting-started.md @@ -6,35 +6,49 @@ sidebar_position: 1 AMA is made of the following packages: -- `react-native-ama` the core components and hooks -- `react-native-ama/animations` to create accessible animations -- `react-native-ama/forms` to create accessible forms -- `react-native-ama/lists` to create accessible lists -- `react-native-ama/react-native` for accessibility-first React Native replacement components +- `@react-native-ama/core`: the core components and hooks, providers and consumers used by AMA packages +- `@react-native-ama/animations`: to create accessible animations +- `@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 + +## Setup + +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. + +Start off by installing `core` and then any other packages you wish to make use of for building an accessible mobile app. + +```bash npm2yarn +npm install @react-native-ama/core +``` ### Config File -If you install the `react-native-ama` package, the ama.rules.json file should be generated automatically. In case it doesn't generate automatically: +When you install the `@react-native-ama/core` package, `the ama.rules.json` file should be generated automatically. If this didn't happen you can run the following from the root of your project: ```bash - -echo "{}" >> ama.rules.json -cd node_modules/react-native-ama -ln -s ../../ama.rules.json . +cd node_modules/@react-native-ama/internal +ln -s ../../../ama.rules.json src/ama.rules.json +ln -s ../../../ama.rules.json dist/ama.rules.json +cd - ``` +See more on configuring AMA rules and severity [here](./config-file.md). + ### Jest When running a test, if jest fails with the following error: -> Cannot find module './../../ama.rules.json' from 'node_modules/react-native-ama/dist/commonjs/internal/logger.js' +> Cannot find module './../../ama.rules.json' from 'node_modules/@react-native-ama/internal/dist/utils/logger.js' -add those lines to the `.jest.config.js` file: +Add the following mock to your jest setup file which can be configured via the `.jest.config.js` or `.jest.config.ts` file (see [setupFilesAfterEnv](https://jestjs.io/docs/configuration#setupfilesafterenv-array)): -```js -jest.mock('react-native-ama/dist/commonjs/internal/logger.js', () => { +```js title="setup-jest.js" +jest.mock('@react-native-ama/internal/dist/utils/logger.js', () => { return { getContrastCheckerMaxDepth: () => 5, + shouldIgnoreContrastCheckForDisabledElement: () => true, }; }); ``` From f4a8c66c117439fa2dc0ecc31d4f3d67cf49a58c Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 8 Aug 2024 18:04:45 -0700 Subject: [PATCH 2/3] fix links in config file to be url links --- website/docs/ama/config-file.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/website/docs/ama/config-file.md b/website/docs/ama/config-file.md index 8c5dbb39..16812a6e 100644 --- a/website/docs/ama/config-file.md +++ b/website/docs/ama/config-file.md @@ -24,21 +24,21 @@ The possible log levels are: ### AMA Rules -| Log key | Guideline | Default | Can override | -| --------------------------------------------------------------------- | ----------- | ------- | ------------ | -| [BOTTOM_SHEET_CLOSE_ACTION](../guidelines/bottomsheet) | | error | | -| [CONTRAST_FAILED](../guidelines/contrast) | | error | | -| [CONTRAST_FAILED_AAA](../guidelines/contrast) | | warn | | -| [FLATLIST_NO_COUNT_IN_SINGULAR_MESSAGE](../guidelines/lists-grids) | | warn | | -| [FLATLIST_NO_COUNT_IN_PLURAL_MESSAGE](../guidelines/lists-grids) | | error | | -| [MINIMUM_SIZE](../guidelines/minimum-size.md) | | error | | -| [NO_ACCESSIBILITY_LABEL](../guidelines/accessibility-label)[^1] | | error | | -| [NO_ACCESSIBILITY_ROLE](../guidelines/accessibility-rol) [^1] | | error | | -| [NO_FORM_LABEL](../guidelines/forms) | | error | | -| [NO_FORM_ERROR](../guidelines/forms) | | error | | -| [NO_KEYBOARD_TRAP](../guidelines/keyboard-trap.md) [^1] | | error | | -| [UPPERCASE_TEXT_NO_ACCESSIBILITY_LABEL](../guidelines/uppercase-text) | | error | | -| [NO_UPPERCASE_TEXT](../guidelines/uppercase-text) | | error | | +| Log key | Guideline | Default | Can override | +| ------------------------------------------------------------------- | ----------- | ------- | ------------ | +| [BOTTOM_SHEET_CLOSE_ACTION](/guidelines/bottomsheet) | | error | | +| [CONTRAST_FAILED](/guidelines/contrast) | | error | | +| [CONTRAST_FAILED_AAA](/guidelines/contrast) | | warn | | +| [FLATLIST_NO_COUNT_IN_SINGULAR_MESSAGE](/guidelines/lists-grids) | | warn | | +| [FLATLIST_NO_COUNT_IN_PLURAL_MESSAGE](/guidelines/lists-grids) | | error | | +| [MINIMUM_SIZE](/guidelines/minimum-size) | | error | | +| [NO_ACCESSIBILITY_LABEL](/guidelines/accessibility-label)[^1] | | error | | +| [NO_ACCESSIBILITY_ROLE](/guidelines/accessibility-rol) [^1] | | error | | +| [NO_FORM_LABEL](/guidelines/forms) | | error | | +| [NO_FORM_ERROR](/guidelines/forms) | | error | | +| [NO_KEYBOARD_TRAP](/guidelines/keyboard-trap) [^1] | | error | | +| [UPPERCASE_TEXT_NO_ACCESSIBILITY_LABEL](/guidelines/uppercase-text) | | error | | +| [NO_UPPERCASE_TEXT](/guidelines/uppercase-text) | | error | | :::note From 4e5ed3767b4047c9ceaeeb333c19c216674f3795 Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 8 Aug 2024 18:08:05 -0700 Subject: [PATCH 3/3] Add explicit sidebar --- website/docs/ama/config-file.md | 4 ++++ website/docs/ama/getting-started.md | 1 + website/docs/ama/intro.md | 1 + website/docs/ama/usage.md | 4 ++++ 4 files changed, 10 insertions(+) diff --git a/website/docs/ama/config-file.md b/website/docs/ama/config-file.md index 16812a6e..3027a4ea 100644 --- a/website/docs/ama/config-file.md +++ b/website/docs/ama/config-file.md @@ -1,3 +1,7 @@ +--- +displayed_sidebar: docs +--- + # Config file AMA comes with predefined rules and severity for the built-in components and hooks. Those rules have been created to improve the accessibility of those elements and should always be respected. diff --git a/website/docs/ama/getting-started.md b/website/docs/ama/getting-started.md index b47930dc..84264219 100644 --- a/website/docs/ama/getting-started.md +++ b/website/docs/ama/getting-started.md @@ -1,5 +1,6 @@ --- sidebar_position: 1 +displayed_sidebar: docs --- # Getting started diff --git a/website/docs/ama/intro.md b/website/docs/ama/intro.md index e771da9e..813cdc1a 100644 --- a/website/docs/ama/intro.md +++ b/website/docs/ama/intro.md @@ -2,6 +2,7 @@ slug: / title: React Native AMA sidebar_position: 0 +displayed_sidebar: docs --- # Accessibility as a First-Class Citizen with React Native AMA diff --git a/website/docs/ama/usage.md b/website/docs/ama/usage.md index 40567c0e..1bdcf781 100644 --- a/website/docs/ama/usage.md +++ b/website/docs/ama/usage.md @@ -1,3 +1,7 @@ +--- +displayed_sidebar: docs +--- + # Usage ## Installation