Resolve IE11 accordion gem doc duplication

[chris-gds]

What?

Updating to use polyfill version for forEach for IE11

Why?

The Accordion on the gem docs was being visually duplicated.

Visual Changes

Before

After

Anything else?

"querySelectorAll() is a method which return a NodeList. And on Internet Explorer, foreach() only works on Array objects. (It works with NodeList with ES6, not supported by IE11)." ref

Related PR

[owenatgov]

LOL whoops 😂 Amazing work debugging this Chris. Would it be possible to add some notes in the PR Why going into more detail about why this was happening and why the fix solves it?

[maxgds]

LOL whoops 😂 Amazing work debugging this Chris. Would it be possible to add some notes in the PR Why going into more detail about why this was happening and why the fix solves it?

Yeah, I'm really puzzled. I have been testing this on browserstack and it looks solid as a fix but I'm baffled if that is the fix as to why the accordions on the live site weren't affected but in the component guide they were. Do you have any insight, Chris?

[chris-gds]

@owenatgov course - I'll update here and in the PR notes.

"querySelectorAll() is a method which return a NodeList. And on Internet Explorer, foreach() only works on Array objects. (It works with NodeList with ES6, not supported by IE11)." ref

Essentially the Design System version had a polyfill in place that was ported over, this just needed to be updated to use it. I remember facing a similar issue with this when initial work started (missed spotting this at review for 1937 🙈)

why the accordions on the live site weren't affected but in the component guide they were.

It's a good question @maxgds the issues flags on this page within IE however the resulting duplication doesn't look present, I would need to spend some time investigating my assumption is the differences in what's loaded on live vs the gem docs.