Make WordPress Core

Opened 9 months ago

Closed 9 months ago

Last modified 9 months ago

#60139 closed enhancement (fixed)

Clean up ClipboardJS instances from focus management workaround

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 6.5 Priority: normal
Severity: normal Version:
Component: External Libraries Keywords: has-patch has-testing-info
Focuses: accessibility, javascript Cc:

Description

See related issue and PR on the Gutenberg editor repository:
https://github.com/WordPress/gutenberg/issues/57154 and https://github.com/WordPress/gutenberg/pull/57156

ClipboardJS used to suffer from a bug that triggered a focus loss. Over time WordPress implemented its own workaround to avoid this focus loss. The issue was also reported upstream at https://github.com/zenorocha/clipboard.js/issues/680

ClipboardJS 2.0.11 includes a fix for this focus loss issue so that the workaround used by WordPress is no longer necessary.
Reference:
https://github.com/zenorocha/clipboard.js/releases/tag/v2.0.11
https://github.com/zenorocha/clipboard.js/pull/807

Given that Core already uses ClipboardJS 2.0.11 since a while, we can now clean up all the related code for all the 'Copy' buttons in the codebase.

Attachments (1)

60139.diff (2.7 KB) - added by paulkevan 9 months ago.

Download all attachments as: .zip

Change History (7)

@paulkevan
9 months ago

#1 @paulkevan
9 months ago

@afercia had trouble attaching the diff (see: https://wordpress.slack.com/archives/C02QB8GMM/p1703242790604879) hence, why I added it.

#2 @afercia
9 months ago

  • Keywords has-patch added; needs-patch removed

Test instructions for 60139.diff

Test the patch in a couple places where there is a 'Copy' button for example:

  • Go to Tools > Site Health > Info
  • Use the keyboard to move focus to the 'Copy site info to clipboard' button.
  • Activate the button by pressing the Enter or Spacebar keys.
  • Observe focus stays on the button.
  • Go to Media > List view
  • Move focus to one of the attachments 'Copy URL' button in the Quick actions.
  • Activate the button by pressing the Enter or Spacebar keys.
  • Observe focus stays on the button.
  • Go to Media > Grid view
  • Open one of the attachments modal dialog details.
  • Move focus to the 'Copy URL to clipboard' button.
  • Activate the button by pressing the Enter or Spacebar keys.
  • Observe focus stays on the button.

#3 @dhrumilk
9 months ago

  • Keywords has-testing-info added

Test Report

Environment

  • 12th Gen Intel(R) Core(TM) i5-1240P 1.70 GHz
  • Chrome 120.0.6099.111
  • Server: nnginx/1.25.1
  • PHP: 7.4.33
  • WordPress:6.5-alpha-56966-src
  • Theme: 1.3 Twenty Twenty-Three (twentytwentythree)

Test Results

working as expected.

After the patch-
http://tinyurl.com/ytr6oc7o

Last edited 9 months ago by dhrumilk (previous) (diff)

#4 @afercia
9 months ago

  • Keywords commit added

#5 @afercia
9 months ago

  • Owner set to afercia
  • Resolution set to fixed
  • Status changed from new to closed

In 57231:

External Libraries: Accessibility: Clean up clipboard.js Copy buttons from focus management workaround.

clipboard.js used to suffer from a bug that triggered a focus loss when activating the Copy buttons. The bug was fixed a while ago with the clipboard.js 2.0.11 release so that the workaround implemented in WordPress is no longer necessary.

Props dhrumilk, paulkevan, afercia.
Fixes #60139.

#6 @afercia
9 months ago

  • Keywords commit removed
Note: See TracTickets for help on using tickets.