Skip to content

Commit e564f03

Browse files
BrahimMahadiBrahimMahadi
committed
GC Combo-box component
1 parent 32f3e31 commit e564f03

File tree

7 files changed

+978
-13
lines changed

7 files changed

+978
-13
lines changed

‎_data/components.json‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -414,6 +414,169 @@
414414
}
415415
]
416416
}
417+
,{
418+
"@context": {
419+
"@version": 1.0,
420+
"dct": "http://purl.org/dc/terms/",
421+
"title": { "@id": "dct:title", "@container": "@language" },
422+
"description": { "@id": "dct:description", "@container": "@language" },
423+
"modified": "dct:modified"
424+
},
425+
"title": {
426+
"en": "GC Combo Box",
427+
"fr": "Boîte Combo GC"
428+
},
429+
"description": {
430+
"en": "An accessible multi-select combo box component that implements WCAG 2.1 accessibility standards and provides a modern, user-friendly interface for selecting multiple items from a list.",
431+
"fr": "Un composant de boîte combo multi-sélection accessible qui met en œuvre les normes d'accessibilité WCAG 2.1 et fournit une interface conviviale et moderne pour sélectionner plusieurs éléments dans une liste."
432+
},
433+
"modified": "2026-01-22",
434+
"componentName": "combo-box",
435+
"status": "provisional",
436+
"version": "1.0.0",
437+
"pages": {
438+
"examples": [
439+
{
440+
"title": "GC Combo Box - working example",
441+
"language": "en",
442+
"path": "combo-box-en.html"
443+
},
444+
{
445+
"title": "Boîte Combo GC - example pratique",
446+
"language": "fr",
447+
"path": "combo-box-fr.html"
448+
}
449+
],
450+
"docs": [
451+
{
452+
"title": "GC Combo Box documentation",
453+
"language": "en",
454+
"path": "combo-box-docs-en.html"
455+
},
456+
{
457+
"title": "Boîte Combo GC - documentation",
458+
"language": "fr",
459+
"path": "combo-box-docs-fr.html"
460+
}
461+
],
462+
"reports": [
463+
{
464+
"title": "Accessibility assessment #1",
465+
"language": "en",
466+
"path": "reports/a11y-1-en.html"
467+
},
468+
{
469+
"title": "Évaluation de l'accessibilité #1",
470+
"language": "fr",
471+
"path": "reports/a11y-1-fr.html"
472+
}
473+
]
474+
},
475+
"a11yGuidance": "No accessibility guidance.",
476+
"variations": [
477+
{
478+
"name": {
479+
"en": "GC Combo Box",
480+
"fr": "Boîte Combo GC"
481+
},
482+
"status": "provisional",
483+
"description": {
484+
"en": "A multi-select combo box with tag display, dynamic filtering, and full keyboard accessibility.",
485+
"fr": "Une boîte combo multi-sélection avec affichage d'étiquettes, filtrage dynamique et accessibilité complète au clavier."
486+
},
487+
"iteration": "_:iteration_combo_box_1",
488+
"example": [
489+
{
490+
"en": { "href": "combo-box-en.html", "text": "GC Combo Box" },
491+
"fr": { "href": "combo-box-fr.html", "text": "Boîte Combo GC" }
492+
}
493+
],
494+
"implementation": [
495+
"_:implement_combo_box"
496+
],
497+
"history": [
498+
]
499+
}
500+
],
501+
"implementation": [
502+
{
503+
"@id": "_:implement_combo_box",
504+
"iteration": "_:iteration_combo_box_1",
505+
"name": {
506+
"en": "Standard",
507+
"fr": "Standard"
508+
},
509+
"introduction": {
510+
"en": "This implementation is meant for developers/publishers adding the component manually.",
511+
"fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement."
512+
},
513+
"instructions": {
514+
"en": [
515+
"Refer to the following code samples."
516+
],
517+
"fr": [
518+
"Référez-vous au code qui suit."
519+
]
520+
},
521+
"notes": {
522+
"en": [
523+
"The component supports keyboard navigation including arrow keys, Enter, Escape, and Backspace.",
524+
"Selected items are displayed as removable tags.",
525+
"Already selected items are automatically filtered out from the dropdown to prevent duplicate selections."
526+
],
527+
"fr": [
528+
"Le composant supporte la navigation au clavier incluant les flèches, Entrée, Échapper et Retour arrière.",
529+
"Les éléments sélectionnés sont affichés sous forme d'étiquettes supprimables.",
530+
"Les éléments déjà sélectionnés sont automatiquement filtrés de la liste déroulante pour éviter les sélections en double."
531+
]
532+
},
533+
"sample": {
534+
"en": [
535+
{
536+
"@type": "source-code",
537+
"description": "Combo box example:",
538+
"code": "<div class=\"combo-box-wrapper\">\n\t<label for=\"combo-box-input\" class=\"combo-box-label\">Select Items:</label>\n\t<div class=\"combo-box-container\">\n\t\t<div class=\"tags-container\" id=\"tagsContainer\" role=\"group\" aria-label=\"Selected items\"></div>\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tid=\"combo-box-input\"\n\t\t\tclass=\"combo-box-input\"\n\t\t\tplaceholder=\"Type to search or add items...\"\n\t\t\tautocomplete=\"off\"\n\t\t\taria-label=\"Search and select items\"\n\t\t\taria-autocomplete=\"list\"\n\t\t\taria-controls=\"combo-box-list\"\n\t\t\taria-expanded=\"false\"\n\t\t>\n\t</div>\n\t<ul\n\t\tid=\"combo-box-list\"\n\t\tclass=\"combo-box-list\"\n\t\trole=\"listbox\"\n\t\taria-label=\"Available options\"\n\t\thidden\n\t></ul>\n</div>"
539+
}
540+
],
541+
"fr": [
542+
{
543+
"@type": "source-code",
544+
"description": "Exemple du Boîte Combo :",
545+
"code": "<div class=\"combo-box-wrapper\">\n\t<label for=\"combo-box-input\" class=\"combo-box-label\">Sélectionnez les éléments :</label>\n\t<div class=\"combo-box-container\">\n\t\t<div class=\"tags-container\" id=\"tagsContainer\" role=\"group\" aria-label=\"Éléments sélectionnés\"></div>\n\t\t<input\n\t\t\ttype=\"text\"\n\t\t\tid=\"combo-box-input\"\n\t\t\tclass=\"combo-box-input\"\n\t\t\tplaceholder=\"Tapez pour rechercher ou ajouter des éléments...\"\n\t\t\tautocomplete=\"off\"\n\t\t\taria-label=\"Rechercher et sélectionner des éléments\"\n\t\t\taria-autocomplete=\"list\"\n\t\t\taria-controls=\"combo-box-list\"\n\t\t\taria-expanded=\"false\"\n\t\t>\n\t</div>\n\t<ul\n\t\tid=\"combo-box-list\"\n\t\tclass=\"combo-box-list\"\n\t\trole=\"listbox\"\n\t\taria-label=\"Options disponibles\"\n\t\thidden\n\t></ul>\n</div>"
546+
}
547+
]
548+
}
549+
}
550+
],
551+
"iteration": [
552+
{
553+
"@id": "_:iteration_combo_box_1",
554+
"name": "GC Combo Box - Iteration 1",
555+
"date": "2026-01",
556+
"detectableBy": ".combo-box-wrapper",
557+
"assets": [
558+
{
559+
"@type": "source-code",
560+
"@language": "en",
561+
"description": "Code sample",
562+
"code": "<div class=\"combo-box-wrapper\"><label for=\"combo-box-input\">Select Items:</label><div class=\"combo-box-container\"><div class=\"tags-container\" id=\"tagsContainer\"></div><input type=\"text\" id=\"combo-box-input\" class=\"combo-box-input\" aria-controls=\"combo-box-list\"></div><ul id=\"combo-box-list\" class=\"combo-box-list\" role=\"listbox\" hidden></ul></div>"
563+
}
564+
]
565+
}
566+
],
567+
"changesets": [
568+
{
569+
"@id": "_:cs_combo_box_1",
570+
"name": "Accessible Combo Box",
571+
"status": "provisional",
572+
"baseOnIteration": "_:iteration_combo_box_1",
573+
"detectableBy": ".combo-box-wrapper",
574+
"layout": "Not applicable",
575+
"style": "Bootstrap-inspired styling with modern animations and accessibility focus",
576+
"semantic": "Uses ARIA attributes for screen readers including listbox role, option role, and aria-expanded state"
577+
}
578+
]
579+
}
417580
,{
418581
"@context": {
419582
"@version": 1.0,

‎components/combo-box/combo-box-docs-en.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
{
3+
"layout": "documentation",
4+
"altLangPage": "combo-box-docs-fr.html",
5+
"dateModified": "2026-01-27",
6+
"index_json": "index.json-ld",
7+
"description": "Combo-box - Documentation",
8+
"language": "en",
9+
"title": "Combo-box - Documentation"
10+
}
11+
---

‎components/combo-box/combo-box-docs-fr.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
{
3+
"layout": "documentation",
4+
"altLangPage": "combo-box-docs-en.html",
5+
"dateModified": "2026-01-27",
6+
"index_json": "index.json-ld",
7+
"description": "Combo-box - Documentation",
8+
"language": "fr",
9+
"title": "Combo-box - Documentation"
10+
}
11+
---

‎components/combo-box/combo-box-en.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
title: GC Combo Box Web Component
3+
dateModified: 2026-03-10
4+
description: "An accessible combo-box component that implements WCAG 2.1 accessibility standards and provides a modern, user-friendly interface for selecting multiple items."
5+
lang: en
6+
altLangPage: combo-box-fr.html
7+
---
8+
9+
10+
<combo-box-component
11+
id="demo"
12+
label="Select Technologies"
13+
placeholder="Select technologies..."
14+
options='["JavaScript", "TypeScript", "React", "Vue", "Angular", "Node.js", "Express", "Python", "Django", "Flask", "Java", "Spring Boot", "HTML", "CSS"]'>
15+
</combo-box-component>

0 commit comments

Comments
 (0)