Make WordPress Core

Opened 6 weeks ago

Closed 4 weeks ago

#65994 closed defect (bug) (fixed)

Restore the zebra striped styling on the Privacy tables

Reported by: afercia Owned by: joedolson
Priority: normal Milestone: 7.2
Component: Administration Version:
Severity: normal Keywords: needs-design-feedback has-patch commit
Cc: Focuses: accessibility

Description

Splitting this out from #65807.

The List Tables in the WordPress admin use a 'zebra striped' styling, where the background color of the table rows alternates white and light gray.

This pattern is a widely used visual aid that improves usability of the table.

However, the Privacy tables styling intentionally overrides the default striping and makes all the table rows have a white background. This was noticed on #65807 and no reasoning for this override was found in the tickets that introduced the Privacy tables.

It would be good to investigate whether there are still good reasons for this override. If none is found, restoring the default striping appears to be the best option for better usability and consistency.

Change History (7)

#1 @hbhalodia
6 weeks ago

Hi Team, I am working on the issue to check if that was intentional change and will add the comment here. I would also raise PR to restore the stripped variation if nothing concrete is found.

Thanks,

This ticket was mentioned in ​PR #13329 on ​WordPress/wordpress-develop by ​@hbhalodia.


6 weeks ago
#2

  • Keywords has-patch added

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

## Screenshots

Before After
https://github.com/user-attachments/assets/2b712e0d-0a4c-4cb0-9d03-c12536732b68 https://github.com/user-attachments/assets/a1677a86-1d76-4176-acdf-82ad26aeb637
https://github.com/user-attachments/assets/1e0e8f90-229c-41b1-8eaf-0f7b5b89a41d https://github.com/user-attachments/assets/ede8df41-6969-4764-9275-1f8f8672dda4

## Use of AI Tools

  • Claude Code, Opus 5
  • Used for initial screening, finding out whe/why zebra stripping removed and other usecase.
  • For fixing the issue.

---
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See ​GitHub Pull Requests for Code Review in the Core Handbook for more details.

---

## AI Summary

### Problem

The Export/Erase Personal Data list tables carry the striped class like every other list table, but CSS in forms.css forced every body cell to background: #fff, cancelling the striping. This made these two screens inconsistent with the rest of the admin and dropped a useful visual aid for scanning rows.

### Why the override existed

It was not a decision about striping. When the screens were added in r42967 (#43481), the row background was used to carry status: confirmed requests were tinted pale blue (#f7fcfe) and failed ones pale peach (#fef7f1). Striping and status tinting can't both own the row background, so white was the neutral ground the design needed. Rows were separated by a 1px inset shadow instead.

That reason is gone: r63010 (#65787) moved status colour off the row and onto the checkbox column's left border, so nothing competes for the row background any more.

### Changes

  • Removed background: #fff from .privacy_requests tbody td.check-column and .privacy_requests tbody td:not(.check-column), .privacy_requests tbody th. This is the actual fix — cells return to transparent and the striping shows through.
  • Changed the 4px border-left on the status gutter from #fff to transparent, so it no longer paints a white sliver across grey rows.
  • Removed background-color: #f6f7f7 from .status-request-failed td.check-column. That is the exact zebra stripe colour, so the "failed" highlight would have been invisible on every other row. The red border-left-color and the red .status-label already convey it.
  • Removed background-color: #fff from .status-request-confirmed td.check-column, which would have punched a white gap through the stripes.
  • Added a shared background for .has-request-results and .request-results (see below).

### Keeping an expanded request and its results together

privacy-tools.js injects a real <tr class="request-results"> after a request row when you click Download/Erase. With striping restored, that injected row lands on the opposite stripe from the request it belongs to, so the two would read as unrelated rows instead of one result.

Both rows are now pinned to a single shared background so the pair still reads as one unit:

.privacy_requests tbody tr.has-request-results > *,
.privacy_requests tbody tr.request-results > * {
        background-color: #fff;
}

Known trade-off: the injected row shifts nth-child parity, so rows below the expanded pair swap stripe colours. This isn't fixable in pure CSS, and it only occurs in a transient, user-triggered state, so it's left as-is rather than adding JS re-striping. Happy to change that if reviewers prefer.

### Testing instructions

  1. Go to Tools → Export Personal Data and add at least 4 requests (any email works).
  2. Confirm rows now alternate white / #f6f7f7, matching other list tables.
  3. Hover a row's Requester cell and click Download personal data.
  4. Confirm the results row that appears shares the same background as its request row above it.
  5. Repeat on Tools → Erase Personal Data with Erase personal data.
  6. Confirm the red left bar on a failed request is still visible on both a white and a grey row.

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


6 weeks ago

#4 @joedolson
6 weeks ago

  • Milestone Awaiting Review → 7.2

Thanks for tracking that down, @hbhalodia! Milestoning for 7.2.

#5 @joedolson
6 weeks ago

  • Owner set to joedolson
  • Status new → accepted

#6 @joedolson
4 weeks ago

  • Keywords commit added

It looks to me like @afercia's feedback has been handled effectively, and this works well in my testing.

#7 @joedolson
4 weeks ago

  • Resolution → fixed
  • Status accepted → closed

In 63645:

Privacy: Restore list table zebra striping.

The Privacy export and erase tables overrode zebra striping because they used background color to represent row states. When the background color was changed to a left border indicator, the striping was not restored.

Restore zebra striping and add targeted overrides to ensure that the inserted tr for request results has a style matching its related row.

Props afercia, hbhalodia, joedolson.
Fixes #65994.

Note: See TracTickets for help on using tickets.