Fix AMA documentation

website/docusaurus.config.ts

@@ -18,6 +18,7 @@ const defaultPresets = {
   admonitions: {
     keywords: ['dev', 'note', 'tip', 'caution', 'danger', 'info', 'warn'],
   },
+  breadcrumbs: true
 };
 
 const config: Config = {
@@ -145,21 +146,6 @@ const config: Config = {
         id: 'guidelines',
         path: 'guidelines',
         routeBasePath: 'guidelines',
-        async sidebarItemsGenerator({
-          defaultSidebarItemsGenerator,
-          numberPrefixParser,
-          item,
-          version,
-          docs,
-          categoriesMetadata,
-          isCategoryIndex,
-        }) {
-          // Example: return an hardcoded list of static sidebar items
-          return [
-            { type: 'doc', id: 'bottomsheet' },
-            { type: 'doc', id: 'bottomsheet' },
-          ];
-        },
         ...defaultPresets,
       },
     ],

website/guidelines/accessibility-label.md

@@ -8,6 +8,8 @@ displayed_sidebar: guidelines
 
 # Accessibility Label
 
+<AMASection />
+
 The [accessibilityLabel](https://reactnative.dev/docs/accessibility#accessibilitylabel) is the text that assistive technology reads when the component is focused and AMA requires it by tappable elements.
 
 ## Expectations

website/guidelines/accessibility-role.md

@@ -8,6 +8,8 @@ displayed_sidebar: guidelines
 
 # Accessibility Role
 
+<AMASection />
+
 The [accessibilityRole](https://reactnative.dev/docs/accessibility#accessibilityrole) is required for all interactive components to communicate their purpose to assistive technology users.
 
 ## Expectations

website/guidelines/accessibility-states.md

@@ -8,6 +8,8 @@ displayed_sidebar: guidelines
 
 # Accessibility States
 
+<AMASection />
+
 Accessibility states are specific attributes that can be added to a component to communicate its current status to assistive technology.
 
 ## aria-busy

website/guidelines/animations.md

@@ -8,6 +8,8 @@ displayed_sidebar: guidelines
 
 # Animations
 
+<AMASection />
+
 Some people might turn off animation on the device because moving content can distract them, or they might be adversely affected by animations or other reasons.
 
 ## Expectations

website/guidelines/bottomsheet.md

@@ -8,6 +8,8 @@ displayed_sidebar: guidelines
 
 # BottomSheet & Drawer
 
+<AMASection />
+
 When dealing with Drawers/BottomSheets, we need to take care of:
 
 1. Check if animations are enabled

website/guidelines/carousel.md

@@ -8,6 +8,8 @@ displayed_sidebar: guidelines
 
 # Carousel
 
+<AMASection />
+
 When implementing a Carousel, it's essential to ensure that users can easily navigate through its items.
 
 ## Expectations

website/guidelines/contrast.md

@@ -8,6 +8,8 @@ displayed_sidebar: guidelines
 
 # Contrast
 
+<AMASection />
+
 Contrast refers to the difference in luminance or colour that makes an object (or its representation in an image or display) distinguishable from its surroundings.
 
 ## Expectations

website/guidelines/focus.md

@@ -8,6 +8,7 @@ displayed_sidebar: guidelines
 
 # Focus
 
+<AMASection />
 <AssistiveTechnology name="Assistive Technologies" title="Screen Reader, Keyboard and Switch" />
 
 It's crucial to ensure screen readers and other assistive technologies can navigate your app in a logical order, making sure that content is separate with meaningful titles.

website/guidelines/forms.md

@@ -11,6 +11,7 @@ import NextKeyKeyboard from './next-key.jpg';
 
 # Forms
 
+<AMASection />
 <AssistiveTechnology name="Assistive Technologies" title="Screen Reader, Keyboard and Switch" />
 
 ## Labels

website/guidelines/headers.md

@@ -10,6 +10,8 @@ import AndroidListFeature from './android-list-feature.gif';
 
 # Headers
 
+<AMASection />
+
 Headers are crucial in organizing and structuring content in a mobile app. They provide a clear hierarchy, guiding users through the content and making it more accessible and understandable.
 In React Native, any text element can be designated as a header by assigning the [accessibilityRole](/guidelines/accessibility-role) property to "header".
 

website/guidelines/lists-grids.md

@@ -9,6 +9,7 @@ displayed_sidebar: guidelines
 
 ## Filtering
 
+<AMASection />
 <Serious label padding />
 
 When a list changes because of something the user does, like typing in a search box or clicking a filter button, the screen reader should tell the user how many items are now showing.

website/guidelines/minimum-size.md

@@ -7,6 +7,7 @@ displayed_sidebar: guidelines
 
 # Minimum Size
 
+<AMASection />
 AMA performs a minimum size check for tappable elements like Pressable, Button, etc. The expected minimum size is:
 
 - [44x44px on iOS](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/)

website/guidelines/text.md

@@ -8,6 +8,8 @@ displayed_sidebar: guidelines
 
 # Text
 
+<AMASection />
+
 The text in our app must be clear and easy for everyone to read.
 While this may seem obvious, sometimes, design choices can unintentionally make it harder for some people, especially those with disabilities, to understand the content. We must be mindful of this when making design decisions.
 

website/guidelines/timed-actions.md

@@ -8,6 +8,8 @@ displayed_sidebar: guidelines
 
 # Timed actions
 
+<AMASection />
+
 Timed actions refer to tasks or functions within an app that are set to occur after a specific duration or at particular intervals.
 When implementing timed actions, it's essential to take into account the following considerations to ensure accessibility and a positive user experience:
 

website/sidebars.ts

@@ -17,7 +17,7 @@ function autoGenerate(path: string) {
 
   return files
     .map((file: string) => {
-      if (!file.endsWith('.md')) {
+      if (!file.endsWith('.md') || file === 'index.md') {
         return null;
       }
 

website/src/components/AMASection.jsx

@@ -0,0 +1,90 @@
+import { useDoc } from '@docusaurus/theme-common/internal';
+import React from 'react';
+
+import { Severity } from './index';
+
+const AMA_WHAT = {
+  ama_severity: 'Severity',
+  ama_category: 'Accessibility Principle',
+  ama_affected_users: 'Affected users',
+  ama_success_criterion: 'Success criterion',
+};
+
+const PRINCIPLES = {
+  Perceivable: '../guidelines/pour#perceivable',
+  Operable: '../guidelines/pour#operable',
+  Understandable: '../guidelines/pour#understandable',
+  Robust: '../guidelines/pour#robust',
+};
+
+const AFFECTED_USERS = {
+  Motor: '../guidelines/type-of-accessibility-issues#motormobility',
+  Mobility: '../guidelines/type-of-accessibility-issues#motormobility',
+};
+
+export const AMASection = ({ className }) => {
+  const { frontMatter } = useDoc();
+
+  return (
+    <>
+      <table className={className ?? 'ama-mobile-section'}>
+        <tbody>
+          {Object.entries(AMA_WHAT).map(([key, label]) => {
+            let value = frontMatter[key];
+
+            if (key === 'ama_severity') {
+              value = <Severity level={value || ''} />;
+            } else if (key === 'ama_success_criterion' && value) {
+              const [sc, link] = value.split('@');
+
+              value = (
+                <a href={link} title={`Success criterion ${sc}`}>
+                  {sc}
+                </a>
+              );
+            } else if (key === 'ama_category') {
+              const link = PRINCIPLES[value];
+
+              value = link ? <a href={link}>{value}</a> : null;
+            } else if (key === 'ama_affected_users') {
+              value = <AffectedUsers users={value.split(',')} />;
+            }
+
+            return value ? (
+              <tr style={{ padding: 0 }} key={key}>
+                <th>{label}</th>
+                <td>{value}</td>
+              </tr>
+            ) : null;
+          })}
+        </tbody>
+      </table>
+      <div className="ama-separator" />
+    </>
+  );
+};
+
+const AffectedUsers = ({ users }) => {
+  const total = users.length - 1;
+
+  return (
+    <>
+      {users.map((user, index) => {
+        const link =
+          AFFECTED_USERS[user.trim()] ||
+          `../guidelines/type-of-accessibility-issues#${user.toLowerCase()}`;
+
+        return link ? (
+          <React.Fragment key={link}>
+            <a href={link} key={user}>
+              {user}
+            </a>
+            {index < total ? ', ' : null}
+          </React.Fragment>
+        ) : (
+          user
+        );
+      })}
+    </>
+  );
+};

website/src/components/devOnly.jsx

@@ -13,7 +13,7 @@ export const DevOnly = props => {
   );
 };
 
-export const DevOnlyChecks = props => {
+export const DevOnlyChecks = () => {
   return (
     <Admonition type="dev">
       Runtime checks are only performed when <code>__DEV__</code> is set to{' '}

website/src/components/index.js

@@ -5,3 +5,4 @@ export * from './required';
 export * from './platforms';
 export * from './feature';
 export * from './padding';
+export * from './AMASection';