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

mgifford’s picture

Issue tags: +Accessibility

Forgot to tag.

JohnAlbin’s picture

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.

mgifford’s picture

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.

JohnAlbin’s picture

JohnAlbin’s picture

Version: 7.x-5.x-dev » 7.x-6.x-dev
Category: bug » task
KrisBulman’s picture

steinmb’s picture

Issue summary: View changes
Parent issue: » #2448145: [meta] Release Zen 7.x-6.0
JohnAlbin’s picture

Status: Active » Postponed (maintainer needs more info)

Going to stick with the snook.ca one for now. It's the one that's used in a lot of places around the internets.

JohnAlbin’s picture

Assigned: Unassigned » JohnAlbin
Status: Postponed (maintainer needs more info) » Needs work

Drupal 8 has a visually-hidden that is closer (but not exactly) the same as Zen's. Let's update to the D8 version.

JohnAlbin’s picture

Title: Variations from Core's element-invisible » Make visually-hidden component match Drupal 8's

  • JohnAlbin committed fa36a48 on 7.x-6.x
    Issue #1638036 by JohnAlbin: Make visually-hidden component match Drupal...
JohnAlbin’s picture

Assigned: JohnAlbin » Unassigned
Status: Needs work » Fixed

Status: Fixed » Closed (fixed)

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