Slideshow section #840

ludoboludo · 2021-11-01T18:53:38Z

Why are these changes introduced?

Fixes #833

What approach did you take?

I reused quite a bit of the styling for the image banner as if you have only one slide the look is very similar. Section settings are also very similar so it seemed to make sense.

I create a new JS class that extends the functionality of the existing SliderComponent.

Other considerations

I added an accessibility setting for merchants to give a TLDR about the purpose of the slideshow
Navigation button size. On mobile they're not set to be 44x44 but I think they probably should. But it would have an impact on the design: screenshot (play button isn't active on this example).
Grid peek style isn't added at the moment. I thought I would add it as a follow up.
Tab order on mobile isn't great if we display the controls in between the text image and text box. Though it could be re arranged in the structure, I would have to duplicate some styling as the pattern so far has been to have it after the slider.

Issue: when editing blocks/slides it won't show you the current slide you're editing in the theme editor.

Potential benefits to add:

The slideshow is currently using the image-banner.css file as they share quite a bit of styling. But the code in common could be put into its own file as around 40% of the image-banner.css isn't necessary to the slideshow.
Look into using content-visibility. How does it behave if used in browser that don't support the property ? Remove lazy loading of the first slide to load faster when it's the first section and rely on content-visibility to delay the loading when it isn't.

Demo links

Store
Editor

Checklist

assets/global.js

locales/en.default.json

sections/slideshow.liquid

svinkle · 2021-11-11T21:27:38Z

@ludoboludo Looking good. I left a few notes for an initial review.

Should clicking the number or dots from the slideshow navigation set the focus on the slide ?

No, since they're button controls which imply focus remains on the control. The aria-live announces the newly revealed content.

I added an accessibility setting for merchants to give a TLDR about the purpose of the slideshow

Consider switching to "Slideshow description"

Navigation button size. On mobile they're not set to be 44x44 but I think they probably should.

I agree the bullet and number control sizing could be increased. I doesn't need to be the 44 by 44 but at least maximize the space available via padding.

svinkle · 2021-11-11T21:29:12Z

@ludoboludo I think after you make these adjustments, I'll setup a few sessions with Fable to get user feedback. I'll report back with any new notes. If you need to merge before I get this feedback, go for it. Just be ready to jump back in if I get high severity issues reported back.

locales/en.default.schema.json

melissaperreault · 2021-11-12T04:57:05Z

Thank you so much Ludo! Great work!

Made a first pass, will do another round later!

UX Update on the remaining points I needed to get back to you + some feedback:

Set the maximum of slide to 5
I thought we could navigate the slides with left and right keyboard arrows, is this still possible? We did it on Debut.
I wonder if the pause on hover should happen after a few seconds instead of instant? That could leave some time to users to just experience the merchant's first intention. Thoughts? cc. @danielvan
Border opacity around the controls should be solid rgba(var(--color-foreground),.08); instead of solid rgba(var(--color-foreground),.2); unless there are other evident areas that we use this 20% opacity 🤔
We need to pair for the position of the play/pause to test other options quickly, it definitely gets lost to the opposite left. I also want to improve the thickness of the pause strokes.
We won't include a small heading font size, I can see the purpose for Rich text but less on this type of section that needs to stand out.

Slider visual controls

I believe we are missing some hover states on the numbers, they could increase in opacity and receive the underline once clicked or in focus/view? I took a look at the pagination current implementation and it might not be clear actually.
The cursor on the inactive arrow doesn't change and convey the arrow is clickable. I suspect we would need to fix it for the product template nav too.

Content

I am wondering if Counter and Numbers are clear for merchants?

Answers to your questions/considerations

Should clicking the number or dots from the slideshow navigation set the focus on the slide ?

No, since they're button controls which imply focus remains on the control. The aria-live announces the newly revealed content.

Navigation button size. On mobile they're not set to be 44x44 but I think they probably should.

I agree the bullet and number control sizing could be increased. I doesn't need to be the 44 by 44 but at least maximize the space available via padding.

I am not sure I understand well the expectations for the focus on the slide. Buyers can click/tap dots or number stepper but it is not the primary way to navigate the slides. The arrows are the main controls. Those main control should have the 44px safe tap target, but not the secondary pagination. They give us a hint of where we are mainly but could be navigated to get to a specific slide.

Remaining things that I need to review

All the settings combinations
No JS
Mobile experience
Start requesting help doc update

