Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update home docs for next version #231

Merged
merged 3 commits into from
Aug 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 19 additions & 15 deletions website/docs/ama/config-file.md
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -24,21 +28,21 @@ The possible log levels are:

### AMA Rules

| Log key | Guideline | Default | Can override |
| --------------------------------------------------------------------- | ----------- | ------- | ------------ |
| [BOTTOM_SHEET_CLOSE_ACTION](../guidelines/bottomsheet) | <Must /> | error | <Yes /> |
| [CONTRAST_FAILED](../guidelines/contrast) | <Must /> | error | <Yes /> |
| [CONTRAST_FAILED_AAA](../guidelines/contrast) | <Should /> | warn | <Yes /> |
| [FLATLIST_NO_COUNT_IN_SINGULAR_MESSAGE](../guidelines/lists-grids) | <Should /> | warn | <Yes /> |
| [FLATLIST_NO_COUNT_IN_PLURAL_MESSAGE](../guidelines/lists-grids) | <Must /> | error | <Yes /> |
| [MINIMUM_SIZE](../guidelines/minimum-size.md) | <Must /> | error | <Yes /> |
| [NO_ACCESSIBILITY_LABEL](../guidelines/accessibility-label)[^1] | <Must /> | error | <No /> |
| [NO_ACCESSIBILITY_ROLE](../guidelines/accessibility-rol) [^1] | <Must /> | error | <No /> |
| [NO_FORM_LABEL](../guidelines/forms) | <Must /> | error | <Yes /> |
| [NO_FORM_ERROR](../guidelines/forms) | <Must /> | error | <Yes /> |
| [NO_KEYBOARD_TRAP](../guidelines/keyboard-trap.md) [^1] | <MustNot /> | error | <No /> |
| [UPPERCASE_TEXT_NO_ACCESSIBILITY_LABEL](../guidelines/uppercase-text) | <MustNot /> | error | <Yes /> |
| [NO_UPPERCASE_TEXT](../guidelines/uppercase-text) | <MustNot /> | error | <Yes /> |
| Log key | Guideline | Default | Can override |
| ------------------------------------------------------------------- | ----------- | ------- | ------------ |
| [BOTTOM_SHEET_CLOSE_ACTION](/guidelines/bottomsheet) | <Must /> | error | <Yes /> |
| [CONTRAST_FAILED](/guidelines/contrast) | <Must /> | error | <Yes /> |
| [CONTRAST_FAILED_AAA](/guidelines/contrast) | <Should /> | warn | <Yes /> |
| [FLATLIST_NO_COUNT_IN_SINGULAR_MESSAGE](/guidelines/lists-grids) | <Should /> | warn | <Yes /> |
| [FLATLIST_NO_COUNT_IN_PLURAL_MESSAGE](/guidelines/lists-grids) | <Must /> | error | <Yes /> |
| [MINIMUM_SIZE](/guidelines/minimum-size) | <Must /> | error | <Yes /> |
| [NO_ACCESSIBILITY_LABEL](/guidelines/accessibility-label)[^1] | <Must /> | error | <No /> |
| [NO_ACCESSIBILITY_ROLE](/guidelines/accessibility-rol) [^1] | <Must /> | error | <No /> |
| [NO_FORM_LABEL](/guidelines/forms) | <Must /> | error | <Yes /> |
| [NO_FORM_ERROR](/guidelines/forms) | <Must /> | error | <Yes /> |
| [NO_KEYBOARD_TRAP](/guidelines/keyboard-trap) [^1] | <MustNot /> | error | <No /> |
| [UPPERCASE_TEXT_NO_ACCESSIBILITY_LABEL](/guidelines/uppercase-text) | <MustNot /> | error | <Yes /> |
| [NO_UPPERCASE_TEXT](/guidelines/uppercase-text) | <MustNot /> | error | <Yes /> |

:::note

Expand Down
43 changes: 29 additions & 14 deletions website/docs/ama/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,40 +1,55 @@
---
sidebar_position: 1
displayed_sidebar: docs
---

# Getting started

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,
};
});
```
1 change: 1 addition & 0 deletions website/docs/ama/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions website/docs/ama/usage.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
displayed_sidebar: docs
---

# Usage

## Installation
Expand Down
Loading