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

Comments

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

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

Title:Rename element-invisible mixin to use HTML5 Boilerplate's visuallyhidden nameRename 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;
}

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

Moving to new branch.

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.

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.

ah, thanks!

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.