From 8aa2e4a170cdeed53a396c113a059a07816c60af Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 1 Nov 2025 17:47:16 +0000 Subject: [PATCH 1/3] Initial plan From b6987ab7b8a39577ddb21ecd0a8585ef59349c80 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 1 Nov 2025 17:53:25 +0000 Subject: [PATCH 2/3] Add want file for token field element and fix validation Co-authored-by: aarongustafson <75736+aarongustafson@users.noreply.github.com> --- scripts/validate-want.mjs | 8 +++++-- wants/60f4aacb952fb3beac8eaa21.md | 36 +++++++++++++++++++++++++++++++ 2 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 wants/60f4aacb952fb3beac8eaa21.md diff --git a/scripts/validate-want.mjs b/scripts/validate-want.mjs index 693db3c..4235cc5 100644 --- a/scripts/validate-want.mjs +++ b/scripts/validate-want.mjs @@ -26,6 +26,7 @@ const __dirname = path.dirname(__filename); const VALID_STATUSES = ['discussing', 'complete', 'in-progress']; const VALID_LINK_TYPES = ['spec', 'draft', 'article', 'proposal', 'project']; const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i; +const OBJECTID_REGEX = /^[0-9a-f]{24}$/i; // MongoDB ObjectId format for legacy submissions const DATE_REGEX = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/; class ValidationError extends Error { @@ -99,17 +100,20 @@ function validateNumber(number) { if (!number) { throw new ValidationError('Missing required field: number'); } - // Can be either a UUID or a legacy numeric ID + // Can be either a UUID, MongoDB ObjectId, or a legacy numeric ID if (typeof number === 'string' && UUID_REGEX.test(number)) { return; // Valid UUID } + if (typeof number === 'string' && OBJECTID_REGEX.test(number)) { + return; // Valid MongoDB ObjectId (legacy) + } if (typeof number === 'number' && number > 0) { return; // Valid legacy numeric ID } if (typeof number === 'string' && /^\d+$/.test(number)) { return; // Valid numeric string } - throw new ValidationError(`Invalid number format: ${number}. Must be UUID or positive integer`); + throw new ValidationError(`Invalid number format: ${number}. Must be UUID, ObjectId, or positive integer`); } function validateTags(tags) { diff --git a/wants/60f4aacb952fb3beac8eaa21.md b/wants/60f4aacb952fb3beac8eaa21.md new file mode 100644 index 0000000..6fcbd93 --- /dev/null +++ b/wants/60f4aacb952fb3beac8eaa21.md @@ -0,0 +1,36 @@ +--- +title: I want a token field element +date: 2021-07-18T22:27:23.367Z +submitter: Sam Henri-Gold +number: 60f4aacb952fb3beac8eaa21 +tags: + - html + - forms + - ux +discussion: https://github.com/WebWeWant/webwewant.fyi/discussions/425 +status: discussing +related: + - title: "HTML Standard - Forms" + url: https://html.spec.whatwg.org/#forms + type: spec +--- + +I want a standard, accessible HTML form element similar to macOS's token field for addresses and item tags. + +Token fields (also known as tag inputs or chip inputs) are common UI patterns used across many applications for entering multiple discrete values like email addresses, tags, or categories. Currently, developers must create custom implementations using JavaScript, which often results in inconsistent accessibility and user experience. + +A native token field element would provide: + +- **Consistent user experience** across different websites and applications +- **Built-in accessibility** with proper ARIA attributes and keyboard navigation +- **Mobile-friendly interaction** patterns optimized for touch devices +- **Standardized styling** that can be customized with CSS while maintaining core functionality +- **Form integration** that works seamlessly with existing form submission and validation + +This would be particularly valuable for: +- Email address entry (To, CC, BCC fields) +- Tagging systems (blog tags, categories, labels) +- Multi-select with custom values +- Contact lists and address management + +By standardizing this common pattern, we can improve accessibility and reduce the JavaScript overhead currently required for this functionality. From 8e134594f8a081a0e1557e2d4d9c0b96f894090b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 1 Nov 2025 17:56:32 +0000 Subject: [PATCH 3/3] Improve validation comment clarity per code review Co-authored-by: aarongustafson <75736+aarongustafson@users.noreply.github.com> --- scripts/validate-want.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/validate-want.mjs b/scripts/validate-want.mjs index 4235cc5..3c8fb46 100644 --- a/scripts/validate-want.mjs +++ b/scripts/validate-want.mjs @@ -26,7 +26,7 @@ const __dirname = path.dirname(__filename); const VALID_STATUSES = ['discussing', 'complete', 'in-progress']; const VALID_LINK_TYPES = ['spec', 'draft', 'article', 'proposal', 'project']; const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i; -const OBJECTID_REGEX = /^[0-9a-f]{24}$/i; // MongoDB ObjectId format for legacy submissions +const OBJECTID_REGEX = /^[0-9a-f]{24}$/i; // MongoDB ObjectId hex string format (24 hex chars) for legacy submissions const DATE_REGEX = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/; class ValidationError extends Error {