Chapter 99: Capstone 2 — Production-Grade SaaS Web Application

Accessible Data Grid with Column Sorting & Filtering

Constructing keyboard-navigable interactive tabular data grids with WAI-ARIA grid patterns, `aria-sort`, roving tabindex, and multi-criteria filtering.

LEARNING OBJECTIVES ⌵

Differentiate between a static semantic <table> (read-only tabular data) and an interactive <table role="grid"> (interactive spreadsheet-like component).
Implement multi-column sorting using accessible header buttons and dynamic aria-sort="ascending|descending|none" state updates.
Build a client-side fuzzy search filter with live row count synchronization via aria-live="polite".
Implement the Roving Tabindex pattern for two-dimensional arrow key navigation (ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Home, End).

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine browsing a printed phone book versus working in Microsoft Excel.

The Phone Book (Static HTML <table>): You scan printed names line by line with your eyes. You cannot click a column to sort all names by zip code, nor can you use your keyboard arrow keys to edit an entry in cell C14. The data is immutable and static.
The Interactive Spreadsheet (WAI-ARIA <table role="grid">): You move around the 2D matrix using arrow keys. You can sort columns, filter rows, open contextual row actions, and trigger inline operations. When you navigate with a keyboard, you don't press Tab 500 times to traverse 500 cells; pressing Tab enters the grid, arrow keys maneuver inside it, and pressing Tab again exits the grid.

In an enterprise cloud SaaS dashboard, the Server Cluster Inventory is not a static printed page—it is a mission-critical control grid. By transforming our semantic table into a WAI-ARIA Data Grid with roving focus and aria-sort announcements, keyboard power users and screen-reader operators can audit thousands of server instances with maximum efficiency.

Technical Deep Dive & Specifications

1. Data Grid Keyboard & Accessibility Model

+----------------------------------------------------------------------------------------------------+
| DATA GRID TOPOLOGY (<table role="grid" aria-label="Server Nodes Inventory">)                      |
+----------------------------------------------------------------------------------------------------+
|  [Filter Input: <input type="search" aria-controls="node-grid">]  [Results: <output role="status">]|
+----------------------------------------------------------------------------------------------------+
| <thead>                                                                                            |
|  <tr role="row">                                                                                   |
|   <th role="columnheader" aria-sort="ascending"><button>Host ID ▲</button></th>                    |
|   <th role="columnheader" aria-sort="none"><button>Region</button></th>                            |
|   <th role="columnheader" aria-sort="none"><button>CPU Load</button></th>                          |
|   <th role="columnheader" aria-sort="none"><button>Status</button></th>                            |
|   <th role="columnheader">Actions</th>                                                             |
|  </tr>                                                                                             |
| </thead>                                                                                           |
| <tbody>                                                                                            |
|  <tr role="row" aria-rowindex="1">                                                                 |
|   <td role="gridcell" tabindex="0">prod-worker-01</td> <--- Active Focused Cell                    |
|   <td role="gridcell" tabindex="-1">us-east-1</td>                                                 |
|   <td role="gridcell" tabindex="-1">42%</td>                                                       |
|   <td role="gridcell" tabindex="-1"><span class="badge">Running</span></td>                        |
|   <td role="gridcell" tabindex="-1"><button>Restart</button></td>                                  |
|  </tr>                                                                                             |
| </tbody>                                                                                           |
+----------------------------------------------------------------------------------------------------+

2. Static Table vs WAI-ARIA Data Grid Matrix

