fix: focus rings and tap targets for the new controls

A pass over what the last four changes added.

The focus-visible rule named a handful of controls by hand and had gone
stale. It still pointed at .today-btn, which no longer exists, and none of
the five newer controls were listed, so tabbing to the defer arrow, either
day option, the task text, the Undo button or the dismiss cross showed
nothing at all. They are all covered now, and the row buttons reveal
themselves when focused, since a ring on a transparent button is not much
use.

Tap targets on touch: the day options came out 36px tall because the
switch's own padding and border ate into its height, and the task text was
24. The switch is 46 with the padding removed so its buttons get the full
44, and the theme toggle matches so the header stays level. The text grows
by padding with the same amount taken back as negative margin, so it is
44px to a finger without moving off the first line.

Also drops the fade on the carry-over notice. It was hiding whether the
thing was actually unmounting, and a fade earns very little on something
that appears once a day.

Checked at both widths and in both themes: contrast passes on every new
element, nothing scrolls sideways, and a fresh load runs the whole feature
set with no console errors.
This commit is contained in:
Aculix Technologies
2026-08-16 03:41:07 +05:30
parent 1198158abf
commit f9ae76a87d
+36 -5
View File
@@ -619,9 +619,27 @@ html.dark .data-status.error {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.day-switch, /* 46 rather than 44, because the switch's own padding and border eat into
the height its buttons actually get. The theme toggle follows so the two
stay level in the header. */
.day-switch {
height: 46px;
padding: 0;
}
.day-option {
border-radius: 7px;
}
.theme-toggle { .theme-toggle {
height: 44px; height: 46px;
}
/* Grows the tappable area of the task text to 44px without moving the text
itself, so it stays aligned with the checkbox on the first line. */
.task-text {
padding-block: 10px;
margin-block: -10px;
} }
.clear-completed, .clear-completed,
@@ -703,15 +721,28 @@ html.dark .data-status.error {
} }
} }
/* Every control, listed once. The previous version named a handful by hand
and had already gone stale: it still pointed at .today-btn, which no
longer exists, while five newer controls had no focus ring at all. */
.checkbox:focus-visible, .checkbox:focus-visible,
.delete-btn:focus-visible, .row-btn:focus-visible,
.task-text:focus-visible,
.task-edit:focus-visible,
.theme-toggle:focus-visible, .theme-toggle:focus-visible,
.today-btn:focus-visible, .day-option:focus-visible,
.clear-completed:focus-visible { .clear-completed:focus-visible,
.data-link:focus-visible,
.undo-action:focus-visible,
.carried-dismiss:focus-visible {
outline: 2px solid var(--accent); outline: 2px solid var(--accent);
outline-offset: 2px; outline-offset: 2px;
} }
/* Hidden controls cannot show a focus ring, so reveal them when tabbed to. */
.row-btn:focus-visible {
opacity: 1;
}
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }