Skip to content

Rule · Lint

Children repeated for a marquee/loop without aria-hidden or inert on the copies

lint/duplicate-children-not-hiddenwarnvoid lintupdated

Why it matters

Array(repeat).fill(0).map(() =>

{children}
) (Magic UI marquee, Skiper TextRoll) makes screen readers announce the content N times and adds N× tab stops for every link inside. Crawlers also see duplicated text.

How to fix it

Render the first copy normally and mark every duplicate aria-hidden and inert (both: aria-hidden alone leaves focusable links). Add a pause control and stop the animation under prefers-reduced-motion.

Example

tsx
{Array.from({ length: repeat }, (_, i) => (
  <div key={i} aria-hidden={i > 0 || undefined} inert={i > 0 || undefined} className="animate-marquee">
    {children}
  </div>
))}

References

void lint reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.