Accessible modals (#560)

Improve the accessibility of our modals (the color picker and the export dialog)

Implement a focus trap so that tapping through the controls inside them don't escape to outer elements, it also allows to close the modals with the "Escape" key.

src/components/ToolButton.tsx

@@ -25,7 +25,12 @@ type ToolButtonProps =
 
 const DEFAULT_SIZE: ToolIconSize = "m";
 
-export function ToolButton(props: ToolButtonProps) {
+export const ToolButton = React.forwardRef(function(
+  props: ToolButtonProps,
+  ref,
+) {
+  const innerRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => innerRef.current);
   const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`;
 
   if (props.type === "button")
@@ -36,6 +41,7 @@ export function ToolButton(props: ToolButtonProps) {
         aria-label={props["aria-label"]}
         type="button"
         onClick={props.onClick}
+        ref={innerRef}
       >
         <div className="ToolIcon__icon" aria-hidden="true">
           {props.icon}
@@ -55,8 +61,9 @@ export function ToolButton(props: ToolButtonProps) {
         id={props.id}
         onChange={props.onChange}
         checked={props.checked}
+        ref={innerRef}
       />
       <div className="ToolIcon__icon">{props.icon}</div>
     </label>
   );
-}
+});