diff --git a/components/email/__tests__/email-list-batch-bar.test.tsx b/components/email/__tests__/email-list-batch-bar.test.tsx index e534a9b4d..c44dc2df3 100644 --- a/components/email/__tests__/email-list-batch-bar.test.tsx +++ b/components/email/__tests__/email-list-batch-bar.test.tsx @@ -108,6 +108,21 @@ describe('selection bar: Move, read state and the reading pane', () => { }); }); +describe('the reading pane for a selection (mail-p2-15)', () => { + it('names its buttons in words, while the bar beside the list keeps icons', () => { + const host = document.createElement('div'); + document.body.appendChild(host); + render(); + const pane = host.querySelector('[data-testid="selection-pane"]') as HTMLElement; + for (const id of ['archive', 'delete', 'move', 'mark-read', 'tag']) { + const button = pane.querySelector(`[data-testid="pane-batch-${id}"]`) as HTMLElement; + expect(button.textContent?.trim()).toBe(button.getAttribute('aria-label')); + } + expect(screen.getByTestId('batch-archive').textContent).toBe(''); + host.remove(); + }); +}); + describe('selection bar and rows from the keyboard', () => { it('keeps the collapsed bar out of the Tab order', () => { useEmailStore.setState({ selectedEmailKeys: new Set() }); diff --git a/components/email/batch-tag-button.tsx b/components/email/batch-tag-button.tsx index 5b438ac2e..f569007e7 100644 --- a/components/email/batch-tag-button.tsx +++ b/components/email/batch-tag-button.tsx @@ -26,6 +26,7 @@ export function BatchTagButton({ disabled, scope = null, testId = "batch-tag", + showLabel = false, }: { title: string; /** Tags every selected message carries. */ @@ -40,6 +41,8 @@ export function BatchTagButton({ scope?: TagScope | null; /** The reading pane's copy has its own (mail-10). */ testId?: string; + /** Name the button in words beside the icon, as the reading pane does (mail-p2-15). */ + showLabel?: boolean; }) { const [pos, setPos] = useState<{ top: number; left: number } | null>(null); const buttonRef = useRef(null); @@ -101,8 +104,10 @@ export function BatchTagButton({ aria-haspopup="menu" aria-expanded={isOpen} disabled={disabled} + {...(showLabel ? { size: "sm" as const, title: "", className: "gap-1.5" } : {})} > + {showLabel && {title}} {isOpen && createPortal( diff --git a/components/email/email-list.tsx b/components/email/email-list.tsx index 506a8cc07..de0de91fe 100644 --- a/components/email/email-list.tsx +++ b/components/email/email-list.tsx @@ -776,11 +776,17 @@ export function EmailList({ // reading pane. The pane's copies get their own test ids. const selectionButtons = (where: 'bar' | 'pane') => { const testId = (id: string) => (where === 'bar' ? id : `pane-${id}`); + // The pane has room: its buttons say what they do (mail-p2-15). The + // bar beside the list stays icons with tooltips. + const labelled = where === 'pane'; + const shape = labelled ? { size: 'sm' as const, title: '', className: 'gap-1.5' } : {}; + const name = (label: string) => (labelled ? {label} : null); return ( <> {archiveActionEnabled && effectiveMailboxRole !== 'archive' && ( - void handleBatchArchive()} disabled={isProcessing} data-testid={testId('batch-archive')}> + void handleBatchArchive()} disabled={isProcessing} data-testid={testId('batch-archive')} {...shape}> + {name(tContextMenu('archive'))} )} + {name(t('batch_actions.delete'))} {!moveMenuIsEmpty(selectionMoveModel) && ( moveMenu.openContextMenuFrom(e.currentTarget, null, 'end')} disabled={isProcessing} data-testid={testId('batch-move')} + {...shape} > + {name(tContextMenu('move_to'))} )} handleBatchMarkAsRead(selectionHasUnread)} disabled={isProcessing} data-testid={testId('batch-mark-read')} + {...shape} > {selectionHasUnread ? : } + {name(selectionHasUnread ? t('batch_actions.mark_read') : t('batch_actions.mark_unread'))}

{selectionTitle}

-
+
{selectionButtons('pane')}