Skip to main content

Documentation Index

Fetch the complete documentation index at: https://grantmaster.dev/llms.txt

Use this file to discover all available pages before exploring further.

​
Menus And Modals

​
Adding menu items without re-renders

  • Keep open state local to the menu trigger component, or in the smallest possible scoped context. Do not lift simple dropdown state into layout-level providers.
  • Memoize menu item arrays with useMemo when they depend on permissions, translations, or user state.
  • Memoize handlers with useCallback, especially when they are passed into DropdownMenu, Popover, PageTabs, or widget header controls.
  • Do not create fresh inline arrays or objects inside hot render paths for menu items, shortcut definitions, or route metadata.
  • Prefer Link for plain navigation and use useRoutePrefetch or prefetchRoute for high-frequency destinations.
  • Keep trigger props deterministic: every item should have a stable href, onClick, aria-label, and, for test-critical surfaces, a data-testid.

​
Opening modals through the shared system

  • Use useModalManager() and open a registered modal by id instead of wiring ad hoc useState booleans high in the tree.
  • Register global modal definitions in the feature modals.registry.ts file and let the root ModalRenderer lazy-load the implementation.
  • The app root owns one shared PortalProvider and one shared ModalManagerProvider; new dialogs, dropdowns, and popovers should render through that shared portal root.
  • Use useConfirmDialog() for confirmation flows. It delegates to the shared modal manager and keeps confirm dialogs on the same overlay stack.
  • When a menu item launches a dialog, close the menu first and then call open(...) so focus restoration and ESC behavior stay predictable.

​
Aria and focus standards

  • Menu triggers must expose aria-haspopup="menu" and reflect state with aria-expanded when the primitive supports it.
  • Dialog triggers must expose aria-haspopup="dialog" and the dialog content must include an accessible title and description.
  • Use semantic roles from the shared primitives: DropdownMenu for role="menu" patterns and Dialog or AppModal for role="dialog" patterns.
  • Every icon-only control must have accessible text via aria-label. Do not leave empty text nodes inside interactive controls.
  • Restore focus to the trigger when a menu or modal closes. For ESC handling, close only the active top-most overlay and leave lower layers intact.
  • Keep visible focus rings on all interactive controls. Do not remove focus outlines without replacing them with an equivalent focus-visible treatment.