UX Feature Request: Avoid text selection on model gallery navigation

MakerWorld
1

Add “user-select: none;” on the Model Image carousel prev and next buttons.

When clicking fast on the gallery buttons, the icon will be selected and the browser’s context menu for selected elements will pop up.

See Screenshot:

image
image972×643 118 KB

Please consider adding the following CSS to your Stylesheet:

.swiper-button-next,
.swiper-button-prev {
  user-select: none;
}

This will allow the users to click the buttons while disabling the raw text selection.
Please also consider adding title attributes with descriptions to these buttons.

3 Likes
2

Solid first post. Welcome to the forum.

2 Likes
3

@Tanklet what do you think?

4

Thanks. We will change it.

1 Like
5

Thanks a lot for improving the selection of the buttons!

But I also noticed that the gallery above is not linked anymore to the navigation buttons. Was this an intentional change or was a bug introduced?
Also again, some descriptive text would be helpful.

@Tanklet

6

Maybe I did not understand the problem. When a user clicks the navigation button, the image bar scrolls.

image
image903×847 66.7 KB

However, the selected image does not change. So the above big picture will not change when a navigation button is clicked.

If you have a suggested behavior, could you help provide a gif to help us understand it better?

7

IIRC, the behavior was changed here. In the previous iteration, clicking the button would select and activate the next item in the “image bar” and move the active element into the viewport when necessary. The activation also changed the top image. to the currently selected item in the “image bar”. That allowed us to use the buttons to navigate through the available images.

Currently, the buttons only scroll the “image bar” without activating the items.

In a perfect world:
The buttons would allow the user to navigate through the items. Each click would activate the next or the previous item, which is visualized as an active target with an outline (currently a green tint that is hard to see) for visually impaired users to be (at least WCAG2.0 compliant). Each button should have an aria-label and a title that indicates the action that is triggered by clicking the button. The thumbnails and the active status should be linked to the current state of the carousel. Also when using the alternative swiping on the top image, the active state is currently not reflected (visually), but it at least seems to scroll the currently active “button/thumbnail” into the view.

If I am not mistakenly wrong, u are currently using swiper for the gallery.

https://swiperjs.com/demos/310-thumbs-gallery-loop/core

This would match the expected behavior, with some a11y added.

See: Working Example | Web Accessibility Initiative (WAI) | W3C

8

After the update, the arrow sometime appears or not appearing at all. I had to reload the page to see it.

9

Thanks for the detailed suggestion. We will consider it in rencent update.

1 Like
10

Do you mean this two arrows?

image
image1596×1001 106 KB

I did not reproduce the issue.
If possible, could you share with us the following information?

  • Operation System (windows, macOS, linux, etc.)
  • Browser (chrome, saferi, edge, etc.)
11

macOS Safari, I’ll report back if I see it again - I restarted my computer and clear cache. Might be due to old cache after the update.

1 Like
12

@Tanklet

Here it happened again, macOS and Safari (latest).

Video link to view in browser: Video uploaded to CleanShot Cloud

1 Like
13

We’ve find the root cause and will fix it.
Thanks for your help : )

1 Like