Some animations don't get disabled when browser's reduced motion setting is enabled

[GCHQ-Developer-847]

Summary of the bug

When prefers-reduced-motion: reduce is set, all animations / transitions should be disabled as per the 2.3.3 Animation from Interactions WCAG requirement, but they still happen on some components.

🪜 How to reproduce

For example, on the Accordion component:

1. On Chrome, go to the Accordion page.
2. Open the Chrome DevTools and go to the Rendering tab (press Cmd+Shift+P or Ctrl+Shift+P, and type "Rendering").
3. Scroll to "Emulate CSS media feature prefers-reduced-motion" and select the "reduce" option.
4. Open and close the accordion.
5. See that the sliding up and down animation still happens (it should just immediately open / close).

This also happens on other components:

• Side navigation sliding in and out
• Toast slides / fades in and out
• On components which use ic-horizontal-scroll (tabs, top nav, page header), the items slide along as you click / tab between them. (This responsive behaviour is visible when you have many tabs / items and they don't fit within the screen width).

There are also a few more instances of this but not sure if we want / need to do anything about these:

• Focus indicator on most components fades in and out (used extensively across app, could add scope)
• Loading indicator keeps moving
• Skeleton keeps flashing (note: Exempt, criterion says opacity animations that don't change size of component are not included)

I think there might be more components I've missed so it would be worth checking others (maybe search for transition in CSS files).

🧐 Expected behaviour

Animations should be disabled. E.g. the accordion should immediately switch to the open / close state with no transition.

🚨 Urgency (low, medium or high)

I think this is probably low urgency because it's a Level AAA requirement (so not essential for WCAG conformance).