diff --git a/scripts/validate-want.mjs b/scripts/validate-want.mjs index 693db3c..3c8fb46 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 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 { @@ -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.