Open Bug 592538 Opened 10 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)

defect
Not set
normal

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 ..
Severity: major → normal
Component: General → HTML: Parser
Priority: P3 → --
Product: Firefox → Core
QA Contact: general → parser
Doesn't seem like at all an HTML parsing issue.
Component: HTML: Parser → Keyboard: Navigation
QA Contact: parser → keyboard.navigation
(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.)
Summary: Broken image maps (according to Firefox) causes Tab navigation to stop working → image maps: tabbing to area links does not work
Attachment #595935 - Attachment mime type: application/octet-stream → application/xhtml+xml
Attachment #595935 - Attachment is obsolete: true
Attachment #595936 - Attachment mime type: application/octet-stream → application/xhtml+xml
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.
Attachment #595945 - Attachment mime type: text/plain → application/xhtml+xml
Depends on: 725921
* 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>
Attachment #595962 - Attachment mime type: text/plain → text/html
Attachment #595963 - Attachment mime type: text/plain → text/html
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
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.)
Attachment #595968 - Attachment mime type: text/plain → text/html
Attachment #595968 - Attachment description: Test case 5: Tabulation gets stuck. → Test case 5: <img> image map where image doesn't display: Tabulation gets stuck.
Attachment #595969 - Attachment mime type: text/plain → text/html
Attachment #595970 - Attachment mime type: text/plain → text/html
Attachment #595971 - Attachment mime type: text/plain → text/html
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
I'm wondering if this is the same regression as found in bug 725921 comment 1
(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.
See Also: → 1117759
blocking-b2g: 2.2r? → ---
Component: Keyboard: Navigation → User events and focus handling
You need to log in before you can comment on or make changes to this bug.