improve accessibility

src/ProgressPane.jsx

@@ -108,6 +108,9 @@ function DataView({ data, captionPortal, nonce, color }) {
     }, [oldest && oldest.timestamp])
 
     return <>
+        <h1 className="aria-only">
+            {latest && formatPercent(latest.percentBytes)} decompiled
+        </h1>
         <div className="shadow-box flex-grow">
             <div className="shadow-box-inner" style={{ paddingRight: ".7em", paddingTop: ".7em", "--text-outline": "transparent", background: "#e2e1d8" }}>
                 <div className="progress-chart">
@@ -137,7 +140,7 @@ function DataView({ data, captionPortal, nonce, color }) {
                 </div>}
             </div>
 
-            <button className={"shadow-box-title " + color}>
+            <button aria-hidden={true} className={"shadow-box-title " + color}>
                 {selectedEntry ? formatTimestamp(selectedEntry.timestamp, {
                     dateStyle: "long",
                     timeStyle: "short",

src/index.css

@@ -462,3 +462,12 @@ button.shadow-box-title {
         flex-grow: 0;
     }
 }
+
+.aria-only {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}

src/main.jsx

@@ -132,6 +132,7 @@ function App() {
                 return <a
                     key={tab.name}
                     className={clsx("tab", tab.color, { "inactive": index !== tabIndex })}
+                    aria-selected={index === tabIndex}
                     href={tab.slug}
                     onClick={evt => {
                         const q = window.matchMedia("(prefers-reduced-motion: reduce)")