djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make sortable chips accessible (#2175)

Browse source
This commit is contained in:
Dawid 2022-07-29 18:47:09 +02:00 committed by GitHub
parent 3a85027934
commit 1a974e380c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 268 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
package-lock.json generated
View file

@ -10091,7 +10091,7 @@
"buffer-crc32": {
"version": "0.2.13",
"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
"integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
"integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
"dev": true
},
"buffer-equal-constant-time": {
@ -14970,7 +14970,7 @@
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
}
@ -15453,7 +15453,7 @@
"fd-slicer": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
"integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
"integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
"dev": true,
"requires": {
"pend": "~1.2.0"
@ -23602,7 +23602,7 @@
"ospath": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz",
"integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
"integrity": "sha1-EnZjl3Sj+O8lcvf+QoDg6kVQwHs=",
"dev": true
},
"p-cancelable": {
@ -24155,7 +24155,7 @@
"pend": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
"integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
"integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
"dev": true
},
"performance-now": {
@ -27216,7 +27216,7 @@
"request-progress": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/request-progress/-/request-progress-3.0.0.tgz",
"integrity": "sha512-MnWzEHHaxHO2iWiQuHrUPBi/1WeBf5PkxQqNyNvLl9VAYSdXkP8tQ3pBSeCPD+yw0v0Aq1zosWLz0BdeXpWwZg==",
"integrity": "sha1-TKdUCBx/7GP1BeT6qCWqBs1mnb4=",
"dev": true,
"requires": {
"throttleit": "^1.0.0"

25
src/components/SortableChip/SortableChip.tsx
View file

@ -15,10 +15,14 @@ export interface SortableChipProps extends SortableElementProps {
const useStyles = makeStyles(
theme => ({
closeButton: {
marginLeft: theme.spacing(),
background: "none",
border: "none",
},
closeIcon: {
cursor: "pointer",
fontSize: 16,
marginLeft: theme.spacing(),
verticalAlign: "middle",
},
content: {
@ -39,11 +43,18 @@ const useStyles = makeStyles(
{ name: "SortableChip" },
);
const SortableChip = SortableElement<SortableChipProps>(props => {
const SortableChip = SortableElement((props: SortableChipProps) => {
const { className, label, onClose } = props;
const classes = useStyles(props);
const handleClose = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
if (onClose) {
onClose();
}
};
return (
<div className={classNames(classes.root, className)}>
<div className={classes.content}>
@ -53,11 +64,13 @@ const SortableChip = SortableElement<SortableChipProps>(props => {
/>
<Typography data-test-id="chip-label">{label}</Typography>
{onClose && (
<CloseIcon
className={classes.closeIcon}
onClick={onClose}
<button
className={classes.closeButton}
onClick={handleClose}
data-test-id="button-close"
/>
>
<CloseIcon className={classes.closeIcon} />
</button>
)}
</div>
</div>

10
src/components/SortableChip/SortableHandle.tsx
View file

@ -12,16 +12,20 @@ const useStyles = makeStyles(
{ name: "SortableHandle" },
);
interface SortableHandle {
interface SortableHandleProps {
className?: string;
}
const SortableHandle = SortableHandleHoc(props => {
const SortableHandle = SortableHandleHoc((props: SortableHandleProps) => {
const { className, ...restProps } = props;
const classes = useStyles(props);
return (
<DragIcon className={classNames(classes.drag, className)} {...restProps} />
<DragIcon
className={classNames(classes.drag, className)}
tabIndex={0}
{...restProps}
/>
);
});

13
src/components/SortableChipsField/SortableContainer.tsx
View file

@ -1,5 +1,14 @@
import { SortableContainer as SortableContainerHoc } from "react-sortable-hoc";
import {
SortableContainer as SortableContainerHoc,
SortableContainerProps as SortableContainerHocProps,
} from "react-sortable-hoc";
const SortableContainer = SortableContainerHoc(({ children }) => children);
interface SortableContainerProps extends SortableContainerHocProps {
children: React.ReactElement;
}
const SortableContainer = SortableContainerHoc(
({ children }: SortableContainerProps) => children,
);
export default SortableContainer;

113
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -2032,6 +2032,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -2049,10 +2050,13 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
>
References First Value
</div>
<button
class="SortableChip-closeButton-id"
data-test-id="button-close"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
data-test-id="button-close"
focusable="false"
viewBox="0 0 24 24"
>
@ -2060,6 +2064,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
</div>
</div>
<div
@ -2075,6 +2080,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -2092,10 +2098,13 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
>
References Second Value
</div>
<button
class="SortableChip-closeButton-id"
data-test-id="button-close"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
data-test-id="button-close"
focusable="false"
viewBox="0 0 24 24"
>
@ -2103,6 +2112,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
</div>
</div>
<div
@ -2118,6 +2128,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -2135,10 +2146,13 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
>
References Third Value
</div>
<button
class="SortableChip-closeButton-id"
data-test-id="button-close"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
data-test-id="button-close"
focusable="false"
viewBox="0 0 24 24"
>
@ -2146,6 +2160,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
</div>
</div>
</div>
@ -15810,6 +15825,7 @@ exports[`Storyshots Generics / Sortable chip default 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -15858,6 +15874,7 @@ exports[`Storyshots Generics / Sortable chip with x 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -15875,10 +15892,13 @@ exports[`Storyshots Generics / Sortable chip with x 1`] = `
>
Lorem Ipsum
</div>
<button
class="SortableChip-closeButton-id"
data-test-id="button-close"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
data-test-id="button-close"
focusable="false"
viewBox="0 0 24 24"
>
@ -15886,6 +15906,7 @@ exports[`Storyshots Generics / Sortable chip with x 1`] = `
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
</div>
</div>
</div>
@ -15918,6 +15939,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -15935,10 +15957,13 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
>
Item 1
</div>
<button
class="SortableChip-closeButton-id"
data-test-id="button-close"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
data-test-id="button-close"
focusable="false"
viewBox="0 0 24 24"
>
@ -15946,6 +15971,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
</div>
</div>
<div
@ -15961,6 +15987,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -15978,10 +16005,13 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
>
Item 2
</div>
<button
class="SortableChip-closeButton-id"
data-test-id="button-close"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
data-test-id="button-close"
focusable="false"
viewBox="0 0 24 24"
>
@ -15989,6 +16019,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
</div>
</div>
<div
@ -16004,6 +16035,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -16021,10 +16053,13 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
>
Item 3
</div>
<button
class="SortableChip-closeButton-id"
data-test-id="button-close"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
data-test-id="button-close"
focusable="false"
viewBox="0 0 24 24"
>
@ -16032,6 +16067,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
</div>
</div>
<div
@ -16047,6 +16083,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -16064,10 +16101,13 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
>
Item 4
</div>
<button
class="SortableChip-closeButton-id"
data-test-id="button-close"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
data-test-id="button-close"
focusable="false"
viewBox="0 0 24 24"
>
@ -16075,6 +16115,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
</div>
</div>
<div
@ -16090,6 +16131,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -16107,10 +16149,13 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
>
Item 5
</div>
<button
class="SortableChip-closeButton-id"
data-test-id="button-close"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
data-test-id="button-close"
focusable="false"
viewBox="0 0 24 24"
>
@ -16118,6 +16163,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
</div>
</div>
<div
@ -16133,6 +16179,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -16150,10 +16197,13 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
>
Item 6
</div>
<button
class="SortableChip-closeButton-id"
data-test-id="button-close"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
data-test-id="button-close"
focusable="false"
viewBox="0 0 24 24"
>
@ -16161,6 +16211,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
</div>
</div>
</div>
@ -16218,6 +16269,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -16235,10 +16287,13 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
>
Item 1
</div>
<button
class="SortableChip-closeButton-id"
data-test-id="button-close"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
data-test-id="button-close"
focusable="false"
viewBox="0 0 24 24"
>
@ -16246,6 +16301,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
</div>
</div>
<div
@ -16261,6 +16317,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -16278,10 +16335,13 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
>
Item 2
</div>
<button
class="SortableChip-closeButton-id"
data-test-id="button-close"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
data-test-id="button-close"
focusable="false"
viewBox="0 0 24 24"
>
@ -16289,6 +16349,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
</div>
</div>
<div
@ -16304,6 +16365,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -16321,10 +16383,13 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
>
Item 3
</div>
<button
class="SortableChip-closeButton-id"
data-test-id="button-close"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
data-test-id="button-close"
focusable="false"
viewBox="0 0 24 24"
>
@ -16332,6 +16397,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
</div>
</div>
<div
@ -16347,6 +16413,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -16364,10 +16431,13 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
>
Item 4
</div>
<button
class="SortableChip-closeButton-id"
data-test-id="button-close"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
data-test-id="button-close"
focusable="false"
viewBox="0 0 24 24"
>
@ -16375,6 +16445,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
</div>
</div>
<div
@ -16390,6 +16461,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -16407,10 +16479,13 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
>
Item 5
</div>
<button
class="SortableChip-closeButton-id"
data-test-id="button-close"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
data-test-id="button-close"
focusable="false"
viewBox="0 0 24 24"
>
@ -16418,6 +16493,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
</div>
</div>
<div
@ -16433,6 +16509,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
fill="none"
focusable="false"
height="24"
tabindex="0"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
@ -16450,10 +16527,13 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
>
Item 6
</div>
<button
class="SortableChip-closeButton-id"
data-test-id="button-close"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
data-test-id="button-close"
focusable="false"
viewBox="0 0 24 24"
>
@ -16461,6 +16541,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
</button>
</div>
</div>
<div