Make WordPress Core

Opened 9 months ago

Last modified 7 weeks ago

#63208 accepted defect (bug)

Slider: Revision page slider does not support touch interactions on mobile devices

Reported by: yogeshbhutkar's profile yogeshbhutkar Owned by: joedolson's profile joedolson
Milestone: 7.0 Priority: normal
Severity: normal Version: 6.9
Component: Revisions Keywords: has-patch dev-feedback has-test-info
Focuses: ui, accessibility Cc:

Description

The slider on the revisions page lacks touch interaction support on mobile devices, making it difficult for users to navigate revisions using touch gestures. This limitation affects the feature's usability and accessibility on touchscreen devices.

To replicate, perform the following steps:

  1. Create a post and ensure it has at least five revisions.
  2. Open the revisions page.
  3. On a mobile device, attempt to drag the slider.
  4. Verify that the slider does not respond to touch gestures.

Attachments (1)

before.mov (1.5 MB) - added by yogeshbhutkar 9 months ago.
A screencast of the bug described above is attached here:

Download all attachments as: .zip

Change History (15)

@yogeshbhutkar
9 months ago

A screencast of the bug described above is attached here:

This ticket was mentioned in PR #8627 on WordPress/wordpress-develop by @yogeshbhutkar.


9 months ago
#1

  • Keywords has-patch added

### Description

Trac ticket: https://core.trac.wordpress.org/ticket/63208

This PR adds touch event support, allowing users to drag the slider using touch gestures on mobile devices.

### Screencast

BeforeAfter
https://github.com/user-attachments/assets/81e37264-2b95-4134-ad39-a5bbc37f01f3https://github.com/user-attachments/assets/ffec25b3-cb66-4dd5-9c6a-caaf4f69a9bb

This ticket was mentioned in Slack in #core-test by oglekler. View the logs.


9 months ago

#3 @SirLouen
9 months ago

  • Keywords dev-feedback has-testing-info added

Combined Reproduction and Patch Testing Report

Description

This report validates that this issue can be reproduced and the patch work as expected

Environment

  • WordPress: 6.9-alpha-60093-src
  • PHP: 8.2.28
  • Server: nginx/1.27.4
  • Database: mysqli (Server: 8.0.41 / Client: mysqlnd 8.2.28)
  • Browser: Chrome 134.0.0.0 (Mobile)
  • OS: Android
  • Theme: Twenty Twenty-Five 1.1
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0

Reproduction Steps

This can be done from a browser in a responsive view, but I've tested using a phone.

  1. Create a Post
  2. Add multiple edits in the post and save, repeat this 2 or 3 times
  3. Navigate to Revisions
  4. Try to drag the revisions' slider.
  5. 🐞 Slider doesn't move. You can still press on the checkpoints to switch revisions.

Expected Results

  • The slider moves on drag

Actual Results after patch

  • ✅ Issue resolved with patch.

#4 @wordpressdotorg
7 months ago

  • Keywords has-test-info added; has-testing-info removed

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


5 months ago

#6 @joedolson
5 months ago

  • Milestone changed from Awaiting Review to 6.9
  • Owner set to joedolson
  • Status changed from new to accepted

#7 @joedolson
5 months ago

So, I certainly like the idea of making this change - but this does require an edit to a vendor library. If you look at jQuery UI on Github, this is clearly not a heavily maintained package, but editing a 3rd party library is something we need to think about cautiously.

I think we should probably instead try to push on getting https://github.com/jquery/jquery-ui/pull/2362 merged, if we think there might be a possibility of an update from the 3rd party.

I'm commenting on the jQuery UI issue to see if we can get any movement there.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


4 months ago

#9 @joedolson
4 months ago

So, the official stance of the jQuery UI is that they are in maintenance mode: https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/

Practically speaking, I think that means our only option is to modify our copy if we want to make any changes.

I think this becomes a larger discussion, for that reason; effectively, the entirety of jQuery UI is in maintenance mode, so this should be an "all or nothing" decision. Either we fork it, or transition away.

We are effectively transitioning away, in the new editor environment, but the tail of use for this will be very, very long.

The slider is currently used by the admin in classic widgets, revisions, and the Iris color picker.

#10 @joedolson
4 months ago

Per a comment from a jQuery UI committer, this is something they'll consider for a release; pending some linting fixes and the release of jQuery 4.0 RC 1. Given our time frame for WP 6.9, it may be that we'll be able to just update the version.

#11 @nikunj8866
4 months ago

@joedolson I've resolved the reported linting errors, so we should be good on that front.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


8 weeks ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


7 weeks ago

#14 @joedolson
7 weeks ago

  • Milestone changed from 6.9 to 7.0

It's very unlikely that the jQuery UI release will be within the timeframe needed for 6.9, so I'm moving this to 7.0.

Note: See TracTickets for help on using tickets.