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>pull/520/head^2
Guillermo Peralta Scura
5 years ago
committed by
Christopher Chedeau
parent
5fd6c4d853
commit
69061e20ac
@ -0,0 +1,62 @@
|
||||
import "./ToolIcon.scss";
|
||||
|
||||
import React from "react";
|
||||
|
||||
type ToolIconSize = "s" | "m";
|
||||
|
||||
type ToolButtonBaseProps = {
|
||||
icon: React.ReactNode;
|
||||
"aria-label": string;
|
||||
"aria-keyshortcuts"?: string;
|
||||
title?: string;
|
||||
name?: string;
|
||||
id?: string;
|
||||
size?: ToolIconSize;
|
||||
};
|
||||
|
||||
type ToolButtonProps =
|
||||
| (ToolButtonBaseProps & { type: "button"; onClick?(): void })
|
||||
| (ToolButtonBaseProps & {
|
||||
type: "radio";
|
||||
|
||||
checked: boolean;
|
||||
onChange?(): void;
|
||||
});
|
||||
|
||||
const DEFAULT_SIZE: ToolIconSize = "m";
|
||||
|
||||
export function ToolButton(props: ToolButtonProps) {
|
||||
const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`;
|
||||
|
||||
if (props.type === "button")
|
||||
return (
|
||||
<button
|
||||
className={`ToolIcon_type_button ToolIcon ${sizeCn}`}
|
||||
title={props.title}
|
||||
aria-label={props["aria-label"]}
|
||||
type="button"
|
||||
onClick={props.onClick}
|
||||
>
|
||||
<div className="ToolIcon__icon" aria-hidden="true">
|
||||
{props.icon}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<label className="ToolIcon">
|
||||
<input
|
||||
className={`ToolIcon_type_radio ${sizeCn}`}
|
||||
type="radio"
|
||||
name={props.name}
|
||||
title={props.title}
|
||||
aria-label={props["aria-label"]}
|
||||
aria-keyshortcuts={props["aria-keyshortcuts"]}
|
||||
id={props.id}
|
||||
onChange={props.onChange}
|
||||
checked={props.checked}
|
||||
/>
|
||||
<div className="ToolIcon__icon">{props.icon}</div>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
@ -1,61 +0,0 @@
|
||||
import "./ToolIcon.scss";
|
||||
|
||||
import React from "react";
|
||||
|
||||
type ToolIconSize = "s" | "m";
|
||||
|
||||
type ToolIconProps =
|
||||
| {
|
||||
type: "button";
|
||||
icon: React.ReactNode;
|
||||
"aria-label": string;
|
||||
title?: string;
|
||||
name?: string;
|
||||
id?: string;
|
||||
onClick?(): void;
|
||||
size?: ToolIconSize;
|
||||
}
|
||||
| {
|
||||
type: "radio";
|
||||
icon: React.ReactNode;
|
||||
title?: string;
|
||||
name?: string;
|
||||
id?: string;
|
||||
checked: boolean;
|
||||
onChange?(): void;
|
||||
size?: ToolIconSize;
|
||||
};
|
||||
|
||||
const DEFAULT_SIZE: ToolIconSize = "m";
|
||||
|
||||
export function ToolIcon(props: ToolIconProps) {
|
||||
const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`;
|
||||
|
||||
if (props.type === "button")
|
||||
return (
|
||||
<label className={`ToolIcon ${sizeCn}`} title={props.title}>
|
||||
<button
|
||||
className="ToolIcon_type_button"
|
||||
aria-label={props["aria-label"]}
|
||||
type="button"
|
||||
onClick={props.onClick}
|
||||
>
|
||||
<div className="ToolIcon__icon">{props.icon}</div>
|
||||
</button>
|
||||
</label>
|
||||
);
|
||||
|
||||
return (
|
||||
<label className={`ToolIcon ${sizeCn}`} title={props.title}>
|
||||
<input
|
||||
className="ToolIcon_type_radio"
|
||||
type="radio"
|
||||
name={props.name}
|
||||
id={props.id}
|
||||
onChange={props.onChange}
|
||||
checked={props.checked}
|
||||
/>
|
||||
<div className="ToolIcon__icon">{props.icon}</div>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue