Improve accessibility when deleting terms via AJAX: color contrast & spoken message.

[jeremyfelt]

When deleting a term via the inline "Delete" link in the taxonomy list table, the background will turn red (#FF3333) while the request is passed via AJAX and remain so until the term is deleted.

For terms with few associations, this won't take more than a second, so it disappears very quickly. For terms with many associations, this can hang on the screen for a while and the contrast of the text in that row becomes very poor.

Background: #FF3333 (I believe set in lists.js
Slug text: #555555 (2.04:1 ratio)
Anchor text: #0073AA (1.43:1 ratio)
Hover text: #00A0D2 (1.2:1 ratio)
Delete text: #AA0000 (2.13:1 ratio)
Delete hover text: #DC3232 (1.27:1 ratio)

It seems like there may be a better color than red that can be used to convey that the row's removal is in progress.

[jeremyfelt]

I *think* this goes back to 2.5 when wp-lists.js was introduced in #4805. The colors likely have a similar issue elsewhere, but I haven't tested.

[afercia]

Discussed during today's accessibility bug scrub. Agreed this would be a nice improvement.

Worth also considering an audible message with speak(). Although there's already a JavaScript confirm dialog, an accessible feedback for screen reader users could help.

[wido]

May be just make the content of the table row semi transparent and use the spinner?
This way you don't need to use the red background you just block the UI and wait until the row disappear, the spinner will make his job on giving a feedback to the user.

[afercia]

Worth noting a similar color effect is used also for comments, for example when trashing a comment (see attached screenshot). Of course, the color is slightly different. Wondering if these color effects should be kept in the first place. They're pretty "old" and maybe this would be a good opportunity to explore something better.

Seems to me @wido made a good point: the most common pattern to communicate an "on going..." operation in WordPress is the spinner. I'd tend to think consistency is important and using the spinner would be more consistent. However, I'm not sure there's a good spot within the table rows where the spinner could be placed.

[afercia]

Color effect when trashing a comment

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

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

## Unlinked Accounts
The following contributors have not linked their GitHub and WordPress.org accounts: @nhatkar@….

Contributors, please ​read how to link your accounts to ensure your work is properly credited in WordPress releases.

To understand the WordPress project's expectations around crediting contributors, please ​review the Contributor Attribution page in the Core Handbook.

Please use @nikunj8866 WordPress profile.

### After Patch:

[SirLouen]

@nikunj8866 the problem here is not just changing slightly the color (otherwise it would have been sorted 6 years ago with such a simple patch).

The concern is how many accessibility features are missing.

Propose the full set of features for accessibility purposes in the patch.

Check wido and afercia proposals and consider implementing.

[joedolson]

Updating the summary of this issue to cover the two major topics.

The contrast issue, on the whole, is the less critical item. During the deleting process, the item being deleted is effectively a disabled item and isn't required to meet accessible contrast. *However*, the items aren't actually being disabled; it is possible to click on these links during the delete wait time.

I'd propose that the interactive elements in the row should be disabled during the deletion process.

Removing 'has-patch', as the current patch doesn't meet the current needs for the ticket.

[nikunj8866]

@joedolson @SirLouen Thanks for the update. I've revised the code to disable interactive elements within the row during the deletion process. This ensures they are no longer clickable or focusable while the delete action is in progress. Let me know if any further adjustments are needed.

[SirLouen]

Test Report

Description

✅ This report validates that the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8708.diff

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 136.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-One 2.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Patch Reproduction Steps

1. Create some categories (or whatever term you prefer)
2. Delete one category
3. 🐞 Buttons are disabled and no red animation appears

Expected Results

1. All clickable elements are disabled during deletion
2. A red animation appears during the deletion process.

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• Could be a good idea to open a new ticket to also improve the posts interface for deletion?

Supplemental Artifacts

Screencast: ​https://streamable.com/wu6x7p

[pmbaldha]

Test Report

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/8708.diff

Steps to Test

1. Go to Admin Dashboard > Posts > Categories.
2. Add a new category with the Manually delete it title. Screenshot: ​https://nimb.ws/RPv0rMc
3. Delete the Manually delete it category.

Expected Results

• ✅ The background and text color of the deleted taxonomy should be accessible.
• ✅ When deleting the taxonomy process is going on, other links should be disabled.

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

• ✅ Expected result #1 works as expected with patch.
• ✅ Expected result #2 works as expected with patch.

Screen recording with the patch:

​https://www.awesomescreenshot.com/video/40770511?key=25924672009a7e53ec9fabf96ded21d2

[pmbaldha]

Sorry, my last commented test report has a cached screencast video.
The Correct video is on ​https://www.awesomescreenshot.com/video/40772903?key=407a14486bd0c0077022c3b08b8fb350.

Screen recording with the patch:

​https://www.awesomescreenshot.com/video/40772903?key=407a14486bd0c0077022c3b08b8fb350.

[SirLouen]

@nikunj8866 proposed some code changes in the PR.

[nikunj8866]

@SirLouen Thanks for the review. I've implemented the proposed code changes in the PR.

I added some changes to improve the accessibility of these interactions. Notes are in the commit message.

[joedolson]

Re-reviewed and tested; marking for commit.

[joedolson]

In 60700:

Accessibility: Feedback & focus on deleting terms via AJAX.

When deleting a term using AJAX, notify screen reader users of the deletion using wp.a11y.speak(), set the active row to be unfocusable, then explicitly set new focus after the deletion is completed.

Props jeremyfelt, afercia, wido, nikunj8866, SirLouen, pmbaldha, joedolson.
Fixes #47101.