GanttTimeline [pattern] v1.0.0

A two-pane view with a left task list and a right horizontal timeline of bars representing task duration, dependencies, and progress. Used for project planning where dependencies and overlap matter.

Facts

Label

Gantt Timeline

Problem

Lists hide duration, parallel work, and dependencies. Stakeholders need to see when work happens, how it overlaps, and which tasks block which.

Solution

Show tasks as rows; each row has a left label (task name + dates) and a right bar positioned along a time axis. Dependency arrows connect predecessor end to successor start. Drag bars to reschedule; drag edges to resize.

Structure

    <section aria-label="Project Gantt">
      <header class="gantt-toolbar">
        <h2>Q2 Roadmap</h2>
        <div role="tablist" aria-label="Zoom">
          <button role="tab" aria-selected="false">Day</button>
          <button role="tab" aria-selected="true">Week</button>
          <button role="tab" aria-selected="false">Month</button>
        </div>
      </header>
      <div class="gantt" role="grid" aria-label="Tasks and timeline">
        <div class="gantt-list" role="rowgroup">
          <div role="row">
            <span role="rowheader">Design system v2</span>
            <span class="dates">Apr 1 - Apr 28</span>
          </div>
        </div>
        <div class="gantt-axis" role="row" aria-label="Weeks">
          <span role="columnheader">W14</span>
          <span role="columnheader">W15</span>
          <span role="columnheader">W16</span>
          <span role="columnheader">W17</span>
        </div>
        <div class="gantt-bars" role="rowgroup">
          <div role="row">
            <button
              role="gridcell"
              class="bar"
              aria-label="Design system v2, Apr 1 to Apr 28, 65% complete"
              style="left:0; width:60%"
            >
              <span class="progress" style="width:65%"></span>
              <span class="title">Design system v2</span>
            </button>
          </div>
        </div>
        <svg class="dep-layer" aria-hidden="true"><!-- dependency arrows --></svg>
      </div>
    </section>
  

Uses

• @community/method-heuristic-review

Behavior

• Drag bar body to shift task by N days; drag left edge to move start; drag right edge to extend end.
• Snap to day or week boundary depending on current zoom level.
• Today is marked with a vertical accent line spanning the timeline.
• Hover a bar to highlight its dependency chain (predecessors + successors).
• Zoom levels: Day (column = 1 day), Week (column = 1 week), Month (column = 1 month).
• Keyboard: focus a bar, Arrow Left/Right shifts by one zoom unit; Shift+Arrow resizes.

A11y

• Each bar must have an accessible name including title, start date, end date, and progress percent.
• Dependency arrows are decorative SVG with aria-hidden='true'; convey dependencies in the bar's accessible name or details panel instead.
• Use ARIA grid pattern with role='grid'/role='row'/role='gridcell' for keyboard table semantics.
• Provide a non-drag alternative (date inputs in a side panel) to reschedule tasks for keyboard and screen reader users.
• Today indicator must not rely on color alone — pair with a 'Today' label.

GanttTimeline [pattern] v1.0.0

A two-pane view with a left task list and a right horizontal timeline of bars representing task duration, dependencies, and progress. Used for project planning where dependencies and overlap matter.

Facts

Label

Gantt Timeline

Problem

Lists hide duration, parallel work, and dependencies. Stakeholders need to see when work happens, how it overlaps, and which tasks block which.

Solution

Show tasks as rows; each row has a left label (task name + dates) and a right bar positioned along a time axis. Dependency arrows connect predecessor end to successor start. Drag bars to reschedule; drag edges to resize.

Structure

    <section aria-label="Project Gantt">
      <header class="gantt-toolbar">
        <h2>Q2 Roadmap</h2>
        <div role="tablist" aria-label="Zoom">
          <button role="tab" aria-selected="false">Day</button>
          <button role="tab" aria-selected="true">Week</button>
          <button role="tab" aria-selected="false">Month</button>
        </div>
      </header>
      <div class="gantt" role="grid" aria-label="Tasks and timeline">
        <div class="gantt-list" role="rowgroup">
          <div role="row">
            <span role="rowheader">Design system v2</span>
            <span class="dates">Apr 1 - Apr 28</span>
          </div>
        </div>
        <div class="gantt-axis" role="row" aria-label="Weeks">
          <span role="columnheader">W14</span>
          <span role="columnheader">W15</span>
          <span role="columnheader">W16</span>
          <span role="columnheader">W17</span>
        </div>
        <div class="gantt-bars" role="rowgroup">
          <div role="row">
            <button
              role="gridcell"
              class="bar"
              aria-label="Design system v2, Apr 1 to Apr 28, 65% complete"
              style="left:0; width:60%"
            >
              <span class="progress" style="width:65%"></span>
              <span class="title">Design system v2</span>
            </button>
          </div>
        </div>
        <svg class="dep-layer" aria-hidden="true"><!-- dependency arrows --></svg>
      </div>
    </section>
  

Uses

• @community/method-heuristic-review

Behavior

• Drag bar body to shift task by N days; drag left edge to move start; drag right edge to extend end.
• Snap to day or week boundary depending on current zoom level.
• Today is marked with a vertical accent line spanning the timeline.
• Hover a bar to highlight its dependency chain (predecessors + successors).
• Zoom levels: Day (column = 1 day), Week (column = 1 week), Month (column = 1 month).
• Keyboard: focus a bar, Arrow Left/Right shifts by one zoom unit; Shift+Arrow resizes.

A11y

• Each bar must have an accessible name including title, start date, end date, and progress percent.
• Dependency arrows are decorative SVG with aria-hidden='true'; convey dependencies in the bar's accessible name or details panel instead.
• Use ARIA grid pattern with role='grid'/role='row'/role='gridcell' for keyboard table semantics.
• Provide a non-drag alternative (date inputs in a side panel) to reschedule tasks for keyboard and screen reader users.
• Today indicator must not rely on color alone — pair with a 'Today' label.

Examples

• @community/example-linear-roadmap
• @community/example-asana-timeline

Label

Gantt Timeline

Problem

Lists hide duration, parallel work, and dependencies. Stakeholders need to see when work happens, how it overlaps, and which tasks block which.

Solution

Show tasks as rows; each row has a left label (task name + dates) and a right bar positioned along a time axis. Dependency arrows connect predecessor end to successor start. Drag bars to reschedule; drag edges to resize.

Structure

    <section aria-label="Project Gantt">
      <header class="gantt-toolbar">
        <h2>Q2 Roadmap</h2>
        <div role="tablist" aria-label="Zoom">
          <button role="tab" aria-selected="false">Day</button>
          <button role="tab" aria-selected="true">Week</button>
          <button role="tab" aria-selected="false">Month</button>
        </div>
      </header>
      <div class="gantt" role="grid" aria-label="Tasks and timeline">
        <div class="gantt-list" role="rowgroup">
          <div role="row">
            <span role="rowheader">Design system v2</span>
            <span class="dates">Apr 1 - Apr 28</span>
          </div>
        </div>
        <div class="gantt-axis" role="row" aria-label="Weeks">
          <span role="columnheader">W14</span>
          <span role="columnheader">W15</span>
          <span role="columnheader">W16</span>
          <span role="columnheader">W17</span>
        </div>
        <div class="gantt-bars" role="rowgroup">
          <div role="row">
            <button
              role="gridcell"
              class="bar"
              aria-label="Design system v2, Apr 1 to Apr 28, 65% complete"
              style="left:0; width:60%"
            >
              <span class="progress" style="width:65%"></span>
              <span class="title">Design system v2</span>
            </button>
          </div>
        </div>
        <svg class="dep-layer" aria-hidden="true"><!-- dependency arrows --></svg>
      </div>
    </section>
  

Uses

• @community/method-heuristic-review

Behavior

• Drag bar body to shift task by N days; drag left edge to move start; drag right edge to extend end.
• Snap to day or week boundary depending on current zoom level.
• Today is marked with a vertical accent line spanning the timeline.
• Hover a bar to highlight its dependency chain (predecessors + successors).
• Zoom levels: Day (column = 1 day), Week (column = 1 week), Month (column = 1 month).
• Keyboard: focus a bar, Arrow Left/Right shifts by one zoom unit; Shift+Arrow resizes.

A11y

• Each bar must have an accessible name including title, start date, end date, and progress percent.
• Dependency arrows are decorative SVG with aria-hidden='true'; convey dependencies in the bar's accessible name or details panel instead.
• Use ARIA grid pattern with role='grid'/role='row'/role='gridcell' for keyboard table semantics.
• Provide a non-drag alternative (date inputs in a side panel) to reschedule tasks for keyboard and screen reader users.
• Today indicator must not rely on color alone — pair with a 'Today' label.

Compatible

• @community/pattern-data-table-dense