Download & Extend

Unpublished node's pink background unclear

Project:Drupal core
Version:7.x-dev
Component:node.module
Category:task
Priority:normal
Assigned:attheshow
Status:closed (fixed)
Issue tags:accesssibility, needs accessibility review, Needs design review, UBUserTesting2009, Usability

Issue Summary

Identified at UB Usability Testing: http://www.drupalusability.org/node/148

The pink text on an unpublished node does not accurately indicate to the user that the node is unpublished.

Comments

#1

Assigned to:Anonymous» attheshow
Status:active» needs review

This patch makes a change to node/node.css, node/node.tpl.php, and garland/node.tpl.php to display the word "UNPUBLISHED" behind the body content.

I admit, this is totally ripping off the Zen theme, but I think Zen includes many great solutions for problems.

#2

AttachmentSizeStatusTest resultOperations
unpublished_indicator.patch2.85 KBIdleFailed: Failed to apply patch.View details

#3

A screenshot would help move this along. Sounds proper to me.

#4

Good idea. Thanks. Screenshot is attached.

AttachmentSizeStatusTest resultOperations
unpublished_indicator.png73.28 KBIgnored: Check issue status.NoneNone

#5

Status:needs review» reviewed & tested by the community

well done.

#6

Agreed, very nice.

#7

Status:reviewed & tested by the community» needs review
Issue tags:+Needs design review

Tagging as "needs design review"... I'm not sure how they're going to feel having all of that extra stuff added to node.css, and they might have some other suggestions on implementation.

#8

Just checking...this would be translatable, yes?

#9

Yes, the unpublished is run through t().

#10

Hmm… I wonder where I've seen this before. lol! #207743: Add Zengine Block Edit Links and "Unpublished" background

Yeah, the “drupal is slightly embarrassed this node is unpublished” idea isn't intuitive.

#11

Yes much better of course. The only way to solve this unambiguously is with actual text.
Any reason to still keep the pink then?

#12

A background of diagonal lines would also get the job done. Think of the background patterns on checks.

#13

@modulist: I don't understand how diagonal lines would say that content is not published...

#14

Status:needs review» reviewed & tested by the community

Do we need a background at all if we are using text anyway was my question, or are you suggesting to add the background image to the text solution? There is no graphics-only solution without using the actual 'unpublished' text that will communicate "unpublished" unambiguously imo.

The diagonal raster is an elegant idea, I like it but not fool proof. This is for the theme-independent solution in node.css, I think we should focus on being as clear as possible. A theme could add the diagonal raster.

3 weeks since webchick asked for more design feedback, I mentioned it 2 times in the IRC design channel during that time. Let's do it.

#15

Status:reviewed & tested by the community» needs work

Eh sorry. Let's remove the background color first, it's meaningless.

#16

Status:needs work» needs review

Removed the background color. Attaching updated patch.

AttachmentSizeStatusTest resultOperations
unpublished_indicator2.patch1.95 KBIdlePassed: 12195 passes, 0 fails, 0 exceptionsView details

#17

New screenshot, please?

#18

Sure thing. Attached.

AttachmentSizeStatusTest resultOperations
unpublished_indicator2.png275.59 KBIgnored: Check issue status.NoneNone

#19

Works fine, one minor thing, do we have to show UNPUBLISHED on node preview too?

#20

Probally not.

#21

Added three lines to node.css

.node-preview div.unpublished {
  display: none;
}

works fine

AttachmentSizeStatusTest resultOperations
394736_unpublished_indicator_21.patch2.15 KBIdlePassed: 12418 passes, 0 fails, 0 exceptionsView details
unpublished_node_view_before.png46.35 KBIgnored: Check issue status.NoneNone
unpublished_node_view_after.png34.53 KBIgnored: Check issue status.NoneNone
unpublished_before.png51.83 KBIgnored: Check issue status.NoneNone
unpublished_after.png49.08 KBIgnored: Check issue status.NoneNone

#22

Status:needs review» reviewed & tested by the community

Oke, so I am going to mark this RTBC. It seems that this indicator is really good, and I see no reason not to go forward with this. As yoroy his last question was to remove the body background, that has been done - so I think all issues have been addressed.

#23

Status:reviewed & tested by the community» fixed

Committed to CVS HEAD. Thanks!

#24

Status:fixed» closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

#26

Status:closed (fixed)» needs work
Issue tags:+needs accessibility review

I don't see this as having been committed.

While I am for adding the textual message the implementation just seems like a quiet work-around the API freeze - this should be in a variable available to all themes, not hard coded using t() in a template file.

Also the styles. We already have way too many design styles coming from modules - themes should style this output, not the module.

Isn't this an accessibility issue?

#27

Issue tags:+accesssibility

Tagging. Would be great if when things were committed to core that there was a link to the code & commit message. I think Redmine & other tools do this, but a Git Drupal solution would be very cool. Well, hopefully for D8..

That being said, has there been a review with tools like http://wave.webaim.org/toolbar

#28

#29

Thanks yoroy! I was just dreaming about an integrated system where there were direct links to the repository when stuff got into core. I should really put this in a feature request though.....

#30

My eyes are pretty good. I had a hard time even seeing the pink background myself. Switching it to having the text Unpublished in the background is just so much better!

+1 for this patch for core themes. It's definitely the right approach.

This is an accessibility issue for sure. It's also a usability issue. If even with good eyes the pink doesn't stand out it's really not very useful.

It would be useful to see how a blind user deals with this.. It is adding a whole new level of information that they wouldn't have ever been able to know about.

VoiceOver read it correctly. I think it's good.

#31

Looking at the related issue #867830: "unpublished" status of rendered entities is not accessible

Wondering if we should nix the font-family definition & also move the 75px to 4em's.

#32

Category:task» bug report
Priority:normal» major
Status:needs work» needs review

We need to nix the styles, all of them, no reason why the core module needs to supply styles + it's doing tricky things like height: 0; overflow:visible; as a positioning technique, which could be an accessibility issue with some screen-readers.

So:

1) We can't add a variable (fast API freeze and very close to beta), so add it in the template in D7 and fix in D8.
2) Styles are added by the theme in follow up issues, only needed for Bartik and Garland.

This is a bug:

a) use of color only is a WCAG violation
b) its major because there is no way for screen reader uses to get the same information on the same page, they will have to edit the node and review the publishing options - which is pretty unfair.

AttachmentSizeStatusTest resultOperations
node-unpublished-394736.patch2.17 KBIdlePASSED: [[SimpleTest]]: [MySQL] 25,644 pass(es).View details

#33

Status:needs review» closed (duplicate)

OK, lets kill this in favor of #867830: "unpublished" status of rendered entities is not accessible, while this is older that issue is proposing a more robust solution.

#34

Category:bug report» task
Priority:major» normal
Status:closed (duplicate)» closed (fixed)
nobody click here