index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'sha256-fgxmLOznNmVf4GAd24jy5Eiv/Rer+7sVLOBqnsVx0nY='; script-src 'self' 'sha256-cPRnZP+O4z5KsN+vdFstQwgKExGtoN98I3Gq+Tm1aSA='; object-src 'none'; base-uri 'self'; upgrade-insecure-requests;">
  <meta name="referrer" content="no-referrer">
  <title>5ive - UX Sample</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      background-color: #f9fafb;
    }
    .container {
      background: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      text-align: center;
    }
    /* Good UX: Clear focus styles for keyboard users */
    button:focus-visible {
      outline: 2px solid #2563eb;
      outline-offset: 2px;
    }
    .btn {
      background-color: #2563eb;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      border: none;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    .btn:hover {
      background-color: #1d4ed8;
    }
    .btn:active {
      background-color: #1e40af;
    }
    .btn:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
    .spinner {
      display: inline-block;
      width: 1em;
      height: 1em;
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      animation: spin 0.75s linear infinite;
      vertical-align: text-bottom;
      margin-right: 0.5rem;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .feedback {
      margin-top: 1rem;
      min-height: 1.5rem; /* Prevents layout shift */
      color: #15803d; /* green-700, good contrast on white */
      font-weight: 500;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }
    .feedback.visible {
      opacity: 1;
    }
    .success-icon {
      color: #16a34a;
      margin-right: 0.5rem;
      font-size: 1.1rem;
    }
    .close-btn {
      background: transparent;
      border: none;
      color: inherit;
      margin-left: 0.5rem;
      cursor: pointer;
      padding: 0 0.25rem;
      font-size: 1.2rem;
      line-height: 1;
      border-radius: 4px;
    }
    .close-btn:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    .feedback-content {
      display: flex;
      align-items: center;
    }
  </style>
</head>
<body>
  <main class="container">
    <h1>Welcome to 5ive</h1>
    <p>Sample accessible button component:</p>

    <!-- ✅ GOOD UX: Semantic button with proper labeling and focus handling -->
    <button type="button" class="btn" id="action-btn">
      Click Me (Accessible)
    </button>

    <div id="feedback" class="feedback" aria-live="polite"></div>

    <p><small>Try navigating to this button using the 'Tab' key.</small></p>
  </main>

  <script>
    const actionBtn = document.getElementById('action-btn');
    const feedback = document.getElementById('feedback');
    let feedbackTimeout;

    actionBtn.addEventListener('click', () => {
      // Clear any existing timeout
      if (feedbackTimeout) clearTimeout(feedbackTimeout);

      // Reset feedback visual state
      feedback.classList.remove('visible');
      feedback.textContent = '';

      // Set loading state
      // ✅ Sentinel: Avoid innerHTML to prevent XSS
      const originalText = actionBtn.textContent;
      actionBtn.disabled = true;
      actionBtn.setAttribute('aria-busy', 'true');
      actionBtn.textContent = '';

      const spinner = document.createElement('span');
      spinner.className = 'spinner';
      spinner.setAttribute('aria-hidden', 'true');
      actionBtn.appendChild(spinner);
      actionBtn.appendChild(document.createTextNode('Loading...'));

      // Simulate async operation
      setTimeout(() => {
        // Reset state
        actionBtn.disabled = false;
        actionBtn.removeAttribute('aria-busy');
        actionBtn.textContent = originalText;

        // Show success with icon and transition
        // ✅ Sentinel: Using textContent and DOM methods instead of innerHTML
        feedback.textContent = '';

        const content = document.createElement('span');
        content.className = 'feedback-content';

        const icon = document.createElement('span');
        icon.className = 'success-icon';
        icon.setAttribute('aria-hidden', 'true');
        icon.textContent = '✔';
        content.appendChild(icon);
        content.appendChild(document.createTextNode(' Action triggered successfully!'));
        feedback.appendChild(content);

        const closeBtn = document.createElement('button');
        closeBtn.className = 'close-btn';
        closeBtn.setAttribute('aria-label', 'Close notification');
        closeBtn.textContent = '×';
        closeBtn.onclick = () => {
          if (feedbackTimeout) clearTimeout(feedbackTimeout);
          feedback.classList.remove('visible');
          setTimeout(() => {
            if (!feedback.classList.contains('visible')) {
              feedback.textContent = '';
            }
          }, 300);
        };
        feedback.appendChild(closeBtn);

        // Trigger reflow/transition
        requestAnimationFrame(() => {
          feedback.classList.add('visible');
        });

        // Clear message after 5 seconds
        feedbackTimeout = setTimeout(() => {
          feedback.classList.remove('visible');
          // Wait for transition to finish
          setTimeout(() => {
            if (!feedback.classList.contains('visible')) {
              feedback.textContent = '';
            }
          }, 300);
        }, 5000);
      }, 1500);
    });
  </script>
</body>
</html>