592538 - image maps: tabulator navigation to area links does not work for object image maps and when there is wrapper around <area>

Status: UNCONFIRMED

(Core :: DOM: UI Events & Focus Handling, defect)

Description

[Leif Halvard Silli]

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

Comment 1

[Boris Zbarsky [:bzbarsky]]

Doesn't seem like at all an HTML parsing issue.

Comment 2

[Leif Halvard Silli]

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

Comment 3

[Leif Halvard Silli]

Attachment: Test case 1: Demoing that tabbing doesn't work.

Comment 4

[Leif Halvard Silli]

Attachment: Test case 1: Demoing that tabbing doesn't work.

Comment 5

[Leif Halvard Silli]

Attachment: Test case 2: Same as case 1, but with bad image URL

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.

Comment 6

[Leif Halvard Silli]

* 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.

Comment 7

[Leif Halvard Silli]

Attachment: Test case 3: Removed wrapper around <area> elements — *still doesn't work!*

Comment 8

[Leif Halvard Silli]

Attachment: Test case 4: Same as Test case 3, but with a dummy <img usemap="#map" > — *now it works*

Comment 9

[Leif Halvard Silli]

Attachment: Test case 4: Same as Test case 3, but with a dummy <img usemap="#map" > — *now it works*

Comment 10

[Leif Halvard Silli]

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>
>

Comment 11

[Leif Halvard Silli]

Attachment: Test case 5: <img> image map where image doesn't display: Tabulation gets stuck.

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

Comment 12

[Leif Halvard Silli]

Attachment: Test case 5: <img> image map where image doesn't display: Tabulation gets stuck.

Comment 13

[Leif Halvard Silli]

Attachment: Test case 5: <img> image map where image doesn't display: Tabulation gets stuck.

Comment 14

[Leif Halvard Silli]

Attachment: Test case 6: Same as 5, but here there is an image. Hence, tabbing works.

Comment 15

[Leif Halvard Silli]

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.

Comment 16

[Mardeg]

Attachment: Test case 7: Same as 6, but xhtml with SVG image to check for any difference

I'm wondering if this is the same regression as found in bug 725921 comment 1

Comment 17

[Leif Halvard Silli]

(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.

Comment 18

[sunnybunny8920]

[Tracking Requested - why for this release]:

Comment 19

[sunnybunny8920]

[Tracking Requested - why for this release]: