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

[Denis-de-Bernardy]

see attached screenshot.

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.

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

other potential patch

third potential patch

third patch is probably the one to use

A lot of accessibility checkers require fieldsets to have legends.

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

Seeing this with FF 3.5b4 as well.

Replying to ryan:

Seeing this with FF 3.5b4 as well.

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

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. :-)

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

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

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

k, will give it a shot right away.

doesn't work either... :-(

Worked for me in FF 3.5b4.

this worked on my end:

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

patch coming right up.

Well, I put the invisible on the span.

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

there you go.

4th diff without the cruft

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

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

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

rather than left-positioning?

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

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

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.

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.

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

Drupal calls it "offscreen".

Still more style than function. :)

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

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