locales/en.default.schema.json

melissaperreault · 2021-11-12T04:27:23Z

locales/en.default.schema.json

+            "label": "Grid"
+          },
+          "options__3": {
+            "label": "Grid and peek"


Suggested change

"label": "Grid and peek"

"label": "Grid with a peek"

👍 if I do this layout in a follow up PR I might remove it from the settings for now 🤔

locales/en.default.schema.json

svinkle · 2021-11-12T12:57:37Z

@ludoboludo The toggle of the play/pause control on hover/focus is not required. I understand the purpose but as a user navigates through the content the flipping of the icon is very distracting. The end result may be a disoriented user on whether the slideshow is/was paused or playing.

Demo

sections/slideshow.liquid

LucasLacerdaUX

Just some quick comments. I haven't started my review yet but just caught these by looking at the code.

assets/global.js

danielvan · 2021-11-12T16:45:42Z

I wonder if the pause on hover should happen after a few seconds instead of instant? That could leave some time to users to just experience the merchant's first intention. Thoughts? cc. @danielvan

I think the user intent on hover is to look at the slide, so I would pause immediately on hover, and play again once the mouse is out. For accessibility, I think it is also better to pause immediately – @svinkle can you let me know if this is true?

LucasLacerdaUX

Just dumping some initial ideas and questions before the weekend.

Also: you did an amazing work putting up together such a complex section. Thanks again for that . There's still a lot of functionality to test on my end, but from my quick look at the Theme Editor I love what I'm seeing! :)

I'll come back on Monday to finish my review.

assets/global.js

LucasLacerdaUX · 2021-11-12T20:40:17Z

assets/global.js

+    this.sliderControlWrapper = this.querySelector('.slider-buttons');
+    this.bannerContents = this.slider.querySelectorAll('.banner__content');


Would you mind having a:

this.elements = { // all the variables that you are assigning to a querySelector }

?

I think we're using this pattern in a few places, but it really helps with legibility. I'm often unsure what is a numeric / boolean variable and what is an element.

Maybe we can take a look together/pair. I feel like some values are also used in SliderComponent and some are based on conditionals. So curious to see what would make the most sense.

Another option would be to standardize adding Element or Node to anything that is an element and the plural for any NodeLists (querySelectorAll).

I'd probably use Node because it's shorter and matches the NodeList object that querySelectorAll returns.

The elements I have in the constructor now are pretty straight forward so I don't feel like this still applied 🤔
Two are elements and one is an array which it mentions in its name.

assets/global.js

LucasLacerdaUX · 2021-11-12T20:44:17Z

assets/global.js

+
+    this.sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0);
+    this.sliderLastItem = this.sliderItemsToShow[this.sliderItemsToShow.length - 1];
+    if( this.sliderItemsToShow.length > 0) this.currentPage = 1;


Isn't that this.currentPage = 1; automatically inherited from SliderComponent initialization? Or are there scenarios where this could be initialized with a different value?

I thought I needed it because it comes up as undefined when I console log it on initialization. But seems to work fine without.

Suggested change

if( this.sliderItemsToShow.length > 0) this.currentPage = 1;

if (this.sliderItemsToShow.length > 0) this.currentPage = 1;

LucasLacerdaUX · 2021-11-12T20:46:31Z

assets/global.js

+    this.sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0);
+    this.sliderLastItem = this.sliderItemsToShow[this.sliderItemsToShow.length - 1];


Correct me if I'm wrong, but isn't that being initialized in initPages on the SliderComponent?

Looks like the same code to me.

this.sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0); this.sliderLastItem = this.sliderItemsToShow[this.sliderItemsToShow.length - 1];

It is but if I don't do it there, on initialization I get an error as it sees it as undefined. Im guessing the value is declared/updated in the SliderComponent right after Im trying to use in the SlideshowComponent.

assets/global.js

assets/component-slider.css

svinkle · 2021-11-15T20:46:20Z

@ludoboludo I just noticed a focus management issue. Ex., when you're on the second slide and you activate the "previous slide" control, the control is set as disabled and focus moves to the top of the DOM.

Instead of setting the control as disabled, could we wrap and load the last slide? This way focus remains on the button as expected. Wrapping may present a better UX and meet user expectations. @melissaperreault @danielvan thoughts?

…Component

…settings

tyleralsbury · 2021-12-10T20:05:08Z

@svinkle

