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

10
src/index.tsx
View file

@ -80,7 +80,7 @@ import { getDefaultAppState } from "./appState";
import { Island } from "./components/Island";
import Stack from "./components/Stack";
import { FixedSideContainer } from "./components/FixedSideContainer";
import { ToolIcon } from "./components/ToolIcon";
import { ToolButton } from "./components/ToolButton";
import { LockIcon } from "./components/LockIcon";
import { ExportDialog } from "./components/ExportDialog";
import { withTranslation } from "react-i18next";
@ -501,7 +501,7 @@ export class App extends React.Component<any, AppState> {
{SHAPES.map(({ value, icon }, index) => {
const label = t(`toolBar.${value}`);
return (
<ToolIcon
<ToolButton
key={value}
type="radio"
icon={icon}
@ -510,6 +510,8 @@ export class App extends React.Component<any, AppState> {
title={`${capitalizeString(label)} — ${
capitalizeString(value)[0]
}, ${index + 1}`}
aria-label={capitalizeString(label)}
aria-keyshortcuts={`${label[0]} ${index + 1}`}
onChange={() => {
this.setState({ elementType: value });
elements = clearSelection(elements);
@ -517,7 +519,7 @@ export class App extends React.Component<any, AppState> {
value === "text" ? CURSOR_TYPE.TEXT : CURSOR_TYPE.CROSSHAIR;
this.forceUpdate();
}}
></ToolIcon>
></ToolButton>
);
})}
{this.renderShapeLock()}
@ -610,6 +612,7 @@ export class App extends React.Component<any, AppState> {
<div className="App-menu App-menu_top">
<Stack.Col gap={4} align="end">
<div className="App-right-menu">
<h2 className="visually-hidden">Canvas actions</h2>
<Island padding={4}>{this.renderCanvasActions()}</Island>
</div>
<div className="App-right-menu">
@ -618,6 +621,7 @@ export class App extends React.Component<any, AppState> {
</Stack.Col>
<Stack.Col gap={4} align="start">
<Island padding={1}>
<h2 className="visually-hidden">Shapes</h2>
<Stack.Row gap={1}>{this.renderShapesSwitcher()}</Stack.Row>
</Island>
</Stack.Col>