Visually hidden class name is not configurable #12

Closed
grahambates opened this Issue Apr 30, 2012 · 5 comments

Projects

None yet

2 participants

@grahambates

The site I'm working on is not using the html5 boilerplate visuallyhidden classname, but uses another equivalent class name. In this case Drupal's element-invisible class.

The only way I could see to handle this is to hack the source. It would be good if this was a configurable option.

@ginader
Owner

Do you have a example code I could look at? I would love to fix that :-)

@grahambates

Sure, this is what a hidden label looks like in Drupal:

<label class="element-invisible" for="edit-mail">E-mail <span class="form-required" title="This field is required.">*</span></label>

The element-invisible class hides the element in a similar way to HTML5 bp's visuallyhidden class i.e. it prevents the placeholder displaying:

.element-invisible {
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
}

Your code includes a special case for elements with the visuallyhidden class, but relies on the use of this specific class name.

        if($(label).hasClass('visuallyhidden')){
            $(label).removeClass('visuallyhidden').addClass('visuallyhidden-with-placeholder');
        }

Changing this to element-invisible in the source code works but feels a little hackish. It would be good if this class name was configurable, or at least checked against a list of common variations. Another idea would be to check the element's css properties to see if it's hidden in this way.

if($(label).css('position') === 'absolute' && $(label).css('clip') !== 'auto'){
    $(label).addClass('visuallyhidden-with-placeholder');
}
@ginader
Owner

Excellent comment! thanks a lot Graham!

@ginader ginader pushed a commit that closed this issue May 3, 2012
Dirk Ginader 1.9.2 more flexible way to "fix" labels that are hidden using clip() …
…thanks to graham bates. Close #12
afe2802
@ginader ginader closed this in afe2802 May 3, 2012
@ginader ginader reopened this May 4, 2012
@ginader
Owner

IE8 does not allow the clip property to be removed. Also it does not respect clip "auto" property and it seems i can't force clip: "". I will try to set the clip property to the dimensions of the label or something really big instead.

@ginader
Owner

I went with a configurable name for the class that needs to be removed instead. It feels very hacky otherwise

@ginader ginader closed this May 4, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment