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

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

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

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

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

Relations

related: [@community/pattern-data-table-dense, @community/rule-keyboard-accessible, @community/check-heading-hierarchy, @community/rule-keyboard-tab-order, @community/anti-pattern-color-only-meaning, @community/check-focus-visible] compatible: [@community/pattern-data-table-dense]

Label

Gantt Timeline

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

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