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

13
src/components/ExportDialog.tsx
View file

@ -3,7 +3,7 @@ import "./ExportDialog.css";
import React, { useState, useEffect, useRef } from "react";
import { Modal } from "./Modal";
import { ToolIcon } from "./ToolIcon";
import { ToolButton } from "./ToolButton";
import { clipboard, exportFile, downloadFile, link } from "./icons";
import { Island } from "./Island";
import { ExcalidrawElement } from "../element/types";
@ -91,7 +91,7 @@ export function ExportDialog({
return (
<>
<ToolIcon
<ToolButton
onClick={() => setModalIsShown(true)}
icon={exportFile}
type="button"
@ -109,7 +109,7 @@ export function ExportDialog({
<div className="ExportDialog__preview" ref={previewRef}></div>
<div className="ExportDialog__actions">
<Stack.Row gap={2}>
<ToolIcon
<ToolButton
type="button"
icon={downloadFile}
title={t("buttons.exportToPng")}
@ -117,7 +117,7 @@ export function ExportDialog({
onClick={() => onExportToPng(exportedElements, scale)}
/>
{probablySupportsClipboard && (
<ToolIcon
<ToolButton
type="button"
icon={clipboard}
title={t("buttons.copyToClipboard")}
@ -127,7 +127,7 @@ export function ExportDialog({
}
/>
)}
<ToolIcon
<ToolButton
type="button"
icon={link}
title={t("buttons.getShareableLink")}
@ -147,12 +147,13 @@ export function ExportDialog({
<div className="ExportDialog__scales">
<Stack.Row gap={1} align="baseline">
{scales.map(s => (
<ToolIcon
<ToolButton
key={s}
size="s"
type="radio"
icon={"x" + s}
name="export-canvas-scale"
aria-label="Export"
id="export-canvas-scale"
checked={scale === s}
onChange={() => setScale(s)}