Skip to content

Commit 5b74a7c

Browse files
committed
frontend/aria: get started annotating elements
1 parent 453f8a6 commit 5b74a7c

31 files changed

+2212
-91
lines changed

src/AGENTS.md

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,6 @@ CoCalc is organized as a monorepo with key packages:
158158
- Prefix git commits with the package and general area. e.g. 'frontend/latex: ...' if it concerns latex editor changes in the packages/frontend/... code.
159159
- When pushing a new branch to Github, track it upstream. e.g. `git push --set-upstream origin feature-foo` for branch "feature-foo".
160160

161-
162161
## React-intl / Internationalization (i18n)
163162

164163
CoCalc uses react-intl for internationalization with SimpleLocalize as the translation platform.
@@ -210,6 +209,24 @@ Same flow as above, but **before 3. i18n:upload**, delete the key. Only new keys
210209
- `packages/frontend/i18n/trans/[locale].compiled.json` - compiled translation files for runtime
211210
- `packages/frontend/i18n/index.ts` - exports and locale loading logic
212211

212+
## ARIA Landmarks and Accessibility
213+
214+
The CoCalc frontend should implement ARIA landmarks to enable proper landmark-based navigation for users with assistive technologies (screen readers, keyboard navigation tools, etc.).
215+
216+
**Important**: See [./dev/ARIA.md](./dev/ARIA.md) for comprehensive documentation on:
217+
218+
- What ARIA landmarks are and why they matter
219+
- CoCalc's three-level navigation hierarchy
220+
- How to implement landmarks in React/TSX components
221+
- Best practices and implementation guidelines
222+
223+
Key points:
224+
225+
- Use semantic HTML elements (`<main>`, `<nav>`, `<aside>`, `<footer>`) which automatically create landmarks
226+
- Use `role="region"` with `aria-label` for custom sections (toolbars, symbol panels, etc.)
227+
- Use `aria-label` to distinguish between multiple regions of the same type
228+
- Keep landmarks to 7 or fewer per page for optimal usability
229+
213230
# Ignore
214231

215232
- Ignore files covered by `.gitignore`
@@ -223,4 +240,4 @@ Same flow as above, but **before 3. i18n:upload**, delete the key. Only new keys
223240
- ALWAYS prefer editing an existing file to creating a new one
224241
- REFUSE to modify files when the git repository is on the `master` or `main` branch
225242
- NEVER proactively create documentation files (`*.md`) or README files. Only create documentation files if explicitly requested by the User
226-
- when modifying a file with a copyright banner at the top, make sure to fix/add the current year to indicate the copyright year
243+
- when modifying a file with a copyright banner at the top, make sure to fix/add the current year to indicate the copyright year

0 commit comments

Comments
 (0)