Closed Bug 354502 Opened 18 years ago Closed 16 years ago

Legend tag does not wrap when specified

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED FIXED

People

(Reporter: mike, Unassigned)

References

Details

(Keywords: access, testcase, Whiteboard: DUPEME?)

Attachments

(2 files)

testcase from comment 0
649 bytes, text/html
Details
TESTCASE: modified 1st testcase to support wrapping
728 bytes, text/html
Details 
User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7


I can understand the legend tag not wrapping by default (good idea), however why not let a user override this.  I hate the outline on legends so I normally get rid of it.

In my example I have 3 checkboxes, which have labels, so the only sensible solution, in terms of accessibility, is to group them in a fieldset and have a legend for the heading text.  I could just use normal text but this would reduce the usefulness of a screen reader.  When text size is increased by a large degree text wrapping is essential, if you don't have it the user can't see what is going on!  Therefore all text items however illogical, in this case the legend text MUST wrap for accessibility reasons.


<html>

<head></head>

<body>

<fieldset style="border-style: none; padding: 0; margin: 0">
   <legend style="white-space: normal">This text does not wrap - not good for accessibility</legend>
   <input type="checkbox" name="banana" id="banana"> <label for="banana">banana</label><br>
   <input type="checkbox" name="apple" id="apple"> <label for="apple">apple</label><br>
   <input type="checkbox" name="pear" id="pear"> <label for="pear">pear</label><br>
</fieldset>

</body>

</html>


Reproducible: Always

Steps to Reproduce:
Run the code above, and reduce the width of the firefox browser so it is smaller than the width of the legend text.
Actual Results:  
The legend text does not wrap is it probably should.

Expected Results:  
The legend text should wrap (especially as it is usually used for accessible websites).

The legend text should wrap (especially as it is usually used for accessible websites).
Keywords: testcase
OS: Mac OS X → All
Hardware: Macintosh → All
Whiteboard: DUPEME?
Can anyone with low vision comment on this?  Does this behavior still occur?  What would people like done?
This happens because <legend> does not directly support wrapping.  To have it wrap, you must enclose text in a <p style="word-wrap:break-word"></p> tag.  Please see the modified testcase.

Does this help?
Safari wraps <legend>.
I modified the testcase for longer <legend> since Safari doesn't allow me to resize the window too small.

I think this bug belongs to layout or CSS module.
Component: Disability Access → Layout
Keywords: access
Product: Firefox → Core
QA Contact: disability.access → layout
I can't reproduce this bug on trunk...  The <legend> wraps.
I still can reproduce it with  Gecko/2007112804.

BTW: the testcase 1 is not wrapping, but the modified testcase 1 is wrapping.
Ah, right.  The second testcase works around the problem.  I can indeed reproduce the problem on the first testcase, and the patch in bug 404123 fixes it for me.
Depends on: 404123
Fixed by checkin for bug 404123.
Status: UNCONFIRMED → RESOLVED
Closed: 16 years ago
Flags: in-testsuite+
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: