Handle arrow key events in the accordion component

[Ellie-Brakoniecki]

Also fix problem uncovered by Wave by linking giving the accordion content the id of the aria-controls button

Note: Need to test elements are selected visually as Narrator is intercepting keyboard events.

[Jordan-Hall]

Instead of doing document.query which will grab a single accordant which prevents multiple being used on the same screen const accordRef = useRef(null);

and then in the template use <div ref={accordRef } ...

You can use multiple regs to grab elements so maybe a better idea so you don't have huge clashes :)

Edit:

React.createRef() is the correct way as its a class version https://legacy.reactjs.org/docs/refs-and-the-dom.html

Thanks Jordan for these suggestions - we've made these changes:) Ellie