Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WCAG-upgrade -- add an example for grouping #2182

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

WCAG-upgrade -- add an example for grouping #2182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
232 changes: 232 additions & 0 deletions common/scaffolding/grouping-en.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,232 @@
---
{
"title": "Grouping Content - Scaffolding",
"language": "en",
"altLangPage": "grouping-fr.html",
"dateModified": "2023-06-28"
}
---

<div class="alert alert-warning">
<p>The purpose of this page is to test all native content grouping related elements, if they are aligned with our design and are compliant to our accessibility guideline when used as is without any special customization. The following include all content grouping elements in the HTML5 specification and a few examples was inspired by the <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#grouping-content">WHATWG section 4.4</a> as August 2023. This page may not contain all the possible grouping content element combination.</p>
</div>

<h2>The <code>p</code> element</h2>
<p>This is some text in a paragraph.</p>
<pre><code>&lt;p> ... &lt;/p></code></pre>

<h2>The <code>hr</code> element</h2>
<hr>
<pre><code>&lt;hr></code></pre>

<h2>The <code>pre</code> element</h2>
<pre> Here is some pre formatted text </pre>
<pre><code>&lt;pre> ... &lt;/pre></code></pre>

<h2>The <code>blockquote</code> element</h2>
<blockquote>
<p>This is a blockquote example</p>
</blockquote>
<pre><code>&lt;blockquote&gt;
&lt;p&gt; ... &lt;/p&gt;
&lt;/blockquote&gt;</code></pre>

<h2>The <code>ol</code> element</h2>
<ol>
<li>Switzerland</li>
<li>United Kingdom</li>
<li>United States</li>
<li>Norway</li>
</ol>
<pre><code>&lt;ol&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ol&gt;</code></pre>

<h2>The <code>ul</code> element</h2>
<ul>
<li>Norway</li>
<li>Switzerland</li>
<li>United Kingdom</li>
<li>United States</li>
</ul>
<pre><code>&lt;ul&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;</code></pre>

<h2>The <code>menu</code> element</h2>
<menu>
<li><button>Copy</button></li>
<li><button>Cut</button></li>
<li><button>Paste</button></li>
<li>List item</li>
<li><a href="#">Anchor</a></li>
</menu>
<pre><code>&lt;menu&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/menu&gt;</code></pre>

<h2 id="dl-element">The <code>dl</code> element</h2>
<dl>
<dt> Term 1 </dt>
<dd> Description 1 </dd>
<dt> Term 2</dt>
<dd> Description 2 </dd>
</dl>
<h3>With two consecutive description </h3>
<dl>
<dt> Authors </dt>
<dd> John </dd>
<dd> Luke </dd>
<dt> Editor </dt>
<dd> Frank </dd>
</dl>
<h3>With two consecutive term </h3>
<dl>
<dt lang="en-US"> color </dt>
<dt lang="en-GB"> colour </dt>
<dd> A sensation which (in humans) derives from the ability of
the fine structure of the eye to distinguish three differently
filtered analyses of a view. </dd>
</dl>
<h3>With grouping division <code>&lt;div></code></h3>
<dl>
<div>
<dt> Last modified time </dt>
<dd> 2004-12-23T23:33Z </dd>
</div>
<div>
<dt> Recommended update interval </dt>
<dd> 60s </dd>
</div>
<div>
<dt> Authors </dt>
<dt> Editors </dt>
<dd> Robert Rothman </dd>
<dd> Daniel Jackson </dd>
</div>
</dl>
<h3>As glossary with term definition <code>&lt;dfn></code></h3>
<dl>
<dt><dfn>Apartment</dfn>, n.</dt>
<dd>An execution context grouping one or more threads with one or
more COM objects.</dd>
<dt><dfn>Flat</dfn>, n.</dt>
<dd>A deflated tire.</dd>
<dt><dfn>Home</dfn>, n.</dt>
<dd>The user's login directory.</dd>
</dl>
<h2>The <code>dt</code> element</h2>
<p>Demoed with the following element: <a href="#dl-element"><code>dl</code></a></p>
<h2>The <code>dd</code> element</h2>
<p>Demoed with the following element: <a href="#dl-element"><code>dl</code></a></p>

<pre><code>&lt;p&gt; Example 1 &lt;/p&gt;
&lt;dl&gt;
&lt;dt&gt; .. &lt;/dt&gt;
&lt;dd&gt; .. &lt;/dd&gt;
&lt;dd&gt; .. &lt;/dd&gt;
...
&lt;/dl&gt;


&lt;p&gt; Example 2 &lt;/p&gt;
&lt;dl&gt;
&lt;dt lang="en-US"&gt; &lt;dfn&gt;color&lt;/dfn&gt; &lt;/dt&gt;
&lt;dt lang="en-US"&gt; &lt;dfn&gt;color&lt;/dfn&gt; &lt;/dt&gt;
&lt;dd&gt; ... &lt;/dd&gt;
&lt;/dl&gt;

&lt;p&gt; Example 3 &lt;/p&gt;
&lt;dl&gt;
&lt;div&gt;
&lt;dt&gt; .. &lt;/dt&gt;
&lt;dd&gt; .. &lt;/dd&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;dt&gt; .. &lt;/dt&gt;
&lt;dd&gt; .. &lt;/dd&gt;
&lt;/div&gt;
&lt;/dl&gt;

&lt;p&gt; Example 4 &lt;/p&gt;
&lt;dl&gt;
&lt;dt&gt; .. &lt;/dt&gt;
&lt;dd&gt; .. &lt;/dd&gt;
&lt;dt&gt; .. &lt;/dt&gt;
&lt;dd&gt; .. &lt;/dd&gt;
...
&lt;/dl&gt;

&lt;p&gt; Example 5 &lt;/p&gt;
&lt;dl&gt;
&lt;dt&gt;&lt;dfn&gt; .. &lt;/dfn&gt; .. &lt;/dt&gt;
&lt;dd&gt; .. &lt;/dd&gt;
&lt;dt&gt;&lt;dfn&gt; .. &lt;/dfn&gt; .. &lt;/dt&gt;
&lt;dd&gt; .. &lt;/dd&gt;
...
&lt;/dl&gt;</code></pre>

<h2>The <code>figure</code> element</h2>
<figure>
<p>'Twas brillig, and the slithy toves<br>
Did gyre and gimble in the wabe;<br>
All mimsy were the borogoves,<br>
And the mome raths outgrabe.</p>
<figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
</figure>
<figure>
<figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
<p>'Twas brillig, and the slithy toves<br>
Did gyre and gimble in the wabe;<br>
All mimsy were the borogoves,<br>
And the mome raths outgrabe.</p>
</figure>
<pre><code>&lt;figure&gt;
&lt;p&gt;...&lt;p&gt;
&lt;figcaption&gt;...&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>

<h2>The <code>search</code> element</h2>
<search>
<form action="search.php">
<label for="query">Find an article</label>
<input id="query" name="q" type="search">
<button type="submit">Go!</button>
</form>
</search>
<pre><code>&lt;search&gt; &lt;form&gt;
...
&lt;/form&gt;&lt;/search&gt;</code></pre>

<h2>The <code>div</code> element</h2>
<p> Multiple div's </p>
<div><div>
<div>
<h3>This is a heading in a div element</h3>
</div>
<div>
<p>This is some text in a div element.</p>
</div>
</div></div>

<p> Empty div </p>
<div></div>

<pre><code>&lt;p&gt; Multiple div's &lt;/p&gt;
&lt;div&gt;&lt;div&gt;
&lt;div&gt;
&lt;h3&gt; ... &lt;/h3&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;p&gt; ... &lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;

&lt;p&gt; Empty div &lt;/p&gt;
&lt;div&gt;&lt;/div&gt;</code></pre>
Loading
Loading