WordPress.org

Make WordPress Core

Opened 8 years ago

Closed 8 years ago

#9783 closed defect (bug) (fixed)

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

Reported by: Denis-de-Bernardy Owned by:
Milestone: 2.8 Priority: high
Severity: major Version: 2.8
Component: UI Keywords: has-patch tested commit dev-feedback
Focuses: Cc:

Description

see attached screenshot.

Attachments (6)

screen-capture.png (188.9 KB) - added by Denis-de-Bernardy 8 years ago.
9783.diff (463 bytes) - added by Denis-de-Bernardy 8 years ago.
9783.2.diff (19.2 KB) - added by Denis-de-Bernardy 8 years ago.
other potential patch
9783.3.diff (18.4 KB) - added by Denis-de-Bernardy 8 years ago.
third potential patch
9783.4.diff (19.3 KB) - added by Denis-de-Bernardy 8 years ago.
4th diff without the cruft
9783.5.diff (18.9 KB) - added by ryan 8 years ago.

Download all attachments as: .zip

Change History (35)

#1 @Denis-de-Bernardy
8 years ago

  • Priority changed from normal to high

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.

#2 @Denis-de-Bernardy
8 years ago

  • Keywords has-patch dev-feedback added

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

@Denis-de-Bernardy
8 years ago

other potential patch

#3 @Denis-de-Bernardy
8 years ago

  • Component changed from Accessibility to UI

@Denis-de-Bernardy
8 years ago

third potential patch

#4 @Denis-de-Bernardy
8 years ago

  • Keywords tested commit added

third patch is probably the one to use

#5 follow-up: @ryan
8 years ago

A lot of accessibility checkers require fieldsets to have legends.

#6 @ryan
8 years ago

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

#7 follow-up: @ryan
8 years ago

Seeing this with FF 3.5b4 as well.

#8 in reply to: ↑ 7 @Denis-de-Bernardy
8 years ago

Replying to ryan:

Seeing this with FF 3.5b4 as well.

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

#9 in reply to: ↑ 5 @Denis-de-Bernardy
8 years ago

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

#10 @ryan
8 years ago

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

#11 @Denis-de-Bernardy
8 years ago

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

#12 @ryan
8 years ago

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

#13 @Denis-de-Bernardy
8 years ago

k, will give it a shot right away.

#14 @Denis-de-Bernardy
8 years ago

doesn't work either... :-(

#15 @ryan
8 years ago

Worked for me in FF 3.5b4.

#16 @Denis-de-Bernardy
8 years ago

this worked on my end:

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

patch coming right up.

#17 @ryan
8 years ago

Well, I put the invisible on the span.

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

#18 @Denis-de-Bernardy
8 years ago

there you go.

@Denis-de-Bernardy
8 years ago

4th diff without the cruft

#19 @Denis-de-Bernardy
8 years ago

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

#20 @filosofo
8 years ago

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

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

rather than left-positioning?

#21 follow-up: @ryan
8 years ago

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

@ryan
8 years ago

#22 @ryan
8 years ago

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

#23 in reply to: ↑ 21 @ryan
8 years ago

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.

#24 @Denis-de-Bernardy
8 years ago

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.

#25 @filosofo
8 years ago

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

#26 @ryan
8 years ago

Drupal calls it "offscreen".

#27 @filosofo
8 years ago

Still more style than function. :)

#28 @ryan
8 years ago

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

#29 @ryan
8 years ago

  • Resolution set to fixed
  • Status changed from new to closed

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

Note: See TracTickets for help on using tickets.