Open
Bug 592538
Opened 14 years ago
Updated 2 years ago
image maps: tabulator navigation to area links does not work for object image maps and when there is wrapper around <area>
Categories
(Core :: DOM: UI Events & Focus Handling, defect)
Core
DOM: UI Events & Focus Handling
Tracking
()
UNCONFIRMED
People
(Reporter: xn--mlform-iua, Unassigned)
References
(Depends on 1 open bug, )
Details
Attachments
(7 files, 4 obsolete files)
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; nn-no) AppleWebKit/533.17.8 (KHTML, like Gecko) iCab/4.8 Safari/533.16
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.5; rv:2.0b4) Gecko/20100818 Firefox/4.0b4
http://dev.w3.org/html5/spec/the-map-element.html#the-area-element
If the image map is broken (according to firefox), then tab navigation (from link to link) gets stuck at the "broken" image map. This also happens if the image of the image map is unavailable.
Firefox 4 seems to see slightly more image maps as broken than Firefox 3.x - I have found 3 situations:
(1) HTML5 permits <area> where phrasing content is permitted (of course, must also be child of <map>). And anchor elements (<a>) can have phrasing content. Thus area are permitted inside anchor elements. This works in Opera and Safari. And I think in IE too. But not in Firefox. (Can be useful for grouping anchor and area that links to the same thing).
(2) Also if the first child of the map is an anchor element - even if there is no nesting, then it also breaks in Firefox.
(3) If the image of the image map is unavailable, then the tab navigation breaks as well.
The tab navigation breakage is of course linked to the fact that the links stop working, and thus the image map clicking also stops working.
Reproducible: Always
Steps to Reproduce:
1. Create image map with <img usemap="#iidf"> with an <area> inside <a> element. Add links before and after the image map.
2. Open the page
3. Try to Tab navigate from link to link, starting before the image map
Variant 1 of step 1: Do not wrap <a> around <area>. instead make <a> as first child, before the <area> element. (Adding it after the area element makes no harm.)
Variant 2 of step 1: Prevent the image of the image map from loading.
Actual Results:
Tab navigating gets stucks - it stops - on the last link before the image map.
Expected Results:
Tab navigation should just jump over the "broken" links.
The only workaround is to make sure that firefox doesn't consider the image map as broken ... There is nothing to do if the image is unavailable. Otherwise, one must place the area elements first, before any possible anchor elements.
I don't guarantee that I have found all instances when firefox 4 considers image maps as broken ..
|
||
Updated•14 years ago
|
Severity: major → normal
Component: General → HTML: Parser
Priority: P3 → --
Product: Firefox → Core
QA Contact: general → parser
|
|
||
Comment 1•14 years ago
|
||
Doesn't seem like at all an HTML parsing issue.
Component: HTML: Parser → Keyboard: Navigation
QA Contact: parser → keyboard.navigation
|
Reporter | |
Comment 2•14 years ago
|
||
(In reply to comment #1)
> Doesn't seem like at all an HTML parsing issue.
Indeed. This particular bug focuses the fact that keyboard navigation should not be affected of the image map bugs that Firefox has. (The image map bug(s) is something I would like to file in another bug.)
|
|
Reporter | |
Updated•13 years ago
|
Summary: Broken image maps (according to Firefox) causes Tab navigation to stop working → image maps: tabbing to area links does not work
|
|
Reporter | |
Comment 3•13 years ago
|
||
|
|
Reporter | |
Updated•13 years ago
|
Attachment #595935 -
Attachment mime type: application/octet-stream → application/xhtml+xml
|
|
Reporter | |
Comment 4•13 years ago
|
||
Attachment #595935 -
Attachment is obsolete: true
|
|
Reporter | |
Updated•13 years ago
|
Attachment #595936 -
Attachment mime type: application/octet-stream → application/xhtml+xml
|
|
Reporter | |
Comment 5•13 years ago
|
||
Test case 2 works in Firefox 3.6 because of CSS:
area{display:block} and
area:before{content:attr(alt)}
Without this styling, the test fails in even Firefox 3.6.
But in Firefox 10, the <area> element is unstylable, and this is probably part of the reason why <area> isn't tab-able in in Firefox 10 - and current version of Aurora.
|
|
Reporter | |
Updated•13 years ago
|
Attachment #595945 -
Attachment mime type: text/plain → application/xhtml+xml
|
|
Reporter | |
Comment 6•13 years ago
|
||
* Making the title closer to the original title because my previous analysis was wrong:
# Real issue 1: tabbing to area does not work
for object element image maps
# Real issue 2: any wrapper (except <map>)
around <area> elements, causes the links
to stop working.
No longer depends on: 725921
Summary: image maps: tabbing to area links does not work → image maps: tabulator navigation to area links does not work for object image maps and when there is wrapper around <area>
|
|
Reporter | |
Comment 7•13 years ago
|
||
|
|
Reporter | |
Comment 8•13 years ago
|
||
|
|
Reporter | |
Updated•13 years ago
|
Attachment #595962 -
Attachment mime type: text/plain → text/html
|
|
Reporter | |
Updated•13 years ago
|
Attachment #595963 -
Attachment mime type: text/plain → text/html
|
|
Reporter | |
Comment 9•13 years ago
|
||
Attachment #595963 -
Attachment is obsolete: true
|
|
Reporter | |
Comment 10•13 years ago
|
||
Comment on attachment 595965 [details]
Test case 4: Same as Test case 3, but with a dummy <img usemap="#map" > — *now it works*
><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" ><head><meta charset="utf-8" /><title>area element keboard naviagation</title><style>
> img:link:focus,img:visited:focus,img:focus,
> a:link:focus,a:visited:focus,a:focus,
>area:link:focus,area:visited:focus,area:focus {background:magenta!important;display:block;font:16px/16px serif;}
>span:target { background:orange;border:blue 3px double;}
>h1,h2{font:32px/1 serif;border-bottom:double brown 3px;margin:0;padding:0}
>h2{font-size:24px}
>ul{ list-style:none}
>li strong{display:inline-block;width:16.5em;text-align:right;}
></style></head><body>
>
><h1>Test instructions:</h1>
><ul>
><li><strong>Info:</strong> Test has 6 links that are enumarated from <i>a</i> to <i>f</i>.</li>
>
><li><strong>Test:</strong> Use the tabulator key (or similar) to tab from link to link.</li>
><li><strong>Expected result:</strong> That you are able to tabulate to all 6 links.</li>
><li><strong>Actual result (Firefox 10 and Aurora):</strong> <em><u>With this version, the tabulation works</u></em> â see attachment note in the bug.</li></ul>
><ul>
><li><strong>Relevant extra test:</strong> Use accesskeys to activate the links.</li>
>
><li><strong>Expected result:</strong> <em>Either:</em> The same results as for the tabulation test.<br/>
> <strong></strong> <em>Or:</em> That even the <code>area</code> link test works.</li>
><li><strong>Results:</strong> Even the the <code>area</code> link tests works.</li>
>
></ul>
><h1>Test area: Does tabbing discover the area links?</h1>
><p><a tabindex="1" accesskey="a" coords="0,0,100,48" href="#l1" >Link: a.</a></p>
><p><a tabindex="2" accesskey="b" coords="101,0,315,48" href="#l2">Link: b.</a></p>
><p>
><img usemap="#map" >
>
><p> Image map with link <i>c</i> and link <i>d</i>:
><object data="data:image/gif;base64,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
>DWYTKZCwHNkECDABHPABQkdratu3fhsKQQAAOw==" width="315" height="48" type="image/png" usemap="#map" >
>
>
>
><map id="map" name="map">
><area tabindex="3" accesskey="c" coords="0,0,100,48" href="#l3" alt="Link: c." title="Link: c." />
><area tabindex="4" accesskey="d" coords="101,0,315,48" href="#l4" alt="Link: d." title="Link: d." />
></object>
></p>
><p><a tabindex="5" accesskey="e" coords="0,0,100,48" href="#l5">Link: e.</a></p>
><p><a tabindex="6" accesskey="f" coords="101,0,315,48" href="#l6">Link: f.</a></p>
><h2>Activating the links highlights these targets:</h2>
><p><span id="l1">Target 1</span> <span id="l2">Target 2</span> <span id="l3">Target 3</span> <span id="l4">Target 4</span> <span id="l5">Target 5</span> <span id="l6">Target 6</span></p>
>
></body></html>
>
Attachment #595965 -
Attachment mime type: text/plain → text/html
|
|
Reporter | |
Comment 11•13 years ago
|
||
In test case 5, the exact problem of Comment 0 is replicated: The tabulation gets stuck when it comes to the first area element.
(The reason whey tabulation did not get stuck in the earlier tests was because the <area>s were wrapped inside a <div> — which disabled <area> entirely.)
|
|
Reporter | |
Updated•13 years ago
|
Attachment #595968 -
Attachment mime type: text/plain → text/html
|
|
Reporter | |
Updated•13 years ago
|
Attachment #595968 -
Attachment description: Test case 5: Tabulation gets stuck. → Test case 5: <img> image map where image doesn't display: Tabulation gets stuck.
|
|
Reporter | |
Comment 12•13 years ago
|
||
Attachment #595968 -
Attachment is obsolete: true
|
|
Reporter | |
Updated•13 years ago
|
Attachment #595969 -
Attachment mime type: text/plain → text/html
|
|
Reporter | |
Comment 13•13 years ago
|
||
Attachment #595969 -
Attachment is obsolete: true
|
|
Reporter | |
Updated•13 years ago
|
Attachment #595970 -
Attachment mime type: text/plain → text/html
|
|
Reporter | |
Comment 14•13 years ago
|
||
|
|
Reporter | |
Updated•13 years ago
|
Attachment #595971 -
Attachment mime type: text/plain → text/html
|
|
Reporter | |
Comment 15•13 years ago
|
||
Please check how Firefox 3.6. and Firefox 4-and-later handle test case 5 and 6 differently.
Test case 6: Image display enabled.
Firefox 3.6, test case 6: The <area> element displays, but it does not visually react when the image map area gets focus, despite the area:focus{} style rule. Instead, we see a that the area on the image is vaguely highlighted via dotted lines.
Firefox 4-and-later *does not* display the <area> links. But it otherwise display the outline of the area on the image.
Test case 5: Image display is disabled.
For Firefox 3.6, the <area> elements *do* react visually when they gain focus.
For Firefox 4 and later, because the <area> element does not display either, the fact that the img isn't rendered, causes the tabbing to get stuck, because the <area> element (to which the focus has moved, one must assume) has display none.
For this reason, I readded the dependence on bug 725921.
Depends on: 725921
|
||
Comment 16•13 years ago
|
||
I'm wondering if this is the same regression as found in bug 725921 comment 1
|
|
Reporter | |
Comment 17•13 years ago
|
||
(In reply to Mardeg from comment #16)
> I'm wondering if this is the same regression as found in bug 725921 comment 1
Do you mean we don't need this bug, but instead could concentrate on solving bug 725921? That could be. At least, I think that the tests cases of this bug (bug 592538), are quite relevant to bug 725921. I do also strongly susepct that this bug (bug 592538) probably would be fixed, if bug 725921 was fixed.
|
||
Updated•9 years ago
|
|
||
Updated•9 years ago
|
blocking-b2g: 2.2r? → ---
tracking-b2g:
backlog → ---
|
Assignee | |
Updated•6 years ago
|
Component: Keyboard: Navigation → User events and focus handling
|
||
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•