WCAG upgrade - Create test page for Display and Layout #2224

polmih · 2023-08-09T03:06:18Z

WCAG upgrade - Create test page for Display and Layout

duboisp

Incomplete review

Remove all the inline style

duboisp · 2023-10-04T19:24:14Z

_data/common.json

+ "componentName": "layout",
+ "status": "stable",
+ "pages": {
+ "docs": [


Suggested change

"docs": [

"examples": [

duboisp · 2023-10-04T19:45:47Z

common/display/display-en.html

+<div class="well">
+ <div class="row">
+ <div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 1</div>
+ <div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 2</div>
+ <div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 3</div>
+ <!-- Add clearfix class to clear floated elements -->
+ <div class="clearfix"></div>
+ </div>
+ <p class="well">This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.</p>


I suggest to have an example that don't rely on any inline style, something like:

Suggested change

<div class="well">

<div class="row">

<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 1</div>

<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 2</div>

<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 3</div>



<div class="clearfix"></div>

</div>

<p class="well">This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.</p>

<div class="well">

<div class="pull-left bg-darker text-white">Column 1</div>

<div class="clearfix"></div>

<div class="pull-left bg-darker text-white">Column 2</div>

<div class="pull-left bg-darker text-white">Column 3</div>

<div class="clearfix"></div>

<p class="well">This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.</p>

duboisp · 2023-10-04T19:48:45Z

common/display/display-en.html

+ <div class="center-block well" style="width: 200px; height: 200px; background-color: #ffffff;">
+ This element is centered horizontally within its parent container.
+ </div>


May be an example that use an image will be easier to demo "centre-block" without any specific width.

duboisp · 2023-10-04T19:50:27Z

common/display/display-en.html

+&lt;/div&gt;</code></pre>
+
+<h4>Bootstrap 3 <code>.pull-left</code> class working example</h4>
+<div class="well" style="height: 115px;">


Suggested change

<div class="well" style="height: 115px;">

<div class="well">

duboisp · 2023-10-04T19:51:20Z

common/display/display-en.html

+<div class="clearfix"></div>
+&lt;div class="clearfix"&gt; &lt;/div&gt;


Is this necessary here? the pull-right example don't seem to need that

Suggested change

<div class="clearfix"></div>

<div class="clearfix"> </div>

duboisp · 2023-10-04T19:54:29Z

common/display/display-en.html

+<h4>WET-BOEW <code>.lbx-hide-gal </code>class working example</h4><div class="well">
+ <div class="lbx-hide-gal well">
+ This element is hidden as part of a lightbox gallery.
+ </div>
+</div>
+<h4>Code sample</h4>
+<pre><code>&lt;div class="well"&gt;
+ &lt;div class="<strong>lbx-hide-gal</strong> well"&gt;
+ This element is hidden as part of a lightbox gallery.
+ &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<h4>WET-BOEW <code>.mfp-hide </code>class working example</h4><div class="well">
+ <div class="mfp-hide well">
+ This element is hidden as part of a Magnific Popup modal.
+ </div>
+</div>


Those seem to be wet-boew plugin specific, should we have it here?

duboisp · 2023-10-04T19:56:41Z

common/display/display-en.html

+&lt;/div&gt;</code></pre>
+
+<h4>WET-BOEW <code>.wb-show-onfocus </code>class working example</h4><div class="well">
+ <input type="text" class="wb-show-onfocus well" placeholder="Focus on this input to reveal the element">


Avoid placeholder attribute.

This input are missing a label.

Would this example be easier if we try to show a link, like the skip-links?

duboisp · 2023-10-04T19:59:48Z

common/layout/layout-en.html

We will need to rename this folder as it is a reserved keywork with our build system.

May be like "grid-layout" or something similar.

We would need to remove examples that are specific to some of other component/plugin.

hanseller

Applied the changes to my branch PR-2224

duboisp

@hanseller see the requested change as discussed.

duboisp · 2024-03-22T18:44:26Z

common/grid-layout/grid_baseline-en.html

+ "share": "true"
+}
+---
+
+
+<h3>Grid baseline (containers)</h3>
+
+<h4>GCWeb Grid Baseline</h4>
+<p>Please note that the `.container-fixed` mixin is used to apply the appropriate styling for the fixed-width container.</p>
+<div class="well">
+<div class="container">
+ <!-- Content of the container -->
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+</div>
+</div>
+<h4>Code Sample</h4>
+<pre><code>&lt;div class="well"&gt;&lt;div class="container"&gt;
+ <!-- Content of the container -->
+ &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
+&lt;/div&gt;&lt;/div&gt;</code></pre>


Suggested change

"share": "true"

}

---

<h3>Grid baseline (containers)</h3>

<h4>GCWeb Grid Baseline</h4>

<p>Please note that the `.container-fixed` mixin is used to apply the appropriate styling for the fixed-width container.</p>

<div class="well">

<div class="container">



<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

</div>

<h4>Code Sample</h4>

<pre><code><div class="well"><div class="container">



<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div></div></code></pre>

"share": "true",

"layout": "no-container"

}

---

<div class="container">

<h1>Grid baseline (containers)</h1>

<p>Please note that the `.container-fixed` mixin is used to apply the appropriate styling for the fixed-width container.</p>

</div>

<div class="container">



<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

<div class="container">

<h2>Code Sample</h2>

<pre><code><div class="well"><div class="container">



<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div></div></code></pre>

</div>

duboisp · 2024-03-22T18:47:10Z

common/grid-layout/align_columns-en.html

Please remove, we already have that example here: https://github.com/wet-boew/GCWeb/blob/master/components/header-rwd/well-header-rwd-en.html

duboisp · 2024-03-22T18:48:00Z

common/grid-layout/authentication-en.html

Please remove, we already have this component here: https://github.com/wet-boew/GCWeb/tree/master/sites/authentication

duboisp · 2024-03-22T18:48:39Z

common/grid-layout/index.json-ld

+ "componentName": "grid-layout",
+ "status": "stable",
+ "pages": {
+ "examples": [


Add the other web page in this array

duboisp · 2024-03-22T18:49:37Z

common/grid-layout/layout-en.html

+
+<h3 id="flexbox">Flexbox</h3>
+
+<h4>WET-BOEW <code>.d-flex</code> class working example</h4>


Suggested change

<h4>WET-BOEW <code>.d-flex</code> class working example</h4>

<h4><code>.d-flex</code> class working example</h4>

Remove the "WET-BOEW" as it don't directly support the example but relate more to how to maintain that CSS/features

duboisp · 2024-03-22T18:51:00Z

common/grid-layout/layout-en.html

+<h4>GCWeb override - Site footer <code>.row</code></h4>
+<div class="well">
+<footer class="gcweb-override-site-footer">
+ <div class="container">
+ <div class="row">
+ <div class="col-md-4">
+ <h5>About Us</h5>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget est eu libero fringilla accumsan.</p>
+ </div>
+ <div class="col-md-4">
+ <h5>Contact Us</h5>
+ <p>Email: [email protected]<br>Phone: 123-456-7890</p>
+ </div>
+ <div class="col-md-4">
+ <h5>Follow Us</h5>
+ <ul class="list-inline">
+ <li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-facebook"></i></a></li>
+ <li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-twitter"></i></a></li>
+ <li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-instagram"></i></a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+</footer>
+</div>


You can remove it.

duboisp · 2024-03-22T18:52:10Z

common/grid-layout/logo-en.html

You can remove this example, we already have it here: https://github.com/wet-boew/GCWeb/tree/master/sites/header

duboisp · 2024-03-22T18:52:42Z

common/grid-layout/menu_items-en.html

You can remove this page, we already have it here: https://github.com/wet-boew/GCWeb/tree/master/sites/gcweb-menu

duboisp · 2024-03-22T18:54:17Z

common/grid-layout/responsive_columns-en.html

Move this example here: https://github.com/wet-boew/GCWeb/tree/master/components/gc-corporate

And rename those page + create an index.json-ld file corresponding to that component.

duboisp · 2024-03-22T18:55:37Z

common/grid-layout/site_footer-en.html

You can remove this page, we already have it here: https://github.com/wet-boew/GCWeb/tree/master/sites/footers

duboisp

Also remove wet-boew, bootstrap 3 reference in the various title where do provide content value.

duboisp · 2024-03-25T18:46:39Z

common/display/display-en.html

+
+<h2 id="bootstrap">Bootstrap</h2>
+
+<h3 id="float">Float</h3>
+
+<h4>Bootstrap 3 <code> .clearfix</code>working example</h4>
+<div class="well">
+ <div class="row">
+ <div class="pull-left bg-darker text-white col-md-3 well">Column 1</div>
+ <div class="pull-left bg-darker text-whitecol-md-3 well">Column 2</div>
+ <div class="pull-left bg-darker text-white col-md-3 well">Column 3</div>
+ <!-- Add clearfix class to clear floated elements -->
+ <div class="clearfix"></div>
+ </div>
+ <p class="well">This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.</p>
+</div>
+<h4>Code sample</h4>
+<pre><code>&lt;div class="well"&gt;


Suggested change

<h2 id="bootstrap">Bootstrap</h2>

<h3 id="float">Float</h3>

<h4>Bootstrap 3 <code> .clearfix</code>working example</h4>

<div class="well">

<div class="row">

<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div>

<div class="pull-left bg-darker text-whitecol-md-3 well">Column 2</div>

<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div>



<div class="clearfix"></div>

</div>

<p class="well">This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.</p>

</div>

<h4>Code sample</h4>

<pre><code><div class="well">

<h2 id="float">Float</h2>

<h3><code>.clearfix</code>working example</h3>

<div class="well">

<div class="row">

<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div>

<div class="pull-left bg-darker text-whitecol-md-3 well">Column 2</div>

<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div>



<div class="clearfix"></div>

</div>

<p class="well">This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.</p>

</div>

<h4>Code sample</h4>

<pre><code><div class="well">

Here what this section can look like

<h2>Float</h2> <h3>Clear fix <code>clearfix</code></h3> <div class="well"> <div class="pull-left bg-info">( Row 1, Column 1 )</div> <div class="pull-left bg-info">( Row 1, Column 2 )</div> <div class="pull-left bg-info">( Row 1, Column 3 )</div>  <div class="clearfix"></div> <div class="pull-left bg-info">Row 2, Column 1</div> <div class="pull-left bg-info">Row 2, Column 2</div> <div class="pull-left bg-info">Row 2, Column 3</div> <div class="pull-left bg-info">Row 2, Column 4</div> </div> <h4>Code sample</h4>

duboisp · 2024-03-25T19:11:01Z

common/display/display-en.html

+ <div class="sr-only-focusable well">
+ This element is visually hidden but remains accessible to screen readers, and it can be focused by keyboard navigation.
+ </div>


Use a focusable element, like an anchor <a href="#">

duboisp · 2024-03-25T19:12:18Z

common/display/display-en.html

+<h4>WET-BOEW <code>.opct-20 </code>class working example</h4><div class="well">
+ <div class="opct-20 well">
+ This element has an opacity of 0.2 (20%).
+ </div>
+</div>
+<h4>Code sample</h4>
+<pre><code>&lt;div class="well"&gt;
+ &lt;div class="<strong>opct-20</strong> well"&gt;
+ This element has an opacity of 0.2 (20%).
+ &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<h4>WET-BOEW <code>.opct-90 </code>class working example</h4><div class="well">
+ <div class="opct-90 well">
+ This element has an opacity of 0.9 (90%).
+ </div>
+</div>
+<h4>Code sample</h4>
+<pre><code>&lt;div class="well"&gt;
+ &lt;div class="<strong>opct-90</strong> well"&gt;
+ This element has an opacity of 0.9 (90%).


Missing an example for:

opct-30 opct-40 opct-50 opct-60 opct-70 opct-80

duboisp · 2024-03-25T19:14:14Z

common/display/display-en.html

+<h4>WET-BOEW <code>.lbx-hide-gal </code>class working example</h4><div class="well">
+ <div class="lbx-hide-gal well">
+ This element is hidden as part of a lightbox gallery.
+ </div>
+</div>
+<h4>Code sample</h4>
+<pre><code>&lt;div class="well"&gt;
+ &lt;div class="<strong>lbx-hide-gal</strong> well"&gt;
+ This element is hidden as part of a lightbox gallery.
+ &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<h4>WET-BOEW <code>.mfp-hide </code>class working example</h4><div class="well">
+ <div class="mfp-hide well">
+ This element is hidden as part of a Magnific Popup modal.
+ </div>
+</div>
+<h4>Code sample</h4>
+<pre><code>&lt;div class="well"&gt;
+ &lt;div class="<strong>mfp-hide</strong> well"&gt;
+ This element is hidden as part of a Magnific Popup modal.
+ &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+


mfp-hide + lbx-hide-fal example can be removed

duboisp · 2024-03-25T19:22:16Z

common/display/display-en.html

+<h4>WET-BOEW <code>.full-width </code>class working example</h4><div class="well">
+ <div class="full-width">
+ This element spans the full width of its parent container.
+ </div>
+</div>


Suggested change

<h4>WET-BOEW <code>.full-width </code>class working example</h4><div class="well">

<div class="full-width">

This element spans the full width of its parent container.

</div>

</div>

<h3><code>.full-width </code>class</h3>

<div class="well">

<label for="id_1">Full width example</label>

<input id="id_1" class="full-width">

<label for="id_2">Default width example</label>

<input id="id_2">

</div>

duboisp · 2024-03-25T19:39:18Z

Working example of the latest change is available here:

duboisp · 2024-03-27T19:47:44Z

common/display/display-en.html

+<h2 id="bootstrap">Bootstrap</h2>
+
+<h3 id="float">Float</h3>
+
+<h4>Bootstrap 3 <code> .clearfix</code>working example</h4>


Suggested change

<h2 id="bootstrap">Bootstrap</h2>

<h3 id="float">Float</h3>

<h4>Bootstrap 3 <code> .clearfix</code>working example</h4>

<h2 id="float">Float</h2>

<h3><code> .clearfix</code>working example</h3>

duboisp · 2024-03-27T19:48:52Z

common/grid-layout/layout-en.html

+ <li><a href="#grid baseline">Grid baseline (containers)</a></li>
+</ul>
+
+<h3 id="flexbox">Flexbox</h3>


Suggested change

<h3 id="flexbox">Flexbox</h3>

<h2 id="flexbox">Flexbox</h2>

It is not fixed, may be the file "layout-en.html" was not added in the commit

duboisp · 2024-03-27T19:49:46Z

common/grid-layout/layout-en.html

+
+<h2>On this page:</h2>
+
+<ul>
+ <li><a href="#flexbox">Flexbox</a></li>
+ <li><a href="#css-grid">CSS-grid</a></li>
+ <li><a href="#grid baseline">Grid baseline (containers)</a></li>
+</ul>


Suggested change

<h2>On this page:</h2>

<ul>

<li><a href="#flexbox">Flexbox</a></li>

<li><a href="#css-grid">CSS-grid</a></li>

<li><a href="#grid baseline">Grid baseline (containers)</a></li>

</ul>

<nav>

<h2>On this page:</h2>

<ul>

<li><a href="#flexbox">Flexbox</a></li>

<li><a href="#css-grid">CSS-grid</a></li>

<li><a href="#grid baseline">Grid baseline (containers)</a></li>

</ul>

</nav>

It is still not here in the layout. but i can see it on the display page.

duboisp

See the change request.

duboisp · 2024-03-27T19:58:24Z

common/display/display-en.html

+
+<h4>Bootstrap 3 <code>.center-block</code> class working example</h4>
+<div class="well">
+ <div class="center-block well bg-darker">


Suggested change

<div class="center-block well bg-darker">

<div class="center-block well bg-info">

Suggested change

<div class="center-block well bg-darker">

<div class="center-block well bg-darker text-white">

duboisp · 2024-03-29T16:23:44Z

common/display/display-en.html

+ <li><a href="#sizing-controls">Sizing controls</a></li>
+</ul>
+</nav>
+<h2 id="bootstrap">Bootstrap</h2>


Suggested change

<h2 id="bootstrap">Bootstrap</h2>

duboisp · 2024-03-29T16:24:24Z

common/display/display-en.html

+ <div class="pull-left bg-darker text-white col-md-3 well">Column 1</div>
+ <div class="pull-left bg-darker text-whitecol-md-3 well">Column 2</div>
+ <div class="pull-left bg-darker text-white col-md-3 well">Column 3</div>
+ <!-- Add clearfix class to clear floated elements -->
+ <div class="clearfix"></div>


Move the clearfix in between.

Suggested change

<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div>

<div class="pull-left bg-darker text-whitecol-md-3 well">Column 2</div>

<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div>



<div class="clearfix"></div>

<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div>

<div class="pull-left bg-darker text-whitecol-md-3 well">Column 2</div>



<div class="clearfix"></div>

<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div>

duboisp · 2024-03-29T16:24:43Z

common/display/display-en.html

+ &lt;div class="row"&gt;
+ &lt;div class="pull-left bg-darker text-white col-md-3 well"&gt;Column 1&lt;/div&gt;
+ &lt;div class="pull-left bg-darker text-white col-md-3 well"&gt;Column 2&lt;/div&gt;
+ &lt;div class="pull-left bg-darker text-white col-md-3 well"&gt;Column 3&lt;/div&gt;
+ &lt;!-- Add clearfix class to clear floated elements --&gt;
+ &lt;div class="<strong>clearfix</strong>"&gt;&lt;/div&gt;


Suggested change

<div class="row">

<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div>

<div class="pull-left bg-darker text-white col-md-3 well">Column 2</div>

<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div>



<div class="<strong>clearfix</strong>"></div>

<div class="row">

<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div>

<div class="pull-left bg-darker text-white col-md-3 well">Column 2</div>



<div class="<strong>clearfix</strong>"></div>

<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div>

duboisp · 2024-03-29T16:26:59Z

common/display/display-en.html

+<h3 id="clear">Clear</h3>
+
+<h4><code>.clr-lft-lg</code> class working example</h4>


Suggested change

<h3 id="clear">Clear</h3>

<h4><code>.clr-lft-lg</code> class working example</h4>

<h2 id="clear">Clear</h2>

<h3><code>.clr-lft-lg</code> class working example</h3>

duboisp · 2024-03-29T17:12:02Z

components/gc-corporate/index.json-ld

+ },
+
+ "modified": "2024-03-26",
+ "componentName": "grid-layout",


Suggested change

"componentName": "grid-layout",

"componentName": "gc-corporate",

Folder name must match the componentName

duboisp · 2024-03-29T17:12:16Z

components/gc-corporate/index.json-ld

+ "examples": [
+
+ {
+ "title": "Responsive Columns",


Suggested change

"title": "Responsive Columns",

"title": "GC Corporate",

duboisp · 2024-03-29T17:12:32Z

components/gc-corporate/index.json-ld

+ },
+
+ {
+ "title": "Colonnes réactives",


Suggested change

"title": "Colonnes réactives",

"title": "GC corporative",

components/gc-corporate/responsive_columns-en.html

components/gc-corporate/responsive_columns-fr.html

polmih temporarily deployed to github-ci August 9, 2023 03:06 — with GitHub Actions Inactive

duboisp added the Query: Project item Part of a github project label Sep 21, 2023

duboisp requested changes Oct 4, 2023

View reviewed changes

duboisp assigned polmih Oct 5, 2023

duboisp assigned hanseller and unassigned polmih Mar 6, 2024

polmih and others added 3 commits March 15, 2024 16:28

WCAG upgrade - Create test page for Display and Layout

e97703c

Fixing Json and html files

5f2db88

Creating New HTML and fixing layout.html

2718e6b

hanseller reviewed Mar 22, 2024

View reviewed changes

duboisp force-pushed the wcag-test-display-layout branch from eebca0f to 2718e6b Compare March 22, 2024 18:38

duboisp temporarily deployed to github-ci March 22, 2024 18:38 — with GitHub Actions Inactive

duboisp requested changes Mar 22, 2024

View reviewed changes

updating heading in both English and French

287f2de

duboisp had a problem deploying to github-ci March 25, 2024 18:33 — with GitHub Actions Failure

duboisp requested changes Mar 25, 2024

View reviewed changes

fixing the op levels

fad53d9

duboisp had a problem deploying to github-ci March 25, 2024 19:39 — with GitHub Actions Failure

Errors have been fixed as required

ff293f0

duboisp had a problem deploying to github-ci March 27, 2024 19:45 — with GitHub Actions Failure

duboisp requested changes Mar 27, 2024

View reviewed changes

updating display & layout html files

bfacbe6

duboisp force-pushed the wcag-test-display-layout branch from ff293f0 to 6dcac07 Compare March 29, 2024 15:58

duboisp had a problem deploying to github-ci March 29, 2024 15:58 — with GitHub Actions Failure

duboisp requested changes Mar 29, 2024

View reviewed changes

Fixed required issues

a55eb7e

duboisp force-pushed the wcag-test-display-layout branch from 6dcac07 to d969751 Compare April 2, 2024 19:10

duboisp had a problem deploying to github-ci April 2, 2024 19:10 — with GitHub Actions Failure

duboisp force-pushed the wcag-test-display-layout branch from d969751 to a55eb7e Compare April 2, 2024 19:11

duboisp had a problem deploying to github-ci April 2, 2024 19:11 — with GitHub Actions Failure

Fixed required issues

8dea9a1

duboisp had a problem deploying to github-ci April 2, 2024 19:15 — with GitHub Actions Failure

Made various fixes

7d76a03

duboisp assigned duboisp and unassigned hanseller May 25, 2024


		<h3 id="flexbox">Flexbox</h3>

		<h4>WET-BOEW <code>.d-flex</code> class working example</h4>

	<h4>WET-BOEW <code>.d-flex</code> class working example</h4>
	<h4><code>.d-flex</code> class working example</h4>

-<h4>WET-BOEW <code>.full-width </code>class working example</h4><div class="well">
- <div class="full-width">
- This element spans the full width of its parent container.
- </div>
-</div>
+<h3><code>.full-width </code>class</h3>
+<div class="well">
+ <label for="id_1">Full width example</label>
+ <input id="id_1" class="full-width">
+ <label for="id_2">Default width example</label>
+ <input id="id_2">
+</div>

	<div class="center-block well bg-darker">
	<div class="center-block well bg-info">

	<div class="center-block well bg-darker">
	<div class="center-block well bg-darker text-white">

		<h3 id="clear">Clear</h3>

		<h4><code>.clr-lft-lg</code> class working example</h4>

	"componentName": "grid-layout",
	"componentName": "gc-corporate",

WCAG upgrade - Create test page for Display and Layout #2224

Are you sure you want to change the base?

WCAG upgrade - Create test page for Display and Layout #2224

Conversation

polmih commented Aug 9, 2023

duboisp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hanseller left a comment

Choose a reason for hiding this comment

duboisp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

duboisp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

duboisp commented Mar 25, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

duboisp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment