chore: minor a11y improvement

7 files changed, 49 insertions, 20 deletions

diff --git a/src/components/Button.module.css b/src/components/Button.module.css
index 83da6af..3046d0c 100644
--- a/src/components/Button.module.css
+++ b/src/components/Button.module.css
@@ -3,6 +3,7 @@
   outline: none;
   user-select: none;
   position: relative;
+  cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 9450969..372038f 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import s0 from './Button.module.css';
 import { LoadingDot } from './shared/Basic';
 
-const { memo, forwardRef, useCallback } = React;
+const { forwardRef, useCallback } = React;
 
 type ButtonInternalProps = {
   children?: React.ReactNode;
@@ -19,6 +19,7 @@ type ButtonProps = {
   disabled?: boolean;
   kind?: 'primary' | 'minimal';
   className?: string;
+  title?: string;
 } & ButtonInternalProps;
 
 function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
@@ -28,8 +29,13 @@ function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
     isLoading,
     kind = 'primary',
     className,
+    children,
+    label,
+    text,
+    start,
     ...restProps
   } = props;
+  const internalProps = { children, label, text, start };
   const internalOnClick = useCallback(
     (e) => {
       if (isLoading) return;
@@ -39,9 +45,7 @@ function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
   );
   const btnClassName = cx(
     s0.btn,
-    {
-      [s0.minimal]: kind === 'minimal',
-    },
+    { [s0.minimal]: kind === 'minimal' },
     className
   );
   return (
@@ -50,23 +54,19 @@ function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
       ref={ref}
       onClick={internalOnClick}
       disabled={disabled}
+      {...restProps}
     >
       {isLoading ? (
         <>
-          <span
-            style={{
-              display: 'inline-flex',
-              opacity: 0,
-            }}
-          >
-            <ButtonInternal {...restProps} />
+          <span style={{ display: 'inline-flex', opacity: 0 }}>
+            <ButtonInternal {...internalProps} />
           </span>
           <span className={s0.loadingContainer}>
             <LoadingDot />
           </span>
         </>
       ) : (
-        <ButtonInternal {...restProps} />
+        <ButtonInternal {...internalProps} />
       )}
     </button>
   );
@@ -85,4 +85,4 @@ function ButtonInternal({ children, label, text, start }: ButtonInternalProps) {
   );
 }
 
-export default memo(forwardRef(Button));
+export default forwardRef(Button);
diff --git a/src/components/CollapsibleSectionHeader.tsx b/src/components/CollapsibleSectionHeader.tsx
index 8614621..bc47ad7 100644
--- a/src/components/CollapsibleSectionHeader.tsx
+++ b/src/components/CollapsibleSectionHeader.tsx
@@ -39,7 +39,12 @@ export default function Header({ name, type, toggle, isOpen, qty }: Props) {
 
       {typeof qty === 'number' ? <span className={s.qty}>{qty}</span> : null}
 
-      <Button kind="minimal" onClick={toggle} className={s.btn}>
+      <Button
+        kind="minimal"
+        onClick={toggle}
+        className={s.btn}
+        title="Toggle collapsible section"
+      >
         <span className={cx(s.arrow, { [s.isOpen]: isOpen })}>
           <ChevronDown size={20} />
         </span>
diff --git a/src/components/Root.css b/src/components/Root.css
index 3d739c0..718c58e 100644
--- a/src/components/Root.css
+++ b/src/components/Root.css
@@ -124,6 +124,8 @@ body.dark {
   --color-row-odd: #282828;
   --bg-modal: #1f1f20;
   --bg-near-transparent: rgba(255, 255, 255, 0.1);
+  --bg-tooltip: #111;
+  --bc-tooltip: #555;
   --select-border-color: #040404;
   --select-bg-hover: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23ffffff%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23ffffff%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20);
 }
@@ -148,6 +150,8 @@ body.light {
   --color-row-odd: #f5f5f5;
   --bg-modal: #fbfbfb;
   --bg-near-transparent: rgba(0, 0, 0, 0.1);
+  --bg-tooltip: #f0f0f0;
+  --bc-tooltip: #ccc;
   --select-border-color: #999999;
   --select-bg-hover: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20);
 }
@@ -175,3 +179,21 @@ body.light {
   border: 0;
   padding: 0;
 }
+
+/**** @reach/tooltip/styles.css ****/
+:root {
+  --reach-tooltip: 1;
+}
+[data-reach-tooltip] {
+  z-index: 1;
+  pointer-events: none;
+  position: absolute;
+  padding: 0.25em 0.5em;
+  box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1);
+  white-space: nowrap;
+  font-size: 85%;
+  background: var(--bg-tooltip);
+  color: var(--color-text);
+  border: solid 1px var(--bc-tooltip);
+  border-radius: 4px;
+}
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 023f418..6cfd829 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -1,5 +1,3 @@
-import '@reach/tooltip/styles.css';
-
 import Tooltip from '@reach/tooltip';
 import cx from 'clsx';
 import * as React from 'react';
diff --git a/src/components/proxies/Proxies.tsx b/src/components/proxies/Proxies.tsx
index a59c6a5..7fbe99c 100644
--- a/src/components/proxies/Proxies.tsx
+++ b/src/components/proxies/Proxies.tsx
@@ -1,3 +1,4 @@
+import Tooltip from '@reach/tooltip';
 import * as React from 'react';
 import { Zap } from 'react-feather';
 
@@ -93,9 +94,11 @@ function Proxies({
           <div className={s0.textFilterContainer}>
             <TextFilter />
           </div>
-          <Button kind="minimal" onClick={() => setIsSettingsModalOpen(true)}>
-            <Equalizer size={16} />
-          </Button>
+          <Tooltip label="settings">
+            <Button kind="minimal" onClick={() => setIsSettingsModalOpen(true)}>
+              <Equalizer size={16} />
+            </Button>
+          </Tooltip>
         </div>
       </div>
       <div>
diff --git a/src/components/proxies/ProxyGroup.tsx b/src/components/proxies/ProxyGroup.tsx
index 17bd188..e3b290a 100644
--- a/src/components/proxies/ProxyGroup.tsx
+++ b/src/components/proxies/ProxyGroup.tsx
@@ -1,4 +1,3 @@
-/* import memoizeOne from 'memoize-one'; */
 import * as React from 'react';
 import { Zap } from 'react-feather';
 
@@ -85,6 +84,7 @@ function ProxyGroupImpl({
           isOpen={isOpen}
         />
         <Button
+          title="Test latency"
           kind="minimal"
           onClick={testLatency}
           isLoading={isTestingLatency}