Replace the compact "Add" buttons with a plus icon

The kanban column, sidebar inbox, and add-status forms all had their
own "Add" submit button; with a column-per-status now, that's a lot of
identical labels on screen at once. Replaced with a small square "+"
icon button (.btn-icon), each keeping a descriptive title + aria-label
(dynamic, so it reads "Adding…" while the request is in flight) since
the visible glyph alone isn't an accessible name.

.btn-icon is excluded (":not(.btn-icon)") from the generic submit
button rule and the .field-row/.kanban__new compact-button overrides,
rather than out-specificity'd -- same reasoning as .field's low
specificity against input:focus: it shouldn't depend on source order
which one wins. .kanban__new's own override is now dead (both of its
two buttons are icons) and removed outright.

Left the "Add card" button on the "All tasks" tab as text -- it's a
lone, full-width primary action in a larger form, not one of several
compact icon-sized ones crowded together.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-05 00:16:38 +01:00
co-authored by Claude Sonnet 5
parent 19ccb8f881
commit 7ce0f156f0
4 changed files with 55 additions and 15 deletions
+7 -1
View File
@@ -169,7 +169,13 @@ async function onInboxChange(change: ColumnChange) {
placeholder="New card"
aria-label="New card"
/>
<button type="submit" :disabled="addingToInbox">Add</button>
<button
type="submit"
class="btn-icon"
:disabled="addingToInbox"
:title="addingToInbox ? 'Adding…' : 'Add card to inbox'"
:aria-label="addingToInbox ? 'Adding' : 'Add card to inbox'"
>+</button>
</form>
</aside>
</template>
+7 -1
View File
@@ -175,7 +175,13 @@ useDialog(computed(() => pendingDelete.value !== null), cancelReassign, reassign
placeholder="Status name"
aria-label="Status name"
/>
<button type="submit" :disabled="addingStatus">{{ addingStatus ? 'Adding…' : 'Add' }}</button>
<button
type="submit"
class="btn-icon"
:disabled="addingStatus"
:title="addingStatus ? 'Adding…' : 'Add status'"
:aria-label="addingStatus ? 'Adding' : 'Add status'"
>+</button>
</form>
<p v-if="addStatusError" class="form-error">{{ addStatusError.message }}</p>
</section>