fix(tasks): shorten reminder snooze button label to fit small screens (#8743)

The reminder dialog footer could not fit all actions in one row on small
screens. Show only the snooze duration (e.g. "10m") on the split-button's
main action instead of "Snooze 10m" — the snooze icon already conveys the
action — freeing horizontal space so the row fits.

Add a `mainLabel` input to the shared split-button so the abbreviated main
action keeps a full tooltip and aria-label for discoverability/accessibility.


Claude-Session: https://claude.ai/code/session_015797BREShEaTkBsA3tRBuX

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Johannes Millan 2026-07-03 23:36:05 +02:00 committed by GitHub
parent cb586f87e9
commit 245330bd68
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 24 additions and 1 deletions

View file

@ -15,6 +15,7 @@ import { SplitButtonComponent } from './split-button.component';
[menu]="menu"
[disabled]="disabled()"
[triggerLabel]="triggerLabel()"
[mainLabel]="mainLabel()"
(mainClick)="onMainClick()"
>
<span class="projected-content">Snooze 10m</span>
@ -27,6 +28,7 @@ import { SplitButtonComponent } from './split-button.component';
class HostComponent {
readonly disabled = signal(false);
readonly triggerLabel = signal('');
readonly mainLabel = signal('');
mainClickCount = 0;
onMainClick(): void {
@ -94,4 +96,15 @@ describe('SplitButtonComponent', () => {
fixture.detectChanges();
expect(triggerBtn().getAttribute('aria-label')).toBeNull();
});
it('exposes the resolved mainLabel as the main aria-label, and omits it when empty', () => {
// mainLabel is a resolved string (caller translates), so it is bound as-is.
host.mainLabel.set('Snooze 10m');
fixture.detectChanges();
expect(mainBtn().getAttribute('aria-label')).toBe('Snooze 10m');
host.mainLabel.set('');
fixture.detectChanges();
expect(mainBtn().getAttribute('aria-label')).toBeNull();
});
});