WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 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 5 years ago.
9783.diff (463 bytes) - added by Denis-de-Bernardy 5 years ago.
9783.2.diff (19.2 KB) - added by Denis-de-Bernardy 5 years ago.
other potential patch
9783.3.diff (18.4 KB) - added by Denis-de-Bernardy 5 years ago.
third potential patch
9783.4.diff (19.3 KB) - added by Denis-de-Bernardy 5 years ago.
4th diff without the cruft
9783.5.diff (18.9 KB) - added by ryan 5 years ago.

Download all attachments as: .zip

Change History (35)

comment:1 Denis-de-Bernardy5 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.

Denis-de-Bernardy5 years ago

comment:2 Denis-de-Bernardy5 years ago

  • Keywords has-patch dev-feedback added

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

Denis-de-Bernardy5 years ago

other potential patch

comment:3 Denis-de-Bernardy5 years ago

  • Component changed from Accessibility to UI

Denis-de-Bernardy5 years ago

third potential patch

comment:4 Denis-de-Bernardy5 years ago

  • Keywords tested commit added

third patch is probably the one to use

comment:5 follow-up: ryan5 years ago

A lot of accessibility checkers require fieldsets to have legends.

comment:6 ryan5 years ago

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

comment:7 follow-up: ryan5 years ago

Seeing this with FF 3.5b4 as well.

comment:8 in reply to: ↑ 7 Denis-de-Bernardy5 years ago

Replying to ryan:

Seeing this with FF 3.5b4 as well.

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

comment:9 in reply to: ↑ 5 Denis-de-Bernardy5 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. :-)

comment:10 ryan5 years ago

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

comment:11 Denis-de-Bernardy5 years ago

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

comment:12 ryan5 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.

comment:13 Denis-de-Bernardy5 years ago

k, will give it a shot right away.

comment:14 Denis-de-Bernardy5 years ago

doesn't work either... :-(

comment:15 ryan5 years ago

Worked for me in FF 3.5b4.

comment:16 Denis-de-Bernardy5 years ago

this worked on my end:

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

patch coming right up.

comment:17 ryan5 years ago

Well, I put the invisible on the span.

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

comment:18 Denis-de-Bernardy5 years ago

there you go.

Denis-de-Bernardy5 years ago

4th diff without the cruft

comment:19 Denis-de-Bernardy5 years ago

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

comment:20 filosofo5 years ago

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

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

rather than left-positioning?

comment:21 follow-up: ryan5 years ago

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

ryan5 years ago

comment:22 ryan5 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.

comment:23 in reply to: ↑ 21 ryan5 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.

comment:24 Denis-de-Bernardy5 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.

comment:25 filosofo5 years ago

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

comment:26 ryan5 years ago

Drupal calls it "offscreen".

comment:27 filosofo5 years ago

Still more style than function. :)

comment:28 ryan5 years ago

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

comment:29 ryan5 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.