[Keyboard A11y] Trap keyboard focus within modals

[Dananji]

Description

In the accessibility audit performed in # the following issue was found in relation to keyboard accessibility within timeliner modals;

does not trap keyboard focus within a modal (saving, settings modals), once keyboard reaches the last focus-able element within the modal, the next Tab key-press moves the focus to the links in the footer of the page.

Further notes from Emily in the ticket avalonmediasystem/avalon#6314 (comment):

For the settings modal and the save modal, I do think we should trap the keyboard as the user really can't interact with the rest of the page unless the modal is closed. I also think it's an issue that you can't access the color palette options in the Settings modal via keyboard.

Done Looks Like

• Traps keyboard focus within settings and save modals when they are opened
• When the modal is closed keyboard focus is returned to the previously focused element on the page prior to opening the modal

[joncameron]

Material UI could be introducing unusual behaviors or complicating things with the way it interacts with the DOM.