Skip to content

feat(fields): an ordered list a user keeps, with the keyboard - #1763

Closed
rubenvdlinde wants to merge 4 commits into
developmentfrom
feat/ordered-list-field
Closed

rubenvdlinde wants to merge 4 commits into
developmentfrom
feat/ordered-list-field

Conversation

@rubenvdlinde

Copy link
Copy Markdown
Contributor

Board DqPersoonlijkeInstellingen has "Zaaktypen in mijn menu" in the personal settings: a list the user orders, a remove button per row, and "Zaaktype toevoegen" as a search-as-you-type picker. The library had no control for an ordered, user-kept list.

  • New standalone CnOrderedListField (exported): the values of modelValue in order as an <ol> labelled by label; per row a named move up, move down and remove button (first-up and last-down disabled); focus stays on a move button after the move.
  • Every move, removal and addition is announced in a polite live region ("Objection moved to position 1 of 3"), so reordering works with the keyboard and a screen reader, no dragging.
  • An NcSelect picker with inputLabel (addLabel) offers the choices not listed yet and adds the picked one at the end. With searchable it emits search with the typed text and leaves filtering to the app (loading while it fetches).
  • The app supplies options and gets update:modelValue, so v-model works. emptyText and disabled (read-only) too. Copy in nl + en. No schema change.

Verified locally: tests/components/CnOrderedListField.spec.js (new), tests/a11y/CnOrderedListField.a11y.spec.js (new, axe on the real @nextcloud/vue: no WCAG 2.1 AA violations with rows, empty and read-only; named native buttons; live region), tests/l10n/, tests/packaging/, eslint + stylelint on changed files, check:jsdoc, check:docs, check:docs-mdx, generated reference pages regenerated. Full jest, docs-fresh, build and e2e are left to CI.

AI disclosure: written with Claude Code (claude-opus-5-5).

🤖 Generated with Claude Code

CnOrderedListField draws rows in order with move up, move down and remove
buttons, announces every change, and adds rows from a search-as-you-type
picker; the app supplies the choices and gets update:modelValue (board
DqPersoonlijkeInstellingen, "Zaaktypen in mijn menu").

Assisted-by: ClaudeCode:claude-opus-5-5
Assisted-by: ClaudeCode:claude-opus-5-5
…ist-field

# Conflicts:
#	l10n/en.json
#	l10n/nl.json
@github-actions

Copy link
Copy Markdown
Contributor

Quality Report — ConductionNL/nextcloud-vue @ 64ba0b3

Check PHP Vue Security License Tests
lint ⏭️
phpcs ⏭️
phpmd ⏭️
psalm ⏭️
phpstan ⏭️
phpmetrics ⏭️
eslint ✅
stylelint ✅
build ✅
test ✅
check-build ✅
check-vue3-compile ✅
check-public-safe ✅
check-journey-vocabulary ✅
check-docs ✅
check-docs-mdx ✅
check-jsdoc ✅
check-integration-parity ✅
check-peers ✅
check-docs-fresh ✅
check-a11y ✅
check-smoke ✅
composer ✅ ✅
npm ✅ ✅ 643/643
app:check-code ⏭️
info.xml ⏭️
REUSE ✅
lockfile sync ✅
PHPUnit ⏭️
Newman ⏭️
Playwright ⏭️
Hydra gates ⏭️

Quality workflow — 2026-10-17 10:21 UTC

Download the full PDF report from the workflow artifacts.

…ist-field

# Conflicts:
#	l10n/en.json
#	l10n/nl.json
@github-actions

Copy link
Copy Markdown
Contributor

Quality Report — ConductionNL/nextcloud-vue @ 3cdff36

Check PHP Vue Security License Tests
lint ⏭️
phpcs ⏭️
phpmd ⏭️
psalm ⏭️
phpstan ⏭️
phpmetrics ⏭️
eslint ✅
stylelint ✅
build ✅
test ✅
check-build ✅
check-vue3-compile ✅
check-public-safe ✅
check-journey-vocabulary ✅
check-docs ✅
check-docs-mdx ✅
check-jsdoc ✅
check-integration-parity ✅
check-peers ✅
check-docs-fresh ✅
check-a11y ✅
check-smoke ✅
composer ✅ ✅
npm ✅ ✅ 643/643
app:check-code ⏭️
info.xml ⏭️
REUSE ✅
lockfile sync ✅
PHPUnit ⏭️
Newman ⏭️
Playwright ⏭️
Hydra gates ⏭️

Quality workflow — 2026-10-17 10:45 UTC

Download the full PDF report from the workflow artifacts.

@rubenvdlinde

Copy link
Copy Markdown
Contributor Author

Landed in batch 8 via #1771.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant