Make checkbox accessible from keyboard

This commit is contained in:
Sebastian Sdorra
2020-08-31 15:45:31 +02:00
committed by René Pfeuffer
parent be0c190f10
commit 6ba090b82e
3 changed files with 69 additions and 30 deletions

View File

@@ -58,10 +58,13 @@ const TriStateCheckbox: FC<Props> = ({ checked, indeterminate, disabled, label,
color = "black";
}
// We need a tabIndex to make the checkbox accessible from keyboard.
// We also add the gwt-Anchor css class to support the key-jump browser extension
// https://github.com/KennethSundqvist/key-jump-chrome-extension/blob/master/src/content.js#L365
return (
<>
<span tabIndex={0} className="gwt-Anchor">
<Icon iconStyle={"is-outlined"} name={icon} className={className} color={color} testId={testId} /> {label}
</>
</span>
);
};