I removed aria-hidden and it seems to break the announcement from what I noticed. When I remove it, it no longer announces the content of the newly appearing content, it doesn't state anything when I switch slides. With aria-hidden as Ludo implemented it, when I switch slides it states the content of the slide "Image slide, Tell your brand..."

I fixed the Dots and Numbers issue - it was broken because of the variable renaming that @LucasLacerdaUX noticed.

tyleralsbury

Bugs are fixed. Awaiting UX and a11y approval.

LucasLacerdaUX

Dots/Numbers are now working as expected 👍

svinkle · 2021-12-13T16:12:00Z

@tyleralsbury Is there a new store link I could test these changes with?

ludoboludo · 2021-12-13T19:21:43Z

assets/component-slider.css

 }

 @media screen and (max-width: 749px) {
  .slider-counter__link {
-    padding: 0 0.7rem;
+    padding: 0.7rem;


Comment from Scott on slack that it's addressing:

Before merging I’d like to see a little more padding on the number/bullet controls. Right now they’re 24 by 10. Could we make them 24 by 24? Same for the numbers; make the height the same as the width to add a better touch target/visual focus.

ludoboludo · 2021-12-13T19:22:12Z

assets/global.js

@@ -692,6 +692,7 @@ class SlideshowComponent extends SliderComponent {
  linkToSlide(event) {
    event.preventDefault();
    const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage);
+    this.slider.setAttribute('aria-live', 'polite');


Other comment from Scott I'm addressing:

When the slideshow is set to autoplay and it’s playing, the transition announcement doesn’t happen on number/bullet/arrow press. It does announce after the slideshow is paused from pressing the pause button, arrow/number/bullet press announces the transition.

LucasLacerdaUX

Looks good to me :)

tyleralsbury

A monumental task! ✅

tyleralsbury

✅

LucasLacerdaUX

👍

ludoboludo marked this pull request as ready for review November 10, 2021 20:11

ludoboludo requested review from LucasLacerdaUX, svinkle and melissaperreault November 10, 2021 20:28

svinkle reviewed Nov 11, 2021

View reviewed changes

melissaperreault reviewed Nov 12, 2021

View reviewed changes

locales/en.default.schema.json Outdated Show resolved Hide resolved

melissaperreault reviewed Nov 12, 2021

View reviewed changes

locales/en.default.schema.json Outdated Show resolved Hide resolved

svinkle reviewed Nov 12, 2021

View reviewed changes

sections/slideshow.liquid Outdated Show resolved Hide resolved

LucasLacerdaUX reviewed Nov 12, 2021

View reviewed changes

assets/global.js Outdated Show resolved Hide resolved

assets/global.js Outdated Show resolved Hide resolved

assets/global.js Outdated Show resolved Hide resolved

LucasLacerdaUX reviewed Nov 12, 2021

View reviewed changes

ludoboludo commented Nov 12, 2021

View reviewed changes

assets/component-slider.css Outdated Show resolved Hide resolved

ludoboludo added 12 commits November 16, 2021 15:20

Slideshow section

eee3ed1

first draft/tests

890e04f

reuse banner classes where possible

579cad7

move around class

c874aac

deal with button styles

4b838b2

placeholder styling

f143556

introduce new custom Class

e9d48c5

add autoplay, change element structure, add styling for controls

42cec43

add IDs where needed to reflect the change in selector for the slider…

f4d7549

…Component

add autoplay setting and a11y functionality

b85bdfb

fix autoplay scrollIntoView, remove play button when disabled in the …

a320892

…settings

fix slideshow text content spacing and navigation position when resizing

bf70482

tyleralsbury mentioned this pull request Dec 10, 2021

Slideshow help text #1009

Closed

Bugfix for number and dot controls

8352ddd

tyleralsbury dismissed their stale review via 8352ddd December 10, 2021 19:57

tyleralsbury requested a review from svinkle December 10, 2021 20:06

tyleralsbury previously approved these changes Dec 10, 2021

View reviewed changes

tyleralsbury requested review from katycobb, duygukalaycioglu and LucasLacerdaUX December 10, 2021 20:09

LucasLacerdaUX previously approved these changes Dec 10, 2021

View reviewed changes

Merge branch 'main' into slideshow-section

1e5bf81

ludoboludo dismissed stale reviews from LucasLacerdaUX and tyleralsbury via 1e5bf81 December 13, 2021 16:17

ludoboludo added 2 commits December 13, 2021 11:45

remove unused styling and tweak text spacing

0a09adb

address a11y concerns

bf6bbb9

ludoboludo commented Dec 13, 2021

View reviewed changes

add aria-atomic

ed62c3d

ludoboludo requested review from tyleralsbury and LucasLacerdaUX December 14, 2021 16:47

LucasLacerdaUX previously approved these changes Dec 14, 2021

View reviewed changes

tyleralsbury previously approved these changes Dec 14, 2021

View reviewed changes

tweak a11y for slide visibility

a1ebaba

ludoboludo dismissed stale reviews from tyleralsbury and LucasLacerdaUX via a1ebaba December 14, 2021 19:37

tyleralsbury approved these changes Dec 14, 2021

View reviewed changes

LucasLacerdaUX approved these changes Dec 14, 2021

View reviewed changes

ludoboludo merged commit 644e613 into main Dec 14, 2021

ludoboludo deleted the slideshow-section branch December 14, 2021 20:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Slideshow section #840

Slideshow section #840

ludoboludo commented Nov 1, 2021 •

edited

svinkle commented Nov 11, 2021 •

edited

svinkle commented Nov 11, 2021 •

edited

melissaperreault commented Nov 12, 2021 •

edited

melissaperreault Nov 12, 2021

ludoboludo Nov 12, 2021

svinkle commented Nov 12, 2021 •

edited

LucasLacerdaUX left a comment

danielvan commented Nov 12, 2021 •

edited

LucasLacerdaUX left a comment

LucasLacerdaUX Nov 12, 2021

ludoboludo Nov 15, 2021

tyleralsbury Nov 25, 2021

ludoboludo Dec 3, 2021

LucasLacerdaUX Nov 12, 2021

ludoboludo Nov 15, 2021

LucasLacerdaUX Dec 1, 2021

LucasLacerdaUX Nov 12, 2021

ludoboludo Nov 15, 2021

svinkle commented Nov 15, 2021

tyleralsbury commented Dec 10, 2021 •

edited

tyleralsbury left a comment

LucasLacerdaUX left a comment

svinkle commented Dec 13, 2021

ludoboludo Dec 13, 2021

ludoboludo Dec 13, 2021

LucasLacerdaUX left a comment

tyleralsbury left a comment

tyleralsbury left a comment

LucasLacerdaUX left a comment

		this.sliderControlWrapper = this.querySelector('.slider-buttons');
		this.bannerContents = this.slider.querySelectorAll('.banner__content');

	if( this.sliderItemsToShow.length > 0) this.currentPage = 1;
	if (this.sliderItemsToShow.length > 0) this.currentPage = 1;

		this.sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0);
		this.sliderLastItem = this.sliderItemsToShow[this.sliderItemsToShow.length - 1];

Slideshow section #840

Slideshow section #840

Conversation

ludoboludo commented Nov 1, 2021 • edited

svinkle commented Nov 11, 2021 • edited

svinkle commented Nov 11, 2021 • edited

melissaperreault commented Nov 12, 2021 • edited

UX Update on the remaining points I needed to get back to you + some feedback:

Answers to your questions/considerations

Remaining things that I need to review

Choose a reason for hiding this comment

Choose a reason for hiding this comment

svinkle commented Nov 12, 2021 • edited

LucasLacerdaUX left a comment

Choose a reason for hiding this comment

danielvan commented Nov 12, 2021 • edited

LucasLacerdaUX 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

svinkle commented Nov 15, 2021

tyleralsbury commented Dec 10, 2021 • edited

tyleralsbury left a comment

Choose a reason for hiding this comment

LucasLacerdaUX left a comment

Choose a reason for hiding this comment

svinkle commented Dec 13, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LucasLacerdaUX left a comment

Choose a reason for hiding this comment

tyleralsbury left a comment

Choose a reason for hiding this comment

tyleralsbury left a comment

Choose a reason for hiding this comment

LucasLacerdaUX left a comment

Choose a reason for hiding this comment

ludoboludo commented Nov 1, 2021 •

edited

svinkle commented Nov 11, 2021 •

edited

svinkle commented Nov 11, 2021 •

edited

melissaperreault commented Nov 12, 2021 •

edited

svinkle commented Nov 12, 2021 •

edited

danielvan commented Nov 12, 2021 •

edited

tyleralsbury commented Dec 10, 2021 •

edited