Rename element-invisible mixin to use HTML5 Boilerplate's visuallyhidden name

Comments

echoz’s picture

Shall we keep parity with D8 core's hypenated class name, "visually-hidden"?

Reference: Change records for Simplified names of "element-x" helper classes

JohnAlbin’s picture

Title:Rename element-invisible mixin to use HTML5 Boilerplate's visuallyhidden name» Rename element-invisible mixin to use HTML5 Boilerplate's visually-hidden name

I was thinking along these lines:

/**
* @file
* Mixins and extends for the visually hidden component.
*/

// Makes an element visually hidden, but accessible.
//
// Used for information required for screen-reader users to understand and use
// the site where visual display is undesirable. Information provided in this
// manner should be kept concise, to avoid unnecessary burden on the user.
@mixin visually-hidden {
  // "!important" is used to prevent unintentional overrides.
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    // IE6 and IE7 use the wrong syntax.
    clip: rect(1px 1px 1px 1px);
  }
  clip: rect(1px, 1px, 1px, 1px);
}

// Turns off the visually-hidden effect.
@mixin visually-hidden-off {
  position: static !important;
  clip: auto;
  height: auto;
  width: auto;
  overflow: auto;
}

// Makes an element visually hidden by default, but visible when focused.
@mixin visually-focusable {
  @include visually-hidden;

  &:active,
  &:focus {
    @include visually-hidden-off;
  }
}

/* Makes an element visually hidden, but accessible. */
%visually-hidden {
  @include visually-hidden;
}

/* Turns off the visually-hidden effect. */
%visually-hidden-off {
  @include visually-hidden-off;
}

/* Makes an element visually hidden by default, but visible when focused. */
%visually-focusable {
  @extend %visually-hidden;

  &:active,
  &:focus {
    @extend %visually-hidden-off;
  }
}

/* Add Drupal 7's version of the class names. */
.element-invisible {
  @extend %visually-hidden;
}
.element-focusable {
  @extend %visually-focusable;
}

JohnAlbin’s picture

Version:7.x-5.x-dev» 7.x-6.x-dev

Moving to new branch.

echoz’s picture

Curious for the use case of these as mixins. With no arguments, these static property/value pairs lend themselves to using the silent placeholder selectors, and specifically not mixins.

JohnAlbin’s picture

The use-case is media queries.

If you want to make something invisible only inside a media query, you can't extend a placeholder selector that is outside that media query. You have to use a mixin.

echoz’s picture

ah, thanks!

mparker17’s picture

Issue summary:View changes
Issue tags:+accessibility, +html5, +API change, +a11y

For whatever it's worth, +1 to this. :)

Tagging with similar tags to the original core issue ( #1363112: Simplify names of "element-x" helper classes ).

I'd be happy to write a patch if you wish.

mgifford’s picture

Issue tags:-a11y

I'm not sure if it's worth doing this in D7. On the plus side, it's consistent with D8 & where we are going with HTML5. On the minus side, this is a D7 theme and you're just going to be duplicating CSS classes.

In anycase, this isn't an urgent issue either way.

JohnAlbin’s picture

Status:Active» Fixed

On the minus side, this is a D7 theme and you're just going to be duplicating CSS classes.

Except that we are removing the system CSS file that contains the original ruleset for element-invisible. And Zen's ruleset uses this selector: .visually-hidden, .element-invisible so that the rest of core still works even though its not using the class name we'd prefer.

mgifford’s picture

Great that it's fixed. You'll be able to use your preferred class names in D8.