WCAG upgrade - Create test page for Display and Layout#2224
WCAG upgrade - Create test page for Display and Layout#2224polmih wants to merge 10 commits intowet-boew:masterfrom
Conversation
duboisp
left a comment
There was a problem hiding this comment.
Incomplete review
- Remove all the inline style
| "componentName": "layout", | ||
| "status": "stable", | ||
| "pages": { | ||
| "docs": [ |
There was a problem hiding this comment.
| "docs": [ | |
| "examples": [ |
| <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> |
There was a problem hiding this comment.
I suggest to have an example that don't rely on any inline style, something like:
| <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> |
| <div class="center-block well" style="width: 200px; height: 200px; background-color: #ffffff;"> | ||
| This element is centered horizontally within its parent container. | ||
| </div> |
There was a problem hiding this comment.
May be an example that use an image will be easier to demo "centre-block" without any specific width.
| </div></code></pre> | ||
|
|
||
| <h4>Bootstrap 3 <code>.pull-left</code> class working example</h4> | ||
| <div class="well" style="height: 115px;"> |
There was a problem hiding this comment.
| <div class="well" style="height: 115px;"> | |
| <div class="well"> |
| <div class="clearfix"></div> | ||
| <div class="clearfix"> </div> |
There was a problem hiding this comment.
Is this necessary here? the pull-right example don't seem to need that
| <div class="clearfix"></div> | |
| <div class="clearfix"> </div> |
| <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><div class="well"> | ||
| <div class="<strong>lbx-hide-gal</strong> well"> | ||
| This element is hidden as part of a lightbox gallery. | ||
| </div> | ||
| </div></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> |
There was a problem hiding this comment.
Those seem to be wet-boew plugin specific, should we have it here?
| </div></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"> |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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
left a comment
There was a problem hiding this comment.
Applied the changes to my branch PR-2224
eebca0f to
2718e6b
Compare
duboisp
left a comment
There was a problem hiding this comment.
@hanseller see the requested change as discussed.
| "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><div class="well"><div class="container"> | ||
| <!-- Content of the container --> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | ||
| </div></div></code></pre> |
There was a problem hiding this comment.
| "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><div class="well"><div class="container"> | |
| <!-- Content of the 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"> | |
| <!-- Content of the 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"> | |
| <!-- Content of the container --> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| </div></div></code></pre> | |
| </div> |
There was a problem hiding this comment.
Please remove, we already have that example here: https://github.com/wet-boew/GCWeb/blob/master/components/header-rwd/well-header-rwd-en.html
There was a problem hiding this comment.
Please remove, we already have this component here: https://github.com/wet-boew/GCWeb/tree/master/sites/authentication
| "componentName": "grid-layout", | ||
| "status": "stable", | ||
| "pages": { | ||
| "examples": [ |
There was a problem hiding this comment.
Add the other web page in this array
|
|
||
| <h3 id="flexbox">Flexbox</h3> | ||
|
|
||
| <h4>WET-BOEW <code>.d-flex</code> class working example</h4> |
There was a problem hiding this comment.
| <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
| <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> |
There was a problem hiding this comment.
You can remove this example, we already have it here: https://github.com/wet-boew/GCWeb/tree/master/sites/header
There was a problem hiding this comment.
You can remove this page, we already have it here: https://github.com/wet-boew/GCWeb/tree/master/sites/gcweb-menu
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
You can remove this page, we already have it here: https://github.com/wet-boew/GCWeb/tree/master/sites/footers
duboisp
left a comment
There was a problem hiding this comment.
Also remove wet-boew, bootstrap 3 reference in the various title where do provide content value.
|
|
||
| <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><div class="well"> |
There was a problem hiding this comment.
| <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><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> | |
| <!-- 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><div class="well"> |
There was a problem hiding this comment.
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>| <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> |
There was a problem hiding this comment.
Use a focusable element, like an anchor <a href="#">
| <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><div class="well"> | ||
| <div class="<strong>opct-20</strong> well"> | ||
| This element has an opacity of 0.2 (20%). | ||
| </div> | ||
| </div></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><div class="well"> | ||
| <div class="<strong>opct-90</strong> well"> | ||
| This element has an opacity of 0.9 (90%). |
There was a problem hiding this comment.
Missing an example for:
opct-30
opct-40
opct-50
opct-60
opct-70
opct-80
| <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><div class="well"> | ||
| <div class="<strong>lbx-hide-gal</strong> well"> | ||
| This element is hidden as part of a lightbox gallery. | ||
| </div> | ||
| </div></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><div class="well"> | ||
| <div class="<strong>mfp-hide</strong> well"> | ||
| This element is hidden as part of a Magnific Popup modal. | ||
| </div> | ||
| </div></code></pre> | ||
|
|
There was a problem hiding this comment.
mfp-hide + lbx-hide-fal example can be removed
| <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> |
There was a problem hiding this comment.
| <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> |
|
Working example of the latest change is available here: |
| <h2 id="bootstrap">Bootstrap</h2> | ||
|
|
||
| <h3 id="float">Float</h3> | ||
|
|
||
| <h4>Bootstrap 3 <code> .clearfix</code>working example</h4> |
There was a problem hiding this comment.
| <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> |
| <li><a href="#grid baseline">Grid baseline (containers)</a></li> | ||
| </ul> | ||
|
|
||
| <h3 id="flexbox">Flexbox</h3> |
There was a problem hiding this comment.
| <h3 id="flexbox">Flexbox</h3> | |
| <h2 id="flexbox">Flexbox</h2> |
There was a problem hiding this comment.
It is not fixed, may be the file "layout-en.html" was not added in the commit
|
|
||
| <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> |
There was a problem hiding this comment.
| <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> |
There was a problem hiding this comment.
It is still not here in the layout. but i can see it on the display page.
ff293f0 to
6dcac07
Compare
|
|
||
| <h4>Bootstrap 3 <code>.center-block</code> class working example</h4> | ||
| <div class="well"> | ||
| <div class="center-block well bg-darker"> |
There was a problem hiding this comment.
| <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"> |
| <li><a href="#sizing-controls">Sizing controls</a></li> | ||
| </ul> | ||
| </nav> | ||
| <h2 id="bootstrap">Bootstrap</h2> |
There was a problem hiding this comment.
| <h2 id="bootstrap">Bootstrap</h2> |
| <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> |
There was a problem hiding this comment.
Move the clearfix in between.
| <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> |
| <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> | ||
| <!-- Add clearfix class to clear floated elements --> | ||
| <div class="<strong>clearfix</strong>"></div> |
There was a problem hiding this comment.
| <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> | |
| <!-- Add clearfix class to clear floated elements --> | |
| <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> | |
| <!-- Add clearfix class to clear floated elements --> | |
| <div class="<strong>clearfix</strong>"></div> | |
| <div class="pull-left bg-darker text-white col-md-3 well">Column 3</div> |
| <h3 id="clear">Clear</h3> | ||
|
|
||
| <h4><code>.clr-lft-lg</code> class working example</h4> |
There was a problem hiding this comment.
| <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> |
| }, | ||
|
|
||
| "modified": "2024-03-26", | ||
| "componentName": "grid-layout", |
There was a problem hiding this comment.
| "componentName": "grid-layout", | |
| "componentName": "gc-corporate", |
Folder name must match the componentName
| "examples": [ | ||
|
|
||
| { | ||
| "title": "Responsive Columns", |
There was a problem hiding this comment.
| "title": "Responsive Columns", | |
| "title": "GC Corporate", |
| }, | ||
|
|
||
| { | ||
| "title": "Colonnes réactives", |
There was a problem hiding this comment.
| "title": "Colonnes réactives", | |
| "title": "GC corporative", |
6dcac07 to
d969751
Compare
d969751 to
a55eb7e
Compare
WCAG upgrade - Create test page for Display and Layout