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>
This commit is contained in:
Guillermo Peralta Scura 2020-01-25 14:52:03 -03:00 committed by Christopher Chedeau
parent 5fd6c4d853
commit 69061e20ac
11 changed files with 177 additions and 107 deletions

View file

@ -3,7 +3,7 @@ import { Action } from "./types";
import { ColorPicker } from "../components/ColorPicker";
import { getDefaultAppState } from "../appState";
import { trash } from "../components/icons";
import { ToolIcon } from "../components/ToolIcon";
import { ToolButton } from "../components/ToolButton";
export const actionChangeViewBackgroundColor: Action = {
name: "changeViewBackgroundColor",
@ -14,6 +14,7 @@ export const actionChangeViewBackgroundColor: Action = {
return (
<div style={{ position: "relative" }}>
<ColorPicker
label="Canvas Background"
type="canvasBackground"
color={appState.viewBackgroundColor}
onChange={color => updateData(color)}
@ -32,7 +33,7 @@ export const actionClearCanvas: Action = {
};
},
PanelComponent: ({ updateData, t }) => (
<ToolIcon
<ToolButton
type="button"
icon={trash}
title={t("buttons.clearReset")}