Salesforce Component Quality Standards

Apply these checks to every LWC, Aura component, and Visualforce page you write or review.

Section 1 — LWC Quality Standards

1.1 Data Access Pattern Selection

Choose the right data access pattern before writing JavaScript controller code:

1.2 Security Rules

1.3 SLDS 2 and Styling Standards

• Never hardcode colours: color: #FF3366 → use color: var(--slds-c-button-brand-color-background) or a semantic SLDS token.
• Never override SLDS classes with !important — compose with custom CSS properties.
• Use <lightning-*> base components wherever they exist: lightning-button, lightning-input, lightning-datatable, lightning-card, etc.
• Base components include built-in SLDS 2, dark mode, and accessibility — avoid reimplementing their behaviour.
• If using custom CSS, test in both light mode and dark mode before declaring done.

1.4 Accessibility Requirements (WCAG 2.1 AA)

Every LWC component must pass all of these before it is considered done:

• All form inputs have <label> or aria-label — never use placeholder as the only label
• All icon-only buttons have alternative-text or aria-label describing the action
• All interactive elements are reachable and operable by keyboard (Tab, Enter, Space, Escape)
• Colour is not the only means of conveying status — pair with text, icon, or aria-* attributes
• Error messages are associated with their input via aria-describedby
• Focus management is correct in modals — focus moves into the modal on open and back on close

1.5 Component Communication Rules

For Flow screen components:

• Events that need to reach the Flow runtime must set bubbles: true and composed: true.
• Expose @api value for two-way binding with the Flow variable.

1.6 JavaScript Performance Rules

• No side effects in connectedCallback: it runs on every DOM attach — avoid DML, heavy computation, or rendering state mutations here.
• Guard renderedCallback: always use a boolean guard to prevent infinite render loops.
• Avoid reactive property traps: setting a reactive property inside renderedCallback causes a re-render — use it only when necessary and guarded.
• Do not store large datasets in component state — paginate or stream large results instead.

1.7 Jest Test Requirements

Every component that handles user interaction or retrieves Apex data must have a Jest test:

// Minimum test coverage expectations

…