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.