-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Content - Merge pull request #2115 from shiva-sc/list
WCAG upgrade -- add a test page for helper lists Content - List utilities - Working examples
- Loading branch information
Showing
5 changed files
with
1,155 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| { | ||
| "@context": { | ||
| "@version": 1.1, | ||
| "dct": "http://purl.org/dc/terms/", | ||
| "title": { "@id": "dct:title", "@container": "@language" }, | ||
| "description": { "@id": "dct:description", "@container": "@language" }, | ||
| "modified": "dct:modified" | ||
| }, | ||
| "title": { | ||
| "en": "List", | ||
| "fr": "Listes" | ||
| }, | ||
| "description": { | ||
| "en": "Example of all the possible styled list variant", | ||
| "fr": "Example de toutes les possibles variantes de personnalisation de liste." | ||
| }, | ||
| "modified": "2023-03-05", | ||
| "componentName": "list", | ||
| "processing": "baseline", | ||
| "status": "stable", | ||
| "pages": { | ||
| "examples": [ | ||
| { | ||
| "title": "Lists", | ||
| "language": "en", | ||
| "path": "lists-en.html" | ||
| }, | ||
| { | ||
| "title": "Listes", | ||
| "language": "fr", | ||
| "path": "lists-fr.html" | ||
| }, | ||
| { | ||
| "title": "List group", | ||
| "language": "en", | ||
| "path": "list-group-en.html" | ||
| }, | ||
| { | ||
| "title": "Liste groupé", | ||
| "language": "fr", | ||
| "path": "list-group-fr.html" | ||
| } | ||
| ] | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| --- | ||
| { | ||
| "title": "List group", | ||
| "language": "en", | ||
| "altLangPage": "list-group-fr.html", | ||
| "breadcrumbs": [ | ||
| { "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-fr.html" } | ||
| ], | ||
| "dateModified": "2023-03-05" | ||
| } | ||
| --- | ||
|
|
||
| <div class="wb-prettify all-pre"></div> | ||
| <h2>Basic use: Default</h2> | ||
| <p>No links:</p> | ||
| <ul class="list-group"> | ||
| <li class="list-group-item">Text</li> | ||
| <li class="list-group-item">Text</li> | ||
| </ul> | ||
| <p>With links:</p> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item">Link text</a> | ||
| <a href="#" class="list-group-item active">Link text (active item)</a> | ||
| <a href="#" class="list-group-item">Link text</a> | ||
| </div> | ||
| <h3>Code</h3> | ||
| <pre><code><p>No links:</p> | ||
| <ul class="list-group"> | ||
| <li class="list-group-item">Text</li> | ||
| <li class="list-group-item">Text</li> | ||
| </ul> | ||
| <p>With links:</p> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item">Link text</a> | ||
| <a href="#" class="list-group-item active">Link text (active item)</a> | ||
| <a href="#" class="list-group-item">Link text</a> | ||
| </div></code></pre> | ||
|
|
||
| <h2>Enhanced use</h2> | ||
| <h3>Colours</h3> | ||
| <p>No links:</p> | ||
| <ul class="list-group"> | ||
| <li class="list-group-item list-group-item-success">Text</li> | ||
| <li class="list-group-item list-group-item-info">Text</li> | ||
| <li class="list-group-item list-group-item-warning">Text</li> | ||
| <li class="list-group-item list-group-item-danger">Text</li> | ||
| </ul> | ||
| <p>With links:</p> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item list-group-item-success">Link text</a> | ||
| <a href="#" class="list-group-item list-group-item-info">Link text</a> | ||
| <a href="#" class="list-group-item list-group-item-warning">Link text</a> | ||
| <a href="#" class="list-group-item list-group-item-danger">Link text</a> | ||
| </div> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item list-group-item-success active">Link text (active item)</a> | ||
| <a href="#" class="list-group-item list-group-item-info active">Link text (active item)</a> | ||
| <a href="#" class="list-group-item list-group-item-warning active">Link text (active item)</a> | ||
| <a href="#" class="list-group-item list-group-item-danger active">Link text (active item)</a> | ||
| </div> | ||
| <h4>Code</h4> | ||
| <pre><code><p>No links:</p> | ||
| <ul class="list-group"> | ||
| <li class="list-group-item list-group-item-success">Text</li> | ||
| <li class="list-group-item list-group-item-info">Text</li> | ||
| <li class="list-group-item list-group-item-warning">Text</li> | ||
| <li class="list-group-item list-group-item-danger">Text</li> | ||
| </ul> | ||
| <p>With links:</p> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item list-group-item-success">Link text</a> | ||
| <a href="#" class="list-group-item list-group-item-info">Link text</a> | ||
| <a href="#" class="list-group-item list-group-item-warning">Link text</a> | ||
| <a href="#" class="list-group-item list-group-item-danger">Link text</a> | ||
| </div> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item list-group-item-success active">Link text (active item)</a> | ||
| <a href="#" class="list-group-item list-group-item-info active">Link text (active item)</a> | ||
| <a href="#" class="list-group-item list-group-item-warning active">Link text (active item)</a> | ||
| <a href="#" class="list-group-item list-group-item-danger active">Link text (active item)</a> | ||
| </div></code></pre> | ||
|
|
||
| <h3>Badges</h3> | ||
| <div class="panel-body"> | ||
| <p>No links:</p> | ||
| <ul class="list-group"> | ||
| <li class="list-group-item"><span class="badge">14</span> Text</li> | ||
| <li class="list-group-item"><span class="badge">2</span> Text</li> | ||
| </ul> | ||
| <p>With links:</p> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item"><span class="badge">14</span> Link text</a> | ||
| <a href="#" class="list-group-item active"><span class="badge">2</span> Link text (active item)</a> | ||
| <a href="#" class="list-group-item"><span class="badge">5</span> Link text</a> | ||
| </div> | ||
| </div> | ||
| <h4>Code</h4> | ||
| <pre><code><div class="panel-body"> | ||
| <p>No links:</p> | ||
| <ul class="list-group"> | ||
| <li class="list-group-item"><span class="badge">14</span> Text</li> | ||
| <li class="list-group-item"><span class="badge">2</span> Text</li> | ||
| </ul> | ||
| <p>With links:</p> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item"><span class="badge">14</span> Link text</a> | ||
| <a href="#" class="list-group-item active"><span class="badge">2</span> Link text (active item)</a> | ||
| <a href="#" class="list-group-item"><span class="badge">5</span> Link text</a> | ||
| </div> | ||
| </div></code></pre> | ||
|
|
||
| <h3>Complex content </h3> | ||
| <p> The following content are not compliant to accessibility and they are there only for example purpose. <a href="#skipComplexContent">Skip this non-accessible content section.</a></p> | ||
| <p>No links:</p> | ||
| <ul class="list-group"> | ||
| <li class="list-group-item"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </li> | ||
| <li class="list-group-item"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </li> | ||
| </ul> | ||
| <p>With links:</p> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </a> | ||
| <a href="#" class="list-group-item active"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </a> | ||
| <a href="#" class="list-group-item"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </a> | ||
| </div> | ||
| <h4>Code</h4> | ||
| <pre><code><p>No links:</p> | ||
| <ul class="list-group"> | ||
| <li class="list-group-item"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </li> | ||
| <li class="list-group-item"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </li> | ||
| </ul> | ||
| <p>With links:</p> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </a> | ||
| <a href="#" class="list-group-item active"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </a> | ||
| <a href="#" class="list-group-item"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </a> | ||
| </div></code></pre> | ||
| <div id="skipComplexContent"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| --- | ||
| { | ||
| "title": "Liste groupé", | ||
| "language": "fr", | ||
| "altLangPage": "list-group-en.html", | ||
| "breadcrumbs": [ | ||
| { "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-fr.html" } | ||
| ], | ||
| "dateModified": "2023-03-05" | ||
| } | ||
| --- | ||
|
|
||
| <div class="wb-prettify all-pre"></div> | ||
| <p>Cette page nécessite une traduction.</p> | ||
| <div lang="en"> | ||
| <h2>Basic use: Default</h2> | ||
| <p>No links:</p> | ||
| <ul class="list-group"> | ||
| <li class="list-group-item">Text</li> | ||
| <li class="list-group-item">Text</li> | ||
| </ul> | ||
| <p>With links:</p> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item">Link text</a> | ||
| <a href="#" class="list-group-item active">Link text (active item)</a> | ||
| <a href="#" class="list-group-item">Link text</a> | ||
| </div> | ||
| <h3>Code</h3> | ||
| <pre><code><p>No links:</p> | ||
| <ul class="list-group"> | ||
| <li class="list-group-item">Text</li> | ||
| <li class="list-group-item">Text</li> | ||
| </ul> | ||
| <p>With links:</p> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item">Link text</a> | ||
| <a href="#" class="list-group-item active">Link text (active item)</a> | ||
| <a href="#" class="list-group-item">Link text</a> | ||
| </div></code></pre> | ||
|
|
||
| <h2>Enhanced use</h2> | ||
| <h3>Colours</h3> | ||
| <p>No links:</p> | ||
| <ul class="list-group"> | ||
| <li class="list-group-item list-group-item-success">Text</li> | ||
| <li class="list-group-item list-group-item-info">Text</li> | ||
| <li class="list-group-item list-group-item-warning">Text</li> | ||
| <li class="list-group-item list-group-item-danger">Text</li> | ||
| </ul> | ||
| <p>With links:</p> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item list-group-item-success">Link text</a> | ||
| <a href="#" class="list-group-item list-group-item-info">Link text</a> | ||
| <a href="#" class="list-group-item list-group-item-warning">Link text</a> | ||
| <a href="#" class="list-group-item list-group-item-danger">Link text</a> | ||
| </div> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item list-group-item-success active">Link text (active item)</a> | ||
| <a href="#" class="list-group-item list-group-item-info active">Link text (active item)</a> | ||
| <a href="#" class="list-group-item list-group-item-warning active">Link text (active item)</a> | ||
| <a href="#" class="list-group-item list-group-item-danger active">Link text (active item)</a> | ||
| </div> | ||
| <h4>Code</h4> | ||
| <pre><code><p>No links:</p> | ||
| <ul class="list-group"> | ||
| <li class="list-group-item list-group-item-success">Text</li> | ||
| <li class="list-group-item list-group-item-info">Text</li> | ||
| <li class="list-group-item list-group-item-warning">Text</li> | ||
| <li class="list-group-item list-group-item-danger">Text</li> | ||
| </ul> | ||
| <p>With links:</p> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item list-group-item-success">Link text</a> | ||
| <a href="#" class="list-group-item list-group-item-info">Link text</a> | ||
| <a href="#" class="list-group-item list-group-item-warning">Link text</a> | ||
| <a href="#" class="list-group-item list-group-item-danger">Link text</a> | ||
| </div> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item list-group-item-success active">Link text (active item)</a> | ||
| <a href="#" class="list-group-item list-group-item-info active">Link text (active item)</a> | ||
| <a href="#" class="list-group-item list-group-item-warning active">Link text (active item)</a> | ||
| <a href="#" class="list-group-item list-group-item-danger active">Link text (active item)</a> | ||
| </div></code></pre> | ||
|
|
||
| <h3>Badges</h3> | ||
| <div class="panel-body"> | ||
| <p>No links:</p> | ||
| <ul class="list-group"> | ||
| <li class="list-group-item"><span class="badge">14</span> Text</li> | ||
| <li class="list-group-item"><span class="badge">2</span> Text</li> | ||
| </ul> | ||
| <p>With links:</p> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item"><span class="badge">14</span> Link text</a> | ||
| <a href="#" class="list-group-item active"><span class="badge">2</span> Link text (active item)</a> | ||
| <a href="#" class="list-group-item"><span class="badge">5</span> Link text</a> | ||
| </div> | ||
| </div> | ||
| <h4>Code</h4> | ||
| <pre><code><div class="panel-body"> | ||
| <p>No links:</p> | ||
| <ul class="list-group"> | ||
| <li class="list-group-item"><span class="badge">14</span> Text</li> | ||
| <li class="list-group-item"><span class="badge">2</span> Text</li> | ||
| </ul> | ||
| <p>With links:</p> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item"><span class="badge">14</span> Link text</a> | ||
| <a href="#" class="list-group-item active"><span class="badge">2</span> Link text (active item)</a> | ||
| <a href="#" class="list-group-item"><span class="badge">5</span> Link text</a> | ||
| </div> | ||
| </div></code></pre> | ||
|
|
||
| <h3>Complex content </h3> | ||
| <p> The following content are not compliant to accessibility and they are there only for example purpose. <a href="#skipComplexContent">Skip this non-accessible content section.</a></p> | ||
| <p>No links:</p> | ||
| <ul class="list-group"> | ||
| <li class="list-group-item"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </li> | ||
| <li class="list-group-item"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </li> | ||
| </ul> | ||
| <p>With links:</p> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </a> | ||
| <a href="#" class="list-group-item active"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </a> | ||
| <a href="#" class="list-group-item"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </a> | ||
| </div> | ||
| <h4>Code</h4> | ||
| <pre><code><p>No links:</p> | ||
| <ul class="list-group"> | ||
| <li class="list-group-item"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </li> | ||
| <li class="list-group-item"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </li> | ||
| </ul> | ||
| <p>With links:</p> | ||
| <div class="list-group"> | ||
| <a href="#" class="list-group-item"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </a> | ||
| <a href="#" class="list-group-item active"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </a> | ||
| <a href="#" class="list-group-item"> | ||
| <h3 class="list-group-item-heading">Heading</h3> | ||
| <p class="list-group-item-text">Content</p> | ||
| </a> | ||
| </div></code></pre> | ||
| <div id="skipComplexContent"></div> | ||
| </div> |
Oops, something went wrong.