WordPress.org

Make WordPress Core

Opened 4 weeks ago

Closed 2 weeks 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 weeks ago.
Screen showing normal section.
Screen Shot 2020-10-02 at 8.19.33 AM.png (108.2 KB) - added by garrett-eclipse 4 weeks 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 weeks 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 weeks 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 weeks ago.
Screen of initial patch
51435.alt.diff (503 bytes) - added by garrett-eclipse 3 weeks 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 weeks ago.
Screen showing Alternate Patch
Privacy-Policy-Guide-H3.png (74.8 KB) - added by sabernhardt 3 weeks ago.
a section with H3 headings (using 51435.alt.diff)
51435.2.diff (681 bytes) - added by garrett-eclipse 3 weeks 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 weeks ago.
Refresh to use #666

Download all attachments as: .zip

Change History (20)

@garrett-eclipse
4 weeks ago

Screen showing normal section.

@garrett-eclipse
4 weeks ago

Same section but marked as removed

@garrett-eclipse
4 weeks 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 weeks ago

@garrett-eclipse
3 weeks ago

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

@garrett-eclipse
3 weeks ago

Screen of initial patch

@garrett-eclipse
3 weeks 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 weeks ago

Screen showing Alternate Patch

#2 @garrett-eclipse
3 weeks 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 weeks 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 weeks 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 weeks ago

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

@garrett-eclipse
3 weeks 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 weeks 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 weeks 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 weeks ago

Refresh to use #666

#7 in reply to: ↑ 6 @garrett-eclipse
3 weeks 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 weeks ago

Great! 💪

#9 @sabernhardt
3 weeks ago

Thanks! That's better.

#10 @SergeyBiryukov
2 weeks 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.