smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Some a11y fixes (#534)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

47
src/actions/actionProperties.tsx
View file

@ -47,9 +47,10 @@ export const actionChangeStrokeColor: Action = {
},
PanelComponent: ({ elements, appState, updateData, t }) => (
<>
<h5>{t("labels.stroke")}</h5>
<h3 aria-hidden="true">{t("labels.stroke")}</h3>
<ColorPicker
type="elementStroke"
label={t("labels.stroke")}
color={getFormValue(
appState.editingElement,
elements,
@ -76,9 +77,10 @@ export const actionChangeBackgroundColor: Action = {
},
PanelComponent: ({ elements, appState, updateData, t }) => (
<>
<h5>{t("labels.background")}</h5>
<h3 aria-hidden="true">{t("labels.background")}</h3>
<ColorPicker
type="elementBackground"
label={t("labels.background")}
color={getFormValue(
appState.editingElement,
elements,
@ -103,14 +105,15 @@ export const actionChangeFillStyle: Action = {
};
},
PanelComponent: ({ elements, appState, updateData, t }) => (
<>
<h5>{t("labels.fill")}</h5>
<fieldset>
<legend>{t("labels.fill")}</legend>
<ButtonSelect
options={[
{ value: "solid", text: t("labels.solid") },
{ value: "hachure", text: t("labels.hachure") },
{ value: "cross-hatch", text: t("labels.crossHatch") },
]}
group="fill"
value={getFormValue(
appState.editingElement,
elements,
@ -120,7 +123,7 @@ export const actionChangeFillStyle: Action = {
updateData(value);
}}
/>
</>
</fieldset>
),
};
@ -136,9 +139,10 @@ export const actionChangeStrokeWidth: Action = {
};
},
PanelComponent: ({ elements, appState, updateData, t }) => (
<>
<h5>{t("labels.strokeWidth")}</h5>
<fieldset>
<legend>{t("labels.strokeWidth")}</legend>
<ButtonSelect
group="stroke-width"
options={[
{ value: 1, text: t("labels.thin") },
{ value: 2, text: t("labels.bold") },
@ -151,7 +155,7 @@ export const actionChangeStrokeWidth: Action = {
)}
onChange={value => updateData(value)}
/>
</>
</fieldset>
),
};
@ -167,9 +171,10 @@ export const actionChangeSloppiness: Action = {
};
},
PanelComponent: ({ elements, appState, updateData, t }) => (
<>
<h5>{t("labels.sloppiness")}</h5>
<fieldset>
<legend>{t("labels.sloppiness")}</legend>
<ButtonSelect
group="sloppiness"
options={[
{ value: 0, text: t("labels.architect") },
{ value: 1, text: t("labels.artist") },
@ -182,7 +187,7 @@ export const actionChangeSloppiness: Action = {
)}
onChange={value => updateData(value)}
/>
</>
</fieldset>
),
};
@ -198,8 +203,8 @@ export const actionChangeOpacity: Action = {
};
},
PanelComponent: ({ elements, appState, updateData, t }) => (
<>
<h5>{t("labels.opacity")}</h5>
<label className="control-label">
{t("labels.opacity")}
<input
type="range"
min="0"
@ -214,7 +219,7 @@ export const actionChangeOpacity: Action = {
) ?? undefined
}
/>
</>
</label>
),
};
@ -238,9 +243,10 @@ export const actionChangeFontSize: Action = {
};
},
PanelComponent: ({ elements, appState, updateData, t }) => (
<>
<h5>{t("labels.fontSize")}</h5>
<fieldset>
<legend>{t("labels.fontSize")}</legend>
<ButtonSelect
group="font-size"
options={[
{ value: 16, text: t("labels.small") },
{ value: 20, text: t("labels.medium") },
@ -254,7 +260,7 @@ export const actionChangeFontSize: Action = {
)}
onChange={value => updateData(value)}
/>
</>
</fieldset>
),
};
@ -278,9 +284,10 @@ export const actionChangeFontFamily: Action = {
};
},
PanelComponent: ({ elements, appState, updateData, t }) => (
<>
<h5>{t("labels.fontFamily")}</h5>
<fieldset>
<legend>{t("labels.fontFamily")}</legend>
<ButtonSelect
group="font-family"
options={[
{ value: "Virgil", text: t("labels.handDrawn") },
{ value: "Helvetica", text: t("labels.normal") },
@ -293,6 +300,6 @@ export const actionChangeFontFamily: Action = {
)}
onChange={value => updateData(value)}
/>
</>
</fieldset>
),
};