Accessibility
The rules that apply to every component in the system, regardless of project.
Focus A visible
--border-focus ring on every keyboard-reachable element. Never remove outline without replacing it. Semantics A button is a
<button>, a link an <a href>. The system's components are dressed-up elements : carry the native element inside. Modals
role="dialog", aria-modal="true", aria-labelledby on the title. Focus trapped on open, returned to the trigger on close, closable via Escape. Messages Validation and error messages are announced :
aria-live="polite", and aria-describedby linking the field to its message. Color never carries the information alone. Icons Decorative :
aria-hidden="true". Carrying meaning on their own : aria-label on the button, never on the path.