MagentaA11y Accessibility Reference

Single source of truth for accessibility acceptance criteria across Web and Native platforms.

Auto-Initialize

Before reading any component files, check if the repo/ folder exists in this skill directory. If it doesn't exist, run the setup script:

cd .cursor/skills/magentaa11y && ./setup.sh

This clones the MagentaA11y repository. Only needs to run once.

Updating Content

To pull the latest MagentaA11y documentation:

cd .cursor/skills/magentaa11y/repo && git pull

Note: No build step is required. The skill reads the raw markdown source files directly.

Data Source

Component documentation is located in the submodule at:

repo/public/content/documentation/
├── how-to-test/type/       # Testing guidance by issue type
├── native/                  # Native (iOS/Android) components
│   ├── controls/           # button, checkbox, toggle-switch, etc.
│   ├── notifications/      # alert-dialog, modal, snackbar-toast
│   └── patterns/           # animation, headings, focus, etc.
└── web/                     # Web components
    ├── component/          # button, checkbox, link, modal, tabs, etc.
    └── page-level/         # header, footer, main, navigation, form, etc.

How to Use

When a user asks for component accessibility criteria:

1. Identify the platform: Web or Native (iOS/Android)
2. Identify the component: button, checkbox, modal, link, etc.
3. Find the file: Use grep_search for the component name, or go directly to the file path

Search Process

1. Use grep_search to find the component file (e.g., search for button.md)
2. Read the markdown file directly from the appropriate path
3. Return the relevant section (Gherkin, Condensed, Developer Notes, etc.)

Direct File Paths

Example Queries

Available Components

Web - Components

alert-notification, animation, autocomplete, breadcrumbs, button, carousel-slideshow, checkbox, complex-graphics, date-picker, decorative-image, expander-accordion, figure, footnote, heading, help-hint-error, iframe, informative-image, link, list, modal-dialog, number-input, pagination-nav, password-input, progress-indicator, radio-button, range-slider, scrolling-container, search, select-dropdown, separator-horizontal-rule, star-rating, stepper-input, sticky-element, strikethrough-content, table, tabs, text-input, textarea-multiline-input, tidbit, toast-snackbar, toggle-switch, tooltip, video-audio-player

Web - Page Level

basic-web-page, footer-landmark, form, header-landmark, main-landmark, navigation-landmark, single-page-application, skip-link

Native - Controls

button, calendar-date-picker, captcha, carousel, checkbox, chip, date-time-picker, dropdown, expandable, link, menu, pagination-control, progress-indicator, radio-button, reorder-data-row, search, segmented-control, sheet, sidebar-menu, slider, step-indicator, stepper, table-row-button, text-input, time-picker, timer, toggle-switch

Native - Notifications

alert-dialog, modal, snackbar-toast

Native - Patterns

animation, field-errors, focus, graphics-visual-elements, headings, image-decorative, loading-icon, loading-spinner, strike-through, table, tidbit, webview

How to Test

color-contrast, forms-&-inputs, images, keyboard-&-focus, links-&-buttons, native-apps, not-sure-if-it-is-an-issue, web-screen-readers