From bc73fc35a9f28cbb7bc668d2af8c1c3bb01ab2b8 Mon Sep 17 00:00:00 2001
From: Matthew Meszaros <meszmatew@gmail.com>
Date: Thu, 24 Sep 2026 21:20:18 -0700
Subject: [PATCH] feat: give the unibox Compose button its visible label as the
 accessible name (screen-reader only on phones), hide the N key hint from
 assistive tech, and drop the drafts row's leftover top margin

---
 web/src/components/app/unibox/compose/ComposeButton.tsx    | 7 +++----
 .../components/app/unibox/compose/ComposeDraftsItem.tsx    | 2 +-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/web/src/components/app/unibox/compose/ComposeButton.tsx b/web/src/components/app/unibox/compose/ComposeButton.tsx
index 7a7de2899..c0bfbc739 100644
--- a/web/src/components/app/unibox/compose/ComposeButton.tsx
+++ b/web/src/components/app/unibox/compose/ComposeButton.tsx
@@ -1,5 +1,5 @@
 // The unibox Compose button, in the list's title row on every viewport. The
-// label drops on phones and the key hint below md.
+// label is visually hidden on phones and the key hint below md.
 
 import { PenLineIcon } from "lucide-react";
 import ShortcutTooltip, { shortcutLabel } from "@/components/ui/shortcut-tooltip";
@@ -11,12 +11,11 @@ export default function ComposeButton() {
             <button
                 type="button"
                 onClick={() => useComposeStore.getState().openCompose()}
-                aria-label="New email"
                 className="h-7 px-2 sm:pl-2 sm:pr-2.5 md:pr-1.5 rounded-md text-[12px] font-medium text-sky-700 inline-flex items-center gap-1.5 hover:bg-sky-50 active:bg-sky-100 transition-colors shrink-0"
             >
                 <PenLineIcon className="w-3.5 h-3.5" />
-                <span className="hidden sm:inline">Compose</span>
-                <kbd className="hidden md:inline-flex h-4 min-w-4 justify-center items-center px-1 ml-0.5 rounded border border-sky-200 bg-white font-mono text-[10px] leading-none text-sky-600">
+                <span className="sr-only sm:not-sr-only">Compose</span>
+                <kbd aria-hidden className="hidden md:inline-flex h-4 min-w-4 justify-center items-center px-1 ml-0.5 rounded border border-sky-200 bg-white font-mono text-[10px] leading-none text-sky-600">
                     {shortcutLabel("n")}
                 </kbd>
             </button>
diff --git a/web/src/components/app/unibox/compose/ComposeDraftsItem.tsx b/web/src/components/app/unibox/compose/ComposeDraftsItem.tsx
index 15366942e..f12dd2206 100644
--- a/web/src/components/app/unibox/compose/ComposeDraftsItem.tsx
+++ b/web/src/components/app/unibox/compose/ComposeDraftsItem.tsx
@@ -38,7 +38,7 @@ export default function ComposeDraftsItem() {
     if (drafts.length === 0) return null;
 
     return (
-        <div ref={boxRef} className="relative mt-1">
+        <div ref={boxRef} className="relative">
             <button
                 type="button"
                 onClick={() => setOpen((o) => !o)}