Make WordPress Core

Opened 6 years ago

Last modified 6 hours ago

#47101 accepted defect (bug)

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

Reported by: jeremyfelt's profile jeremyfelt Owned by: joedolson's profile joedolson
Milestone: 6.9 Priority: normal
Severity: normal Version: 2.5
Component: Taxonomy Keywords: has-patch has-test-info dev-feedback
Focuses: accessibility, javascript Cc:

Description

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.

Attachments (2)

Screen Shot 2019-05-02 at 1.42.22 PM.png (86.2 KB) - added by jeremyfelt 6 years ago.
47101 comments.png (111.3 KB) - added by afercia 6 years ago.
Color effect when trashing a comment

Download all attachments as: .zip

Change History (18)

#1 @jeremyfelt
6 years ago

  • Version set to 2.5

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.

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


6 years ago

#3 @afercia
6 years ago

  • Milestone changed from Awaiting Review to Future Release

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.

#4 @wido
6 years ago

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.

#5 @afercia
6 years ago

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
6 years ago

Color effect when trashing a comment

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


5 weeks ago

#7 @joedolson
5 weeks ago

  • Milestone changed from Future Release to 6.9
  • Owner set to joedolson
  • Status changed from new to accepted

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


5 weeks ago
#8

  • Keywords has-patch added; needs-patch removed

@nikunj8866 commented on PR #8708:


5 weeks ago
#9

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.

@nikunj8866 commented on PR #8708:


5 weeks ago
#10

### After Patch:

https://github.com/user-attachments/assets/32b9421f-e9d3-42cd-bdbe-e736ce2db979

#11 @nikunj8866
3 weeks ago

  • Keywords needs-testing added; needs-design removed

#12 @SirLouen
3 weeks ago

  • Keywords 2nd-opinion needs-design added; needs-testing removed

@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.

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


24 hours ago

#14 @joedolson
24 hours ago

  • Focuses javascript added
  • Keywords needs-patch added; has-patch 2nd-opinion needs-design removed
  • Summary changed from Improve contrast when deleting terms in list table via AJAX to Improve accessibility when deleting terms via AJAX: color contrast & spoken message.

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.

#15 @nikunj8866
11 hours ago

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

@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.

#16 @SirLouen
6 hours ago

  • Keywords has-test-info dev-feedback added; needs-testing needs-test-info removed

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

Note: See TracTickets for help on using tickets.