chore: add title to proxy dot in collapsed provider to increase a11y

2 files changed, 10 insertions, 1 deletions

diff --git a/src/components/Proxy.js b/src/components/Proxy.js
index 117ff76..0cedf12 100644
--- a/src/components/Proxy.js
+++ b/src/components/Proxy.js
@@ -1,3 +1,4 @@
+// vim: set ft=javascript.flow :
 import React from 'react';
 import cx from 'classnames';
 
@@ -57,8 +58,16 @@ type ProxyProps = {
 
 function ProxySmallImpl({ now, name, proxy, latency }: ProxyProps) {
   const color = useMemo(() => getLabelColor(latency), [latency]);
+  const title = useMemo(() => {
+    let ret = name;
+    if (latency && typeof latency.number === 'number') {
+      ret += ' ' + latency.number + ' ms';
+    }
+    return ret;
+  }, [name, latency]);
   return (
     <div
+      title={title}
       className={cx(s0.proxySmall, { [s0.now]: now })}
       style={{ backgroundColor: color }}
     />
diff --git a/src/components/Root.js b/src/components/Root.js
index 7303ee7..90b548e 100644
--- a/src/components/Root.js
+++ b/src/components/Root.js
@@ -49,7 +49,7 @@ const Root = () => (
       <Router>
         <div className={s0.app}>
           <APIDiscovery />
-          <Route path="/" element={<SideBar />} />
+          <SideBar />
           <div className={s0.content}>
             <Suspense fallback={<Loading2 />}>
               <Routes>