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

This commit is contained in:
Matthew Meszaros
2026-09-24 21:20:18 -07:00
parent 74bf081d57
commit bc73fc35a9
2 changed files with 4 additions and 5 deletions
@@ -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>
@@ -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)}