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

Issue tags:+accessibility

Forgot to tag.

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 {

Those are custom mixins, yes. But they use the exact same CSS from Drupal core.

Compare modules/system/system.base.css:

.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}
.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
  position: static !important;
  clip: auto;
}

with STARTERKIT/sass_custom.scss:

/* element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
@mixin element-invisible {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
  }
  clip: rect(1px, 1px, 1px, 1px);
}
// Turns off the element-invisible effect.
@mixin element-invisible-off {
  position: static !important;
  clip: auto;
  height: auto;
  width: auto;
  overflow: auto;
}
@mixin element-focusable {
  @include element-invisible;
  &:active,
  &:focus {
    @include element-invisible-off;
  }
}

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.

I'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.

Version:7.x-5.x-dev» 7.x-6.x-dev
Category:bug» task