Siteimprove a11y fixes

[Dananji]

Related issue: #84
Related a11y issue in #83

Changes in this PR:

• add accessible name to ColourSwatchPicker button via aria-label used by both the annotation edit form and the settings modal
• add a label prop to TimePicker and apply aria-label to each of its hour/minute/second <input> fields
• replace useVolumeSlider with a new generalized useSliderA11y module, with a function to patch MUI's Slider a11y in class components (bubble height slider in SettingsPopup) and a custom hook to apply the patch to functional components (VolumeSlider and VolumeSliderCompact)
• cleanup the onChange and onToggle events that were in useVolumeSlider and move them inside each relevant component. The MUI's event handlers are partially working for the keydown events, therefore handle the mouse/touch event handler portion inside the callback functions in respective component
• add a new Inert component that sets native inert DOM attribute on a wrapped sub-tree of components when a modal is open. This makes all interactive elements in the whole sub-tree unfocusable and unclickable, which clears the SiteImprove flags on the background elements being active when a modal is open. AudioImporter and SettingsPopup modal elements are rendered as siblings of <Inert>
• cleanup isModalOpen prop in VariationsAppBar, AudioTransportBar, BubbleEditor, TimelineScrubber, Metadata, and ProjectMetadataDisplay components where, it is only used for disabling buttons/links when the modal is open. Removing isModalOpen in these places is safe because, Inert component blocks focus/click actions on the interactive elements in these components. Other props and variables used in these disabled attribute in these components are left untouched because they don't rely on the modal visibility.

[cjcolvar]

This looks great as far as I can tell by just looking at the code. Nice job refactoring to clean things up and deal with issues in MUI 3!

[cjcolvar]

Tricky!

[cjcolvar]

Good catch!