Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-12-24 01:09:48 +01:00
Code Issues Packages Projects Releases Activity

Make checkbox accessible from keyboard

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

91
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

@@ -44049,10 +44049,15 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
<label
className="checkbox"
>
<i
className="is-outlined fa-square has-text-black far"
/>
<span
className="gwt-Anchor"
tabIndex={0}
>
<i
className="is-outlined fa-square has-text-black far"
/>
</span>
Not checked
</label>
</div>
@@ -44067,10 +44072,15 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
<label
className="checkbox"
>
<i
className="is-outlined fa-check-square has-text-link fa"
/>
<span
className="gwt-Anchor"
tabIndex={0}
>
<i
className="is-outlined fa-check-square has-text-link fa"
/>
</span>
Checked
</label>
</div>
@@ -44085,10 +44095,15 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
<label
className="checkbox"
>
<i
className="is-outlined fa-minus-square has-text-link far"
/>
<span
className="gwt-Anchor"
tabIndex={0}
>
<i
className="is-outlined fa-minus-square has-text-link far"
/>
</span>
Indeterminate
</label>
</div>
@@ -44111,10 +44126,15 @@ exports[`Storyshots Forms|Checkbox Disabled 1`] = `
className="checkbox"
disabled={true}
>
<i
className="is-outlined fa-check-square has-text-grey-light fa"
/>
<span
className="gwt-Anchor"
tabIndex={0}
>
<i
className="is-outlined fa-check-square has-text-grey-light fa"
/>
</span>
Checked but disabled
</label>
</div>
@@ -44136,10 +44156,15 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
<label
className="checkbox"
>
<i
className="is-outlined fa-square has-text-black far"
/>
<span
className="gwt-Anchor"
tabIndex={0}
>
<i
className="is-outlined fa-square has-text-black far"
/>
</span>
Classic helpText
<span
className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 cYhfno is-inline-block has-tooltip-multiline"
@@ -44162,10 +44187,15 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
<label
className="checkbox"
>
<i
className="is-outlined fa-check-square has-text-link fa"
/>
<span
className="gwt-Anchor"
tabIndex={0}
>
<i
className="is-outlined fa-check-square has-text-link fa"
/>
</span>
Long helpText
<span
className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 cYhfno is-inline-block has-tooltip-multiline"
@@ -47541,10 +47571,15 @@ exports[`Storyshots Modal|Modal With long tooltips 1`] = `
<label
className="checkbox"
>
<i
className="is-outlined fa-check-square has-text-link fa"
/>
<span
className="gwt-Anchor"
tabIndex={0}
>
<i
className="is-outlined fa-check-square has-text-link fa"
/>
</span>
Checkbox
<span
className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 cYhfno is-inline-block has-tooltip-multiline"

7
scm-ui/ui-components/src/forms/TriStateCheckbox.tsx
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>
);
};