Skip to content

Commit

Permalink
Clean up markup based on suggestions
Browse files Browse the repository at this point in the history
  • Loading branch information
Travis Doughty committed Aug 28, 2024
1 parent 6360cc4 commit 1d04be0
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 105 deletions.
183 changes: 93 additions & 90 deletions content/body/load-more.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,54 +13,115 @@
<p>Consider reading this article by Nieman Norman Group <a href="https://www.nngroup.com/articles/infinite-scrolling/">https://www.nngroup.com/articles/infinite-scrolling/</a>
which talks about the detriments of a user experience that features infinite scroll.</p>

<h2>The Load More Button</h2>
<h2>Category Grid Load More Example</h2>

<p>This is the preferred way of implementing loading more content in an accessible way that aids goal-oriented finding tasks.</p>

<p>The following demo makes use of placeholder assets pulled from <a href="https://dev.me/products/image-placeholder">https://dev.me/products/image-placeholder</a></p>
<p>Category grid's are relatively simple components</p>

<div id="example1" class="enable-example">
<section id="product-grid">
<div class="product-tile">
<a href="/" class="product-details-link">
<span class="sr-only">Modern Tufted Armless Lounge Chair</span>
</a>
<p id="view-count" aria-live="polite">Showing 3 of 9 Categories</p>

<section id="view-grid">
<div class="view-tile">
<div class="tile-relative">
<img src="images/load-more/chair1.png" alt="Modern Tufted Armless Lounge Chair" />
<p class="product-name">Modern Tufted Armless Lounge Chair</p>
<p class="product-price">$399.99</p>
<button type="button" class="add-to-cart-btn" aria-label="Add Modern Tufted Armless Lounge Chair to cart.">Add to Cart</button>
<a href="/" class="view-details-link">
Shop Modern Chairs
</a>
</div>
</div>

<div class="product-tile">
<a href="/" class="product-details-link">
<span class="sr-only">Minimalist Felt Lounge Chair</span>
</a>
<div class="view-tile">
<div class="tile-relative">
<img src="images/load-more/chair2.png" alt="Minimalist Felt Lounge Chair" />
<p class="product-name">Minimalist Felt Lounge Chair</p>
<p class="product-price">$199.99</p>
<button type="button" class="add-to-cart-btn" aria-label="Add Minimalist Felt Lounge Chair to cart.">Add to Cart</button>
<a href="/" class="view-details-link">
Shop Simple Chairs
</a>
</div>
</div>

<div class="product-tile">
<a href="/" class="product-details-link">
<span class="sr-only">Classic Tufted Leather Wingback Chair</span>
</a>
<div class="view-tile">
<div class="tile-relative">
<img src="images/load-more/chair3.png" alt="Classic Tufted Leather Wingback Chair" />
<p class="product-name">Classic Tufted Leather Wingback Chair</p>
<p class="product-price">$799.99</p>
<button type="button" class="add-to-cart-btn" aria-label="Add Classic Tufted Leather Wingback Chair to cart.">Add to Cart</button>
<a href="/" class="view-details-link">
Shop Leather Chairs
</a>
</div>
</section>
<p id="product-count" aria-live="polite">Showing 3 of 9 products</p>
<button id="load-more-btn" type="button">Load More Products</button>
<button id="product-reset-btn" class="hide-btn" type="button">Reset Product Grid Demo</button>
</div>

</div>
</section>

<button id="view-more-btn" type="button">View More Categories</button>
<button id="view-reset-btn" class="hide-btn" type="button">Reset Category Grid Demo</button>
</div>

<?php includeShowcode("example1"); ?>

<script type="application/json" id="example1-props">
{
"replaceHtmlRules": {},
"steps": [{
"label": "Ensure details has open attribute set",
"highlight": "open",
"notes": "This ensures the animated version is shown by default."
},
{
"label": "Ensure the summary tag has the correct aria-label",
"highlight": "aria-label",
"notes": "After doing this step, make sure all other steps in example 1 above are followed."
}
]
}
</script>

<h2>Product Listing Page Load More Example</h2>

<p>This is the preferred way of implementing loading more content in an accessible way that aids goal-oriented finding tasks.</p>

<p>The following demo makes use of placeholder assets pulled from <a href="https://dev.me/products/image-placeholder">https://dev.me/products/image-placeholder</a></p>

<div id="example2" class="enable-example">
<p id="product-count" aria-live="polite">Showing 3 of 9 Products</p>

<section id="product-grid">
<div class="product-tile" role="group" aria-labelledby="product-grid-product-1">
<a href="/" class="product-details-link">
<span class="sr-only">Modern Tufted Armless Lounge Chair</span>
</a>
<img src="images/load-more/chair1.png" alt="Modern Tufted Armless Lounge Chair" />
<p id="product-grid-product-1" class="product-name">Modern Tufted Armless Lounge Chair</p>
<p class="product-price">$399.99</p>
<button type="button" class="add-to-cart-btn">Add to Cart</button>
</div>

<div class="product-tile" role="group" aria-labelledby="product-grid-product-2">
<a href="/" class="product-details-link">
<span class="sr-only">Minimalist Felt Lounge Chair</span>
</a>
<img src="images/load-more/chair2.png" alt="Minimalist Felt Lounge Chair" />
<p id="product-grid-product-2" class="product-name">Minimalist Felt Lounge Chair</p>
<p class="product-price">$199.99</p>
<button type="button" class="add-to-cart-btn">Add to Cart</button>
</div>

<div class="product-tile" role="group" aria-labelledby="product-grid-product-3">
<a href="/" class="product-details-link">
<span class="sr-only">Classic Tufted Leather Wingback Chair</span>
</a>
<img src="images/load-more/chair3.png" alt="Classic Tufted Leather Wingback Chair" />
<p id="product-grid-product-3" class="product-name">Classic Tufted Leather Wingback Chair</p>
<p class="product-price">$799.99</p>
<button type="button" class="add-to-cart-btn">Add to Cart</button>
</div>
</section>

<button id="load-more-btn" type="button">Load More Products</button>
<button id="product-reset-btn" class="hide-btn" type="button">Reset Product Grid Demo</button>
</div>



<?php includeShowcode("example2"); ?>

<script type="application/json" id="example2-props">
{
"replaceHtmlRules": {},
"steps": [{
Expand Down Expand Up @@ -105,62 +166,4 @@
}
]
}
</script>

<h2>Animation on by default</h2>


<p>When you implement this way, you are presuming the user loading this webpage is okay with the extra battery power being used to animate this image. It is not a very nice thing to assume. I hope your mom is proud of you.</p>

<div id="example2" class="enable-example">
<section id="view-grid">
<div class="view-tile">
<div class="tile-relative">
<img src="images/load-more/chair1.png" alt="Modern Tufted Armless Lounge Chair" />
<button type="button" class="view-details-link">
Shop Modern Chairs
</button>
</div>
</div>

<div class="view-tile">
<div class="tile-relative">
<img src="images/load-more/chair2.png" alt="Minimalist Felt Lounge Chair" />
<button type="button" class="view-details-link">
Shop Simple Chairs
</button>
</div>
</div>

<div class="view-tile">
<div class="tile-relative">
<img src="images/load-more/chair3.png" alt="Classic Tufted Leather Wingback Chair" />
<button type="button" class="view-details-link">
Shop Leather Chairs
</button>
</div>
</div>
</section>
<p id="view-count" aria-live="polite">Showing 3 of 9 categories</p>
<button id="view-more-btn" type="button">View More Categories</button>
<button id="view-reset-btn" class="hide-btn" type="button">Reset Category Grid Demo</button>
</div>

<?php includeShowcode("example2"); ?>