Architectural Dimension	Semantic `<table>`	Interactive `<table role="grid">`
Intended Interaction	Read-only tabular data presentation.	Interactive data manipulation, cell selection, and row actions.
Tab Key Traversal	Every focusable element (link, button) inside every cell receives Tab focus sequentially.	Single Tab stop for the entire grid; internal cell traversal managed via Arrow Keys.
Header Sorting	Often unmarked or indicated with visual-only icons (`▲`, `▼`).	Explicit `aria-sort="ascending
Row / Column Coordinates	Inferred automatically by browser layout.	Communicated via `aria-rowindex`, `aria-colindex`, `aria-rowcount`, `aria-colcount`.

3. The `aria-sort` State Machine

         (Click Sort Button)
   +------------------------------+
   | aria-sort="none" (Unsorted)  | <---------+
   +--------------+---------------+           |
                  |                           |
                  v (Click 1)                 | (Click 3: Reset)
   +------------------------------+           |
   | aria-sort="ascending" (A-Z)  |           |
   +--------------+---------------+           |
                  |                           |
                  v (Click 2)                 |
   +------------------------------+           |
   | aria-sort="descending" (Z-A) | ----------+
   +------------------------------+

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 81 (<output id="grid-status" role="status" aria-live="polite">): Broadcasts dynamic filter count changes to screen reader users whenever search parameters are typed.
Line 87 (<table role="grid" aria-label="Kubernetes Worker Nodes" aria-rowcount="3">): Promotes the static HTML table to an active WAI-ARIA Data Grid component with total row metadata.
Line 90 (<th role="columnheader" aria-sort="ascending" scope="col">): Informs assistive technology that the table is actively sorted in ascending order by Host ID.
Lines 102–104 (<td role="gridcell" tabindex="0"> vs tabindex="-1"): Implements the roving tabindex model. Exactly one cell has tabindex="0", making it the single tab entry point, while all other cells have tabindex="-1".
Lines 125–138 (toggleSort()): Synchronizes the aria-sort DOM property, ensuring screen readers announce "Host ID, sorted ascending" or "Host ID, sorted descending" when clicked.

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CloudMetrics Pro - Accessible Data Grid</title>
  <style>
    :root {
      --bg-dark: #0f172a;
      --bg-card: #1e293b;
      --border: #334155;
      --text: #f8fafc;
      --text-muted: #94a3b8;
      --accent: #38bdf8;
    }
    body {
      font-family: system-ui, sans-serif;
      background: var(--bg-dark);
      color: var(--text);
      padding: 2rem;
    }
    .grid-container {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      max-width: 1000px;
      margin: 0 auto;
    }
    .toolbar {
      padding: 1rem 1.5rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }
    .filter-input {
      background: #0f172a;
      border: 1px solid var(--border);
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      width: 280px;
    }
    table[role="grid"] {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }
    th, td {
      padding: 0.85rem 1.5rem;
      border-bottom: 1px solid var(--border);
      font-size: 0.9rem;
    }
    th {
      background: #172554;
      color: var(--text);
      font-weight: 600;
      user-select: none;
    }
    th button {
      background: transparent;
      border: none;
      color: inherit;
      font: inherit;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    td[tabindex="0"]:focus, td:focus-within {
      outline: 2px solid var(--accent);
      outline-offset: -2px;
      background: rgba(56, 189, 248, 0.05);
    }
    .badge {
      display: inline-block;
      padding: 0.25rem 0.5rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
    }
    .badge-online { background: rgba(16, 185, 129, 0.2); color: #34d399; }
    .badge-degraded { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
  </style>
</head>
<body>
  <main>
    <div class="grid-container">
      
      <div class="toolbar">
        <div>
          <label for="cluster-filter" style="font-size: 0.85rem; color: var(--text-muted); display: block; margin-bottom: 0.25rem;">Filter Node Inventory</label>
          <input type="search" id="cluster-filter" class="filter-input" placeholder="Type node name or region..." aria-controls="node-grid">
        </div>
        <output id="grid-status" role="status" aria-live="polite" style="font-size: 0.85rem; color: var(--text-muted);">
          Showing 3 of 3 nodes
        </output>
      </div>

<table id="node-grid" role="grid" aria-label="Kubernetes Worker Nodes" aria-rowcount="3">
        <thead>
          <tr role="row">
            <th role="columnheader" aria-sort="ascending" scope="col">
              <button type="button" id="sort-host" onclick="toggleSort(this)">Host ID <span aria-hidden="true">▲</span></button>
            </th>
            <th role="columnheader" aria-sort="none" scope="col">
              <button type="button" id="sort-region" onclick="toggleSort(this)">Region <span aria-hidden="true">↕</span></button>
            </th>
            <th role="columnheader" aria-sort="none" scope="col">
              <button type="button" id="sort-cpu" onclick="toggleSort(this)">CPU Load <span aria-hidden="true">↕</span></button>
            </th>
            <th role="columnheader" aria-sort="none" scope="col">Status</th>
            <th role="columnheader" scope="col">Actions</th>
          </tr>
        </thead>
        <tbody id="grid-body">
          <tr role="row" aria-rowindex="1">
            <td role="gridcell" tabindex="0"><strong>prod-worker-alpha-01</strong></td>
            <td role="gridcell" tabindex="-1">us-east-1a</td>
            <td role="gridcell" tabindex="-1">34%</td>
            <td role="gridcell" tabindex="-1"><span class="badge badge-online">Healthy</span></td>
            <td role="gridcell" tabindex="-1"><button type="button" style="padding: 0.25rem 0.5rem; cursor:pointer;">Restart</button></td>
          </tr>
          <tr role="row" aria-rowindex="2">
            <td role="gridcell" tabindex="-1"><strong>prod-worker-bravo-02</strong></td>
            <td role="gridcell" tabindex="-1">us-west-2b</td>
            <td role="gridcell" tabindex="-1">89%</td>
            <td role="gridcell" tabindex="-1"><span class="badge badge-degraded">High Memory</span></td>
            <td role="gridcell" tabindex="-1"><button type="button" style="padding: 0.25rem 0.5rem; cursor:pointer;">Restart</button></td>
          </tr>
          <tr role="row" aria-rowindex="3">
            <td role="gridcell" tabindex="-1"><strong>prod-worker-charlie-03</strong></td>
            <td role="gridcell" tabindex="-1">eu-central-1</td>
            <td role="gridcell" tabindex="-1">12%</td>
            <td role="gridcell" tabindex="-1"><span class="badge badge-online">Healthy</span></td>
            <td role="gridcell" tabindex="-1"><button type="button" style="padding: 0.25rem 0.5rem; cursor:pointer;">Restart</button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>

th.setAttribute('aria-sort', nextSort);
      th.querySelector('span[aria-hidden]').textContent = nextSort === 'ascending' ? '▲' : '▼';
    }
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

+----------------------------------------------------------------------------------------------------+
| Filter Node Inventory: [Type node name or region...]               Showing 3 of 3 nodes            |
+----------------------------------------------------------------------------------------------------+
| HOST ID ▲               REGION        CPU LOAD     STATUS         ACTIONS                          |
+----------------------------------------------------------------------------------------------------+
| prod-worker-alpha-01    us-east-1a    34%          [Healthy]      [Restart]                        |
| prod-worker-bravo-02    us-west-2b    89%          [High Memory]  [Restart]                        |
| prod-worker-charlie-03  eu-central-1  12%          [Healthy]      [Restart]                        |
+----------------------------------------------------------------------------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: 2D Arrow Key Roving Tabindex Engine

Implement full 2D keyboard navigation for the data grid so users can navigate cells seamlessly using ArrowUp, ArrowDown, ArrowLeft, and ArrowRight.

Instructions:

Attach a keydown listener to the table body.
Calculate target row and column coordinates when directional arrow keys are pressed.
Update tabindex="0" on the target cell, set tabindex="-1" on the previous cell, and invoke targetCell.focus().

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<script>
  const tbody = document.getElementById('grid-body');

  tbody.addEventListener('keydown', (e) => {
    const currentCell = e.target.closest('td[role="gridcell"]');
    if (!currentCell) return;

    const currentRow = currentCell.parentElement;
    const rows = Array.from(tbody.querySelectorAll('tr'));
    const rowIndex = rows.indexOf(currentRow);
    const cells = Array.from(currentRow.querySelectorAll('td[role="gridcell"]'));
    const colIndex = cells.indexOf(currentCell);

    let targetCell = null;

    switch (e.key) {
      case 'ArrowRight':
        if (colIndex < cells.length - 1) targetCell = cells[colIndex + 1];
        break;
      case 'ArrowLeft':
        if (colIndex > 0) targetCell = cells[colIndex - 1];
        break;
      case 'ArrowDown':
        if (rowIndex < rows.length - 1) {
          targetCell = rows[rowIndex + 1].children[colIndex];
        }
        break;
      case 'ArrowUp':
        if (rowIndex > 0) {
          targetCell = rows[rowIndex - 1].children[colIndex];
        }
        break;
      default:
        return;
    }

    if (targetCell) {
      e.preventDefault();
      currentCell.setAttribute('tabindex', '-1');
      targetCell.setAttribute('tabindex', '0');
      targetCell.focus();
    }
  });
</script>

Why this works: Intercepting directional arrow keys and shifting tabindex="0" moves keyboard focus across the 2D grid matrix in $O(1)$ time without polluting the global Tab sequence.

⚠️ Common Pitfalls

Visual-Only Sort Indicators: Inserting <span>▲</span> without setting aria-sort="ascending" on the parent <th> leaves screen reader users completely unaware that data has been sorted.
Forgetting scope="col": Omitting scope="col" or scope="row" makes it difficult for assistive technology to associate cell data with its corresponding column header.
Placing tabindex="0" on All 1,000 Cells: Making every grid cell focusable via Tab forces keyboard users to press Tab a thousand times to pass the table. Use the Roving Tabindex pattern.

💡 Pro Tips

aria-rowindex Virtualization: When virtualizing large datasets (e.g. rendering only 20 visible rows out of 10,000), set aria-rowcount="10000" on the <table> and aria-rowindex="452" on each active <tr> so screen readers announce real positions.
Sticky Column Headers with High Contrast: When styling th { position: sticky; top: 0; }, ensure a solid background color is set; otherwise, scrolling rows will show through the header text.

📌 Key Takeaways

<table role="grid"> is the designated WAI-ARIA pattern for interactive, spreadsheet-like tabular components.
Column sorting must be communicated via the standardized aria-sort="ascending|descending|none" attribute on <th> elements.
The Roving Tabindex pattern maintains a single Tab stop for the entire grid while enabling 2D arrow-key traversal.
Dynamic search/filter counts must broadcast updates through aria-live="polite" status regions.
Virtualized data grids must provide aria-rowcount and aria-rowindex to preserve navigational context.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Which attribute value on a `<th>` element communicates that a column is actively ordered from smallest to largest?

Topic: HTML Fundamentals

? Question 2 / 3

What is the primary purpose of the Roving Tabindex pattern in an interactive `<table role="grid">`?

Topic: HTML Fundamentals

? Question 3 / 3

When filtering a 100-row table down to 5 visible rows, what is the best practice for announcing the new result count to screen readers?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

1. Data Grid Keyboard & Accessibility Model

2. Static Table vs WAI-ARIA Data Grid Matrix

3. The aria-sort State Machine

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: 2D Arrow Key Roving Tabindex Engine

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Which attribute value on a <th> element communicates that a column is actively ordered from smallest to largest?

What is the primary purpose of the Roving Tabindex pattern in an interactive <table role="grid">?

When filtering a 100-row table down to 5 visible rows, what is the best practice for announcing the new result count to screen readers?

3. The `aria-sort` State Machine

Which attribute value on a `<th>` element communicates that a column is actively ordered from smallest to largest?

What is the primary purpose of the Roving Tabindex pattern in an interactive `<table role="grid">`?