cornerstone icon indicating copy to clipboard operation
cornerstone copied to clipboard

Carousel images do not link.

Open oggede opened this issue 3 years ago • 6 comments

Why are carousel images no longer linkable?

Most users click on images and not buttons. The image should be linkable or at the very least an option should be available to enable it.

Screen shot image: https://i.imgur.com/bQaiC2L.jpg

Expected behavior

Clicking on home page carousel image AND button should link

Actual behavior

Only "button" link works

Steps to reproduce behavior

Click on a carousel image. Link will not work.

oggede avatar Mar 06 '21 22:03 oggede

@oggede it looks like this was changed in https://github.com/bigcommerce/cornerstone/pull/1937, likely for accessibility reason so tab focus is correct.

if you want the old behaviour you may be able to revert the changes made in templates/components/carousel.html however this may affect the accessibility on site.

cc @yurytut1993 who made the original changes, they may be able to provide more context from BCTHEME-344 as to why the changes were made.

rowleyaj avatar Jun 19 '21 09:06 rowleyaj

@oggede it looks like this was changed in #1937, likely for accessibility reason so tab focus is correct.

if you want the old behaviour you may be able to revert the changes made in templates/components/carousel.html however this may affect the accessibility on site.

cc @yurytut1993 who made the original changes, they may be able to provide more context from BCTHEME-344 as to why the changes were made.

Thanks for your reply @rowleyaj cc @yurytut1993

This makes sense for desktop, but not mobile. See this image here: https://i.imgur.com/GCOxLFi.jpg

As you can see, when the mobile version is enabled, the button moves from the carousel area to below the carousel area. If you have an image with content, (such as a breadboard as shown on the 2nd image of the cornerstone demo store) the user will likely want to click on that area, however there is no link. In other words, the focus area changes on the mobile template.

The focus really depends on the context of the image. Some carousel images will have less detail and be very generic in nature, such as carousel image 1. However some carousel images have more detail and are more likely to draw the visitor to click on them.

Generally speaking images are more likely to be "click bait" then text buttons. So the focus should always be on the image, unless of course there is a text button over the image as is the case with the default desktop view (So I understand why @yurytut1993 made this change)

The best solution would be to create an additional link box for each of the button and the image. See below:

https://i.imgur.com/TLQZ8og.jpg

As you can see, there are two link options. If both fields are filled, then both the button and image will have links. If one is filled, then one will have link, if none are filled then both have no links etc. In other words, there is now choice.

oggede avatar Jun 20 '21 02:06 oggede

Hello @oggede and @rowleyaj I can confirm that this implementation related to accessibility. We should discuss with the team what changes can we provide in this context to cover all cases and needs. I will notify you with results of the discussion. P.S. Reverting this ticket can cause issues so maybe it is better to wait until we will have results of our discussion.

yurytut1993 avatar Jun 22 '21 09:06 yurytut1993

@oggede @rowleyaj I believe we can make both slide image and button clickable. And we even do not need extra link in page builder - slide will have 2 entry points (image and button) which will be redirecting user to the same url. On the image below you can see clickable and non-clickable zones slide Hope this behaviour is acceptable for you. It can be implemented in one of the nearest releases. I will notify you here.

yurytut1993 avatar Jul 02 '21 09:07 yurytut1993

@oggede @rowleyaj I believe we can make both slide image and button clickable. And we even do not need extra link in page builder - slide will have 2 entry points (image and button) which will be redirecting user to the same url. On the image below you can see clickable and non-clickable zones slide Hope this behaviour is acceptable for you. It can be implemented in one of the nearest releases. I will notify you here.

Yes, please make both image and button clickable, thanks @yurytut1993

oggede avatar Jul 03 '21 00:07 oggede

Hello @oggede, the fix for this issue will be in the next Cornerstone release. Thank you for raising this!

bc-azvierieva avatar Jul 27 '21 07:07 bc-azvierieva