[eastagiletracker]

This PR proposes accounting for the wrapper's gap in Filler and marking clones aria-hidden="true" (Fixes #4). We include this PR work along with a full history of your repo at https://eastagiletracker.com/projects/991. You can sign in with your GitHub ID to claim ownership of the project.

What changed and why

Filler.getCalcData() measures each item as offsetWidth plus its horizontal margins, so a gap / column-gap on a flex or grid wrapper is left out of itemsWidth. Reeller animates from x: -itemsWidth to 0, so with a gap the cycle is shorter than the real distance between an item and its clone, and the loop jumps by (item count x gap) on every restart. This is the jitter described in #4. The clonesOverflow: false path has the mirror problem: fullWidth is undercounted, so the start position leaves the last element overflowing the container's right edge.

The fix adds a small getGap() that reads column-gap from the wrapper only when it is a flex or grid container (on a block wrapper gap has no layout effect, so it stays 0), adds it to each item's measured width, and exposes it as calcData.gap. Reeller subtracts that one trailing gap in the clonesOverflow: false start position so the content ends flush. Layouts without a gap measure exactly as before. Separately, addClones() now sets aria-hidden="true" on each clone, as #4 also asks, so screen readers announce the content once instead of once per clone; originals are untouched. Two files, 16 additions and 2 deletions.

Reproduction at current dev (2e127e2) and verification

The repo has no test runner, so I verified in headless Chrome against the built UMD bundle (npm run build, then dist/reeller.min.js loaded on a page with three 100px items in a 700px container, Filler/Reeller created with autoUpdate: false). At dev:

flex, gap:20px:          itemsWidth=300 actualPeriod=360   jump=60px   ariaHiddenClones=0
grid, column-gap:12.5px: itemsWidth=300 actualPeriod=337.5 jump=37.5px ariaHiddenClones=0
Reeller loop, gap:20px:  at loop restart (tl.progress(0)) the first clone sits 60px from where item 1 sat at loop end
Reeller clonesOverflow:false, gap:20px: last element ends -120px from the container's right edge

With this branch:

flex, gap:20px:          itemsWidth=360   actualPeriod=360   jump=0px ariaHiddenClones=3
grid, column-gap:12.5px: itemsWidth=337.5 actualPeriod=337.5 jump=0px ariaHiddenClones=4
Reeller loop, gap:20px:  0px (seamless)
Reeller clonesOverflow:false, gap:20px: 0px (flush)

Controls that must not move stayed identical before and after: flex with no gap (itemsWidth=300, 0px jump), inline-block items with margin: 0 10px (itemsWidth=360), a block wrapper with column-gap: 30px (ignored, itemsWidth=300), and clonesOverflow: false with no gap (0px). destroy(true) still removes every clone. actualPeriod is the first clone's left edge minus the first item's left edge, i.e. the distance the loop has to travel to be seamless. npm run lint, npm run prettier and npm run build are green before and after.

How this was managed

This change was tracked as https://eastagiletracker.com/projects/991/stories/1125571 on a board imported from this repo's issues and pull requests (13 stories), https://eastagiletracker.com/projects/991, and used to manage this work.

If you'd rather not receive contributions like this, reply no-more-prs on this pull request and we won't open any further ones on your repositories.

---

Lawrence W. Sinclair
CEO / East Agile
linkedin.com/in/lwsinclair/
eastagile.com