Senior Frontend Practices

Production-quality frontend development standards.

Instructions

1. Accessibility (a11y)

// ✅ Semantic HTML
<button type="button">Click me</button>  // Not <div onClick>
<nav aria-label="Main navigation">...</nav>
<main role="main">...</main>

// ✅ ARIA labels
<button aria-label="Close modal" onClick={onClose}>
  <XIcon />
</button>

// ✅ Focus management
<input 
  ref={inputRef}
  aria-describedby="email-error"
/>
{error && <span id="email-error" role="alert">{error}</span>}

2. Keyboard Navigation

// ✅ Handle keyboard events
function Modal({ onClose }) {
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    document.addEventListener('keydown', handleEscape);
    return () => document.removeEventListener('keydown', handleEscape);
  }, [onClose]);
}

// ✅ Focus trap
<FocusTrap>
  <div role="dialog" aria-modal="true">
    ...
  </div>
</FocusTrap>

3. Responsive Design

/* Mobile-first approach */
.container {
  padding: 1rem;
}

@media (min-width: 640px) {
  .container { padding: 1.5rem; }
}

@media (min-width: 1024px) {
  .container { padding: 2rem; }
}

// ✅ Responsive component
function ResponsiveLayout() {
  return (
    <div className="flex flex-col lg:flex-row gap-4">
      <aside className="w-full lg:w-64">Sidebar</aside>
      <main className="flex-1">Content</main>
    </div>
  );
}

4. Micro-interactions

// ✅ Button feedback
<button className="
  transition-all duration-200
  hover:scale-105 hover:shadow-lg
  active:scale-95
  focus:ring-2 focus:ring-offset-2
">
  Submit
</button>

// ✅ Loading states
<button disabled={isLoading}>
  {isLoading ? <Spinner /> : 'Submit'}
</button>

5. Error States

// ✅ User-friendly error messages
function FormField({ error }) {
  return (
    <div>
      <input 
        aria-invalid={!!error}
        className={error ? 'border-red-500' : 'border-gray-300'}
      />
      {error && (
        <p className="text-red-500 text-sm mt-1" role="alert">
          {error}
        </p>
      )}
    </div>
  );
}

6. Code Quality Checklist

Before submitting code:

• Semantic HTML used
• ARIA labels on interactive elements
• Keyboard navigation works
• Mobile responsive
• Loading states implemented
• Error states handled
• Focus visible on all interactive elements
• Color contrast passes WCAG AA

References

• WCAG Guidelines
• React Accessibility