Accessible Data Table Pattern

<!-- Scroll wrapper for responsive tables -->
<div class="table-wrapper" role="region" aria-label="Team members" tabindex="0">

  <table>
    <!-- Caption: announced when entering the table -->
    <caption>Team Members</caption>

    <thead>
      <tr>
        <!-- Sortable column: button inside th, aria-sort on th -->
        <th scope="col" aria-sort="none">
          <button type="button" class="sort-btn"
                  data-sort-key="name">
            Name
            <svg class="sort-icon" aria-hidden="true">...</svg>
          </button>
        </th>

        <!-- Non-sortable columns -->
        <th scope="col">Role</th>
        <th scope="col">Department</th>

        <!-- Sortable column -->
        <th scope="col" aria-sort="none">
          <button type="button" class="sort-btn"
                  data-sort-key="startDate">
            Start Date
            <svg class="sort-icon" aria-hidden="true">...</svg>
          </button>
        </th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Alice Johnson</td>
        <td>Senior Engineer</td>
        <td>Engineering</td>
        <td>2019-03-15</td>
      </tr>
      <!-- More rows... -->
    </tbody>
  </table>

  <!-- Live region for sort announcements -->
  <div class="sr-only" aria-live="polite"
       id="sort-announcement"></div>

</div>

/* Responsive horizontal scroll wrapper */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

caption {
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  font-size: 1rem;
  text-align: left;
  border-bottom: 1px solid #d1d5db;
}

th {
  padding: 0.5rem 1.5rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  border-bottom: 2px solid #d1d5db;
  white-space: nowrap;
}

td {
  padding: 0.5rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

/* Hover row highlight */
tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* Sort button: fills the entire th */
.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* SC 2.5.8: minimum 24x24 target */
  min-height: 2.75rem;
  width: 100%;
}

.sort-btn:hover {
  color: #5b2a86;
}

/* SC 2.4.13: focus indicator with 3:1 contrast */
.sort-btn:focus-visible {
  outline: 2px solid #5b2a86;
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* Sort icon: chevron rotates for direction */
.sort-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
  opacity: 0.4;
  flex-shrink: 0;
}

/* Active sort direction indicators */
[aria-sort="ascending"] .sort-icon,
[aria-sort="descending"] .sort-icon {
  opacity: 1;
}

[aria-sort="descending"] .sort-icon {
  transform: rotate(180deg);
}

/* Sticky header option */
thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}

/* Visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sort-icon {
    transition: none;
  }
}

function initSortableTable(tableWrapper) {
  const table = tableWrapper.querySelector('table');
  const tbody = table.querySelector('tbody');
  const announcement = tableWrapper.querySelector(
    '[aria-live="polite"]'
  );
  const sortButtons = table.querySelectorAll('.sort-btn');

  sortButtons.forEach(button => {
    button.addEventListener('click', () => {
      const th = button.closest('th');
      const key = button.dataset.sortKey;
      const colIndex = Array.from(
        th.parentElement.children
      ).indexOf(th);

      // Determine new sort direction
      const currentSort = th.getAttribute('aria-sort');
      const newSort = currentSort === 'ascending'
        ? 'descending'
        : 'ascending';

      // Reset all sortable columns to "none"
      table.querySelectorAll('th[aria-sort]')
        .forEach(col => {
          col.setAttribute('aria-sort', 'none');
        });

      // Set new sort direction on this column
      th.setAttribute('aria-sort', newSort);

      // Sort the rows
      const rows = Array.from(tbody.querySelectorAll('tr'));
      rows.sort((a, b) => {
        const aVal = a.children[colIndex].textContent.trim();
        const bVal = b.children[colIndex].textContent.trim();

        // Check if values are dates (YYYY-MM-DD)
        const aDate = Date.parse(aVal);
        const bDate = Date.parse(bVal);
        if (!isNaN(aDate) && !isNaN(bDate)) {
          return newSort === 'ascending'
            ? aDate - bDate
            : bDate - aDate;
        }

        // String comparison
        const compare = aVal.localeCompare(bVal);
        return newSort === 'ascending'
          ? compare
          : -compare;
      });

      // Re-render tbody
      rows.forEach(row => tbody.appendChild(row));

      // Announce sort change via live region
      const colName = button.textContent.trim();
      announcement.textContent =
        `Sorted by ${colName}, ${newSort}`;
    });
  });
}

// Initialize all sortable tables
document.querySelectorAll('.table-wrapper')
  .forEach(initSortableTable);