WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 3 months ago

#51435 closed defect (bug) (fixed)

Denote removed suggested privacy policy text in a more noticeable way on the privacy policy guide

Reported by: garrett-eclipse Owned by: garrett-eclipse
Milestone: 5.6 Priority: normal
Severity: normal Version: 5.5
Component: Privacy Keywords: has-patch has-screenshots commit
Focuses: ui, accessibility, css, administration Cc:

Description

In [48145]/#47327 the italics were removed from the privacy policy guide. This was used to help differentiate the sections of removed text on the guide. With this change there's not much visually different now, just a change of colour (#444 > #666) and weight (400 > 600).

This ticket is to revisit how we denote removed sections in the privacy policy guide. While there is the #49264 to explore a redesign of the entire section this issue is more of a bug and am hoping to address within 5.6.

Attachments (10)

Screen Shot 2020-10-02 at 8.29.29 AM.png (101.9 KB) - added by garrett-eclipse 4 months ago.
Screen showing normal section.
Screen Shot 2020-10-02 at 8.19.33 AM.png (108.2 KB) - added by garrett-eclipse 4 months ago.
Same section but marked as removed
Screen Shot 2020-10-02 at 8.38.01 AM.png (95.3 KB) - added by garrett-eclipse 4 months ago.
Potential Concept: Apply the warning left border, change color more (#999), Reduce weight instead of increase it (200). Thoughts?
51435.diff (1.2 KB) - added by garrett-eclipse 3 months ago.
Initial patch to change the notice to a warning, and lighten the color and weight of the privacy-text.
Screen Shot 2020-10-09 at 7.23.48 PM.png (112.1 KB) - added by garrett-eclipse 3 months ago.
Screen of initial patch
51435.alt.diff (503 bytes) - added by garrett-eclipse 3 months ago.
Alternate patch to leave the notice an info and instead apply a left warning border down the length of the removable text.
Screen Shot 2020-10-09 at 7.28.23 PM.png (123.9 KB) - added by garrett-eclipse 3 months ago.
Screen showing Alternate Patch
Privacy-Policy-Guide-H3.png (74.8 KB) - added by sabernhardt 3 months ago.
a section with H3 headings (using 51435.alt.diff)
51435.2.diff (681 bytes) - added by garrett-eclipse 3 months ago.
Refresh to go with the alt (left yellow border), avoid contrast issues and apply font styling to all heading levels.
51435.3.diff (662 bytes) - added by garrett-eclipse 3 months ago.
Refresh to use #666

Download all attachments as: .zip

Change History (20)

@garrett-eclipse
4 months ago

Screen showing normal section.

@garrett-eclipse
4 months ago

Same section but marked as removed

@garrett-eclipse
4 months ago

Potential Concept: Apply the warning left border, change color more (#999), Reduce weight instead of increase it (200). Thoughts?

This ticket was mentioned in Slack in #core-css by ryelle. View the logs.


3 months ago

@garrett-eclipse
3 months ago

Initial patch to change the notice to a warning, and lighten the color and weight of the privacy-text.

@garrett-eclipse
3 months ago

Screen of initial patch

@garrett-eclipse
3 months ago

Alternate patch to leave the notice an info and instead apply a left warning border down the length of the removable text.

@garrett-eclipse
3 months ago

Screen showing Alternate Patch

#2 @garrett-eclipse
3 months ago

  • Keywords has-patch needs-design-feedback needs-testing added; needs-patch needs-design removed
  • Milestone changed from Awaiting Review to 5.6

I've uploaded two design options for illustrating the removable policy content when a plugin has been removed.

Initial Option - 51435.diff
*Makes the notice a warning and lightens the font color and weight of the removable text.

Alternate Option - 51435.alt.diff
*Leaves the notice a info and lightens the same as the other but places a warning styled left border along the length of the removable text to illustrate all that can be removed.

#3 @audrasjb
3 months ago

  • Keywords has-screenshots added; needs-testing removed

Hi,
The second option look really great to me!
The first one is great too, but I'd "vote" for the second one.

I tested 51435.alt.diff and it applies nicely on my side 👍

#4 @sabernhardt
3 months ago

Between the two options, I prefer adding a border. However, I have trouble reading medium-gray text against a gray background, so I don't want the text lightened any more.

Contrast ratios in removed text sections:

  • 2.52:1 #999/#f1f1f1 (regular text)
  • 2.85:1 #999/#fff (sample text)
  • 3.63:1 #707f8f/#f1f1f1 (H2 headings)
  • 1.53:1 #ffb900/#f1f1f1 (yellow border)

Also, if H2 headings are a different shade and/or weight, the same probably should be applied to the H3 and other tags.

@sabernhardt
3 months ago

a section with H3 headings (using 51435.alt.diff)

@garrett-eclipse
3 months ago

Refresh to go with the alt (left yellow border), avoid contrast issues and apply font styling to all heading levels.

#5 @garrett-eclipse
3 months ago

  • Keywords needs-testing added; needs-design-feedback removed

Thanks @audrasjb / @sabernhardt let's go with the alt (left yellow border) as it will also let us denote the section without affecting contrast too much (hopefully). Please see 51435.2.diff would love a recheck on contrast there, if it's still not passing feel free to supply some suggested hexes.

#6 follow-up: @audrasjb
3 months ago

@garrett-eclipse FWIW, it looks like #777 foreground color doesn't pass WCAG AA against #f1f1f1 foreground. The old #666 foreground color was ok.

The rest of the patch looks great to me :-)

@garrett-eclipse
3 months ago

Refresh to use #666

#7 in reply to: ↑ 6 @garrett-eclipse
3 months ago

  • Keywords commit added; needs-testing removed

Replying to audrasjb:

@garrett-eclipse FWIW, it looks like #777 foreground color doesn't pass WCAG AA against #f1f1f1 foreground. The old #666 foreground color was ok.

Thanks for the note @audrasjb updated in 51435.3.diff to use #666.

Let's move this along if you're happy.

#8 @audrasjb
3 months ago

Great! 💪

#9 @sabernhardt
3 months ago

Thanks! That's better.

#10 @SergeyBiryukov
3 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 49170:

Privacy: Denote removed suggested privacy policy text in a more noticeable way.

Props garrett-eclipse, sabernhardt, audrasjb.
Fixes #51435.

Note: See TracTickets for help on using tickets.