<script type="application/json" id="example2-props">
{
"replaceHtmlRules": {},
"steps": [{
"label": "Ensure details has open attribute set",
"highlight": "open",
"notes": "This ensures the animated version is shown by default."
},
{
"label": "Ensure the summary tag has the correct aria-label",
"highlight": "aria-label",
"notes": "After doing this step, make sure all other steps in example 1 above are followed."
}
]
}
</script>
12 changes: 9 additions & 3 deletions css/load-more.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
}
.view-details-link {
position: absolute;
line-height: 2.75rem;
left: 0;
bottom: 0;
font-size: 1rem;
Expand All @@ -46,6 +47,9 @@
color: #fff;
min-height: 44px;
border: none;
outline-offset: 4px;
text-align: center;
text-decoration: none;
}
#product-count,
#view-count {
Expand All @@ -59,10 +63,11 @@
min-height: 44px;
display: block;
cursor: pointer;
background: #0c3f75;
background: #3a4b5c;
color: #fff;
border: none;
margin: 10px auto;
outline-offset: 4px;
}
#product-reset-btn,
#view-reset-btn {
Expand All @@ -75,16 +80,17 @@
background: none;
border: none;
margin: 10px auto;
outline-offset: 4px;
}
.add-to-cart-btn,
.view-category-btn {
.add-to-cart-btn {
font-size: 0.9375rem;
font-weight: bold;
min-height: 44px;
background: #0c3f75;
color: #fff;
border: none;
padding: 0 15px;
outline-offset: 4px;
}
.hide-btn {
display: none !important;
Expand Down
26 changes: 20 additions & 6 deletions js/demos/load-more.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
const resetProductsData = [
{
id: 'product-1',
name: 'Modern Tufted Armless Lounge Chair',
image: 'images/load-more/chair1.png',
price: '$399.99',
category: 'Modern Chairs',
},
{
id: 'product-2',
name: 'Minimalist Felt Lounge Chair',
image: 'images/load-more/chair2.png',
price: '$199.99',
category: 'Simple Chairs',
},
{
id: 'product-3',
name: 'Classic Tufted Leather Wingback Chair',
image: 'images/load-more/chair3.png',
price: '$799.99',
Expand All @@ -21,36 +24,42 @@ const resetProductsData = [

const productsData = [
{
id: 'product-4',
name: 'Wire Frame Accent Chair',
image: 'images/load-more/chair4.png',
price: '$99.99',
category: 'Metal Chairs',
},
{
id: 'product-5',
name: 'Modern Wooden End Table',
image: 'images/load-more/chair5.png',
price: '$149.99',
category: 'End Tables',
},
{
id: 'product-6',
name: 'Ergonomic Leather Office Chair',
image: 'images/load-more/chair6.png',
price: '$299.99',
category: 'Office Chairs',
},
{
id: 'product-7',
name: 'Modern Wood Slat Back Dining Chair',
image: 'images/load-more/chair7.png',
price: '$99.99',
category: 'Wooden Chairs',
},
{
id: 'product-8',
name: 'Wooden Picnic Table with Benches',
image: 'images/load-more/chair8.png',
price: '$999.99',
category: 'Outdoor Chairs',
},
{
id: 'product-9',
name: 'Classic Windsor Chair',
image: 'images/load-more/chair9.png',
price: '$149.99',
Expand Down Expand Up @@ -96,24 +105,24 @@ class ExampleGrid {
switch (this.type) {
case 'product-grid':
return `
<div class="${this.tileClass}">
<div class="${this.tileClass}" role="group" arialabelledby="${product.type}-${product.id}">
<a href="/" class="${this.focusClass}">
<span class="sr-only">${product.name}</span>
</a>
<img src="${product.image}" alt="${product.name}" />
<p class="product-name">${product.name}</p>
<p id="${product.type}-${product.id}" class="product-name">${product.name}</p>
<p class="product-price">${product.price}</p>
<button type="button" class="add-to-cart-btn" aria-label="Add ${product.name} to cart.">Add to Cart</button>
<button type="button" class="add-to-cart-btn">Add to Cart</button>
</div>
`;
case 'view-grid':
return `
<div class="${this.tileClass}">
<div class="tile-relative">
<img src="${product.image}" alt="${product.name}" />
<button type="button" class="${this.focusClass}">
<a href="/" class="${this.focusClass}">
Shop ${product.category}
</button>
</a>
</div>
</div>
`;
Expand Down Expand Up @@ -148,6 +157,10 @@ class ExampleGrid {

const items = document.querySelectorAll(`.${this.focusClass}`);
items[this.itemCountLoadMore - this.itemPerPage].focus();
items[this.itemCountLoadMore - this.itemPerPage].scrollIntoView({
block: 'center',
behavior: 'smooth',
});
}

reset() {
Expand All @@ -164,10 +177,11 @@ class ExampleGrid {

const items = document.querySelectorAll(`.${this.focusClass}`);
items[0].focus();
items[0].scrollIntoView({ block: 'center', behavior: 'smooth' });
}

setCount(itemCount) {
const type = this.type === 'product-grid' ? 'products' : 'categories';
const type = this.type === 'product-grid' ? 'Products' : 'Categories';
this.countText.innerText = `Showing ${itemCount} of 9 ${type}`;
}
}
Expand Down
3 changes: 3 additions & 0 deletions js/enable-libs/showcode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,9 @@ const showcode = new function () {
// Will show HTML encased in tag with given id
// "%OUTERHTML% id"
// Will show HTML encased in tag with given id (including the tag)
// "%FILE% filePath"
// Will allow you to change the code block to a file of your choosing by passing the URL path to the file
// this is useful when you want to show a part of another file e.g. a JavaScript file

command = highlightString.match(commandsRe);

Expand Down
Loading

0 comments on commit 1d04be0

Please sign in to comment.