I was surprised to hear that Zen has it's own unique implementations of CSS display:none alternatives in sass/_custom.scss
- @mixin element-invisible-off {
- @mixin element-focusable {
- @include element-invisible;
- @mixin unpublished-div {
This isn't a problem, and as a member of my team says, "The nice part about it is that it is a function so if you want to tweak it then it propagates throughout your code."
But I am curious why you went this route & what level of testing has been done with it for accessibility. Zen's an important theme and I want to make sure that this new code isn't producing barriers for visitors. Just not sure why it's changed. Might well be implications.
As you know, this was a mammoth issue for a bit of CSS - #473396: Defining System-Wide Approaches to Remove, Make Invisible & Push Content Off-screen with CSS
But we do need to start thinking about how to improve this in Drupal 8 and there are options like:
http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
Comments
Comment #1
mgiffordForgot to tag.
Comment #2
JohnAlbinThose are custom mixins, yes. But they use the exact same CSS from Drupal core.
Compare modules/system/system.base.css:
with STARTERKIT/sass_custom.scss:
Oh. Hmm… I guess I implemented the snook.ca version of element-invisible. I don't specifically remembering deciding to do that, but that's what the code comment says.
Comment #3
mgiffordI've been trying to get some testing around the snook.ca version of the code to do some other verifications. Something to consider for Drupal 8. Just haven't been able to mobilize for the testing, it all takes resources.
Oh ya, and thanks for the detailed clarification.
Comment #4
JohnAlbinFYI, #1734124: Convert element-invisible/element-focusable mixins into @extend placeholder selectors
Comment #5
JohnAlbinComment #6
KrisBulman CreditAttribution: KrisBulman commentedrelated #2038523: Rename element-invisible mixin to use HTML5 Boilerplate's visually-hidden name
Comment #7
steinmb CreditAttribution: steinmb as a volunteer commentedComment #8
JohnAlbinGoing to stick with the snook.ca one for now. It's the one that's used in a lot of places around the internets.
Comment #9
JohnAlbinDrupal 8 has a visually-hidden that is closer (but not exactly) the same as Zen's. Let's update to the D8 version.
Comment #10
JohnAlbinComment #12
JohnAlbin