Skip to content

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

Open
polmih wants to merge 10 commits intowet-boew:masterfrom
polmih:wcag-test-display-layout
Open

WCAG upgrade - Create test page for Display and Layout#2224
polmih wants to merge 10 commits intowet-boew:masterfrom
polmih:wcag-test-display-layout

Conversation

@polmih
Copy link
Copy Markdown
Contributor

@polmih polmih commented Aug 9, 2023

WCAG upgrade - Create test page for Display and Layout

@polmih polmih temporarily deployed to github-ci August 9, 2023 03:06 — with GitHub Actions Inactive
@duboisp duboisp added the Query: Project item Part of a github project label Sep 21, 2023
Copy link
Copy Markdown
Member

@duboisp duboisp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incomplete review

  • Remove all the inline style

Comment thread _data/common.json Outdated
"componentName": "layout",
"status": "stable",
"pages": {
"docs": [
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"docs": [
"examples": [

Comment thread common/display/display-en.html Outdated
Comment on lines +31 to +39
<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>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>
<!-- 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 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>

Comment thread common/display/display-en.html Outdated
Comment on lines +55 to +61
<div class="center-block well" style="width: 200px; height: 200px; background-color: #ffffff;">
This element is centered horizontally within its parent container.
</div>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread common/display/display-en.html Outdated
&lt;/div&gt;</code></pre>

<h4>Bootstrap 3 <code>.pull-left</code> class working example</h4>
<div class="well" style="height: 115px;">
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread common/display/display-en.html Outdated
Comment on lines +85 to +86
<div class="clearfix"></div>
&lt;div class="clearfix"&gt; &lt;/div&gt;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Comment thread common/display/display-en.html Outdated
Comment on lines +694 to +709
<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>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

&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">
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Comment thread common/layout/layout-en.html Outdated
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

@duboisp duboisp assigned hanseller and unassigned polmih Mar 6, 2024
Copy link
Copy Markdown
Contributor

@hanseller hanseller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Applied the changes to my branch PR-2224

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

@duboisp duboisp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hanseller see the requested change as discussed.

Comment on lines +9 to +29
"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>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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">
<!-- 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>
"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">
<!-- Content of the container -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="container">
<h2>Code Sample</h2>
<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>
</div>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

"componentName": "grid-layout",
"status": "stable",
"pages": {
"examples": [
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add the other web page in this array

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added

Comment thread common/grid-layout/layout-en.html Outdated

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

<h4>WET-BOEW <code>.d-flex</code> class working example</h4>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Comment thread common/grid-layout/layout-en.html Outdated
Comment on lines +224 to +248
<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: info@example.com<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>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can remove it.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed

Comment thread common/grid-layout/logo-en.html Outdated
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread common/grid-layout/menu_items-en.html Outdated
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread common/grid-layout/site_footer-en.html Outdated
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed

Copy link
Copy Markdown
Member

@duboisp duboisp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread common/display/display-en.html Outdated
Comment on lines +25 to +44

<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;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>
<!-- 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;
<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>
<!-- 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;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>
  <!-- Add clearfix class to clear floated elements -->
  <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>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Comment on lines +227 to +233
<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>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Comment thread common/display/display-en.html Outdated
Comment on lines +631 to +727
<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%).
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing an example for:

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Comment thread common/display/display-en.html Outdated
Comment on lines +693 to +769
<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>

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Comment thread common/display/display-en.html Outdated
Comment on lines +947 to +1004
<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>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

@duboisp
Copy link
Copy Markdown
Member

duboisp commented Mar 25, 2024

Comment thread common/display/display-en.html Outdated
Comment on lines +26 to +30
<h2 id="bootstrap">Bootstrap</h2>

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

<h4>Bootstrap 3 <code> .clearfix</code>working example</h4>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Comment thread common/grid-layout/layout-en.html Outdated
<li><a href="#grid baseline">Grid baseline (containers)</a></li>
</ul>

<h3 id="flexbox">Flexbox</h3>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<h3 id="flexbox">Flexbox</h3>
<h2 id="flexbox">Flexbox</h2>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment on lines +10 to +17

<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>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Copy link
Copy Markdown
Member

@duboisp duboisp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See the change request.

Comment thread common/display/display-en.html Outdated

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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">

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Comment thread common/display/display-en.html Outdated
<li><a href="#sizing-controls">Sizing controls</a></li>
</ul>
</nav>
<h2 id="bootstrap">Bootstrap</h2>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Comment thread common/display/display-en.html Outdated
Comment on lines +33 to +37
<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>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>
<!-- Add clearfix class to clear floated elements -->
<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>
<!-- Add clearfix class to clear floated elements -->
<div class="clearfix"></div>
<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Comment thread common/display/display-en.html Outdated
Comment on lines +45 to +50
&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;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
&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;
&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;!-- Add clearfix class to clear floated elements --&gt;
&lt;div class="<strong>clearfix</strong>"&gt;&lt;/div&gt;
&lt;div class="pull-left bg-darker text-white col-md-3 well"&gt;Column 3&lt;/div&gt;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Comment thread common/display/display-en.html Outdated
Comment on lines +96 to +98
<h3 id="clear">Clear</h3>

<h4><code>.clr-lft-lg</code> class working example</h4>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Comment thread components/gc-corporate/index.json-ld Outdated
},

"modified": "2024-03-26",
"componentName": "grid-layout",
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Folder name must match the componentName

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

Comment thread components/gc-corporate/index.json-ld Outdated
"examples": [

{
"title": "Responsive Columns",
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"title": "Responsive Columns",
"title": "GC Corporate",

Comment thread components/gc-corporate/index.json-ld Outdated
},

{
"title": "Colonnes réactives",
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"title": "Colonnes réactives",
"title": "GC corporative",

Comment thread components/gc-corporate/responsive_columns-en.html Outdated
Comment thread components/gc-corporate/responsive_columns-fr.html Outdated
@duboisp duboisp force-pushed the wcag-test-display-layout branch from 6dcac07 to d969751 Compare April 2, 2024 19:10
@duboisp duboisp assigned duboisp and unassigned hanseller May 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Query: Project item Part of a github project

Projects

Status: Todo

Development

Successfully merging this pull request may close these issues.

3 participants