refactor: improve a11y

1 files changed, 50 insertions, 0 deletions

diff --git a/src/components/CollapsibleSectionHeader.tsx b/src/components/CollapsibleSectionHeader.tsx
new file mode 100644
index 0000000..77e7596
--- /dev/null
+++ b/src/components/CollapsibleSectionHeader.tsx
@@ -0,0 +1,50 @@
+import cx from 'clsx';
+import * as React from 'react';
+import { ChevronDown } from 'react-feather';
+
+import { keyCodes } from '../misc/keycode';
+import Button from './Button';
+import s from './CollapsibleSectionHeader.module.css';
+import { SectionNameType } from './shared/Basic';
+
+type Props = {
+  name: string;
+  type: string;
+  qty?: number;
+  toggle?: () => void;
+  isOpen?: boolean;
+};
+
+export default function Header({ name, type, toggle, isOpen, qty }: Props) {
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      e.preventDefault();
+      if (e.keyCode === keyCodes.Enter || e.keyCode === keyCodes.Space) {
+        toggle();
+      }
+    },
+    [toggle]
+  );
+  return (
+    <div
+      className={s.header}
+      onClick={toggle}
+      style={{ cursor: 'pointer' }}
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+      role="button"
+    >
+      <div>
+        <SectionNameType name={name} type={type} />
+      </div>
+
+      {typeof qty === 'number' ? <span className={s.qty}>{qty}</span> : null}
+
+      <Button kind="minimal" onClick={toggle} className={s.btn}>
+        <span className={cx(s.arrow, { [s.isOpen]: isOpen })}>
+          <ChevronDown size={20} />
+        </span>
+      </Button>
+    </div>
+  );
+}