.invisible class doesn't work as expected in some browsers (such as camino, which is FF based)

[Denis-de-Bernardy]

see attached screenshot.

[Denis-de-Bernardy]

Tried offsetting the margins, using relative positioning with gargantuan margins, !important attribute to css, nothing short of display: none will work.

Camino is a popular browser among Mac users. It's based on Mozilla, but faster due to it using native code.

[Denis-de-Bernardy]

scanning through the code base, it only affects legends with a class of invisible.

[Denis-de-Bernardy]

other potential patch

[Denis-de-Bernardy]

third potential patch

[Denis-de-Bernardy]

third patch is probably the one to use

[ryan]

A lot of accessibility checkers require fieldsets to have legends.

[ryan]

And hide-if-js uses display: none, which won't work for accessibility.

[ryan]

Seeing this with FF 3.5b4 as well.

[Denis-de-Bernardy]

Replying to ryan:

Seeing this with FF 3.5b4 as well.

I'm not surprised, since Camino uses the same engine...

[Denis-de-Bernardy]

Replying to ryan:

A lot of accessibility checkers require fieldsets to have legends.

are the fieldsets truly needed in the first place? because as things currently are, it's *really* ugly. :-)

[ryan]

Added some comments to #9445 since several people are following that ticket.

[Denis-de-Bernardy]

tried height/width/overflow, but I'm afraid it doesn't fix legends...

[ryan]

All recommendations I've seen are to use a span inside the legend and hide that. Just asked on twitter and got the same.

[Denis-de-Bernardy]

k, will give it a shot right away.

[Denis-de-Bernardy]

doesn't work either... :-(

[ryan]

Worked for me in FF 3.5b4.

[Denis-de-Bernardy]

this worked on my end:

* legend.invisible span {
	position: absolute;
	left: -1000em;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

patch coming right up.

[ryan]

Well, I put the invisible on the span.

<legend><span class="invisible"><?php _e('Admin Color Scheme')?></span></legend>

[Denis-de-Bernardy]

there you go.

[Denis-de-Bernardy]

4th diff without the cruft

[Denis-de-Bernardy]

just re-uploaded it, I had left some cruft.

[filosofo]

For the .invisible hack, don't you mean to use

display:block;
overflow:hidden;
text-indent:-1000em;

rather than left-positioning?

[ryan]

We want to hide visually without hiding from screen readers. overflow:hidden will hide from screen readers.

[ryan]

Heh, looks like we both patched, although I did the invisible on the span. Don't know if one way is better than another.

[ryan]

Replying to ryan:

We want to hide visually without hiding from screen readers. overflow:hidden will hide from screen readers.

Oops, misread that overflow as display. We're using one of the recommendations made here:

​http://webaim.org/forums/viewtopic.php?id=356

There seem to be a dozen different recommended ways.

[Denis-de-Bernardy]

the invisible is probably better on the legend, you never know if one browser shows up and decides to format that thing in such a way that (since it has content) it ends up generating a big line.

[filosofo]

While I'm here, any chance we could rename "invisible" to something more semantic, like "screen-reader-text" or the like?

[ryan]

Drupal calls it "offscreen".

[filosofo]

Still more style than function. :)

[ryan]

Indeed. No objection to screen-reader-text or the like.

[ryan]

(In [11283]) Fix hiding off offscreen legends in Firefox. Props Denis-de-Bernardy. fixes #9783