Some a11y fixes (#534)

* Rename ToolIcon to ToolButton

It makes more semantic sense

* Label and keyboard shortcuts announcement

* Refactor common props for ToolButton

* Better doc outline and form controls

* Adjust color picker

* Styling fixes

Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

src/components/ButtonSelect.tsx

@@ -4,21 +4,28 @@ export function ButtonSelect<T>({
   options,
   value,
   onChange,
+  group,
 }: {
   options: { value: T; text: string }[];
   value: T | null;
   onChange: (value: T) => void;
+  group: string;
 }) {
   return (
     <div className="buttonList">
       {options.map(option => (
-        <button
+        <label
           key={option.text}
-          onClick={() => onChange(option.value)}
           className={value === option.value ? "active" : ""}
         >
+          <input
+            type="radio"
+            name={group}
+            onChange={() => onChange(option.value)}
+            checked={value === option.value ? true : false}
+          />
           {option.text}
-        </button>
+        </label>
       ))}
     </div>
   );