test_aria_imgmap.html (3276B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Test usemap elements and ARIA</title> 5 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 6 7 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 8 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> 9 10 <script type="application/javascript" 11 src="../common.js"></script> 12 <script type="application/javascript" 13 src="../role.js"></script> 14 <script type="application/javascript" 15 src="../events.js"></script> 16 <script type="application/javascript" 17 src="../states.js"></script> 18 19 <script type="application/javascript"> 20 // gA11yEventDumpToConsole = true; 21 function doPreTest() { 22 waitForImageMap("imagemap", doTest); 23 } 24 25 function doTest() { 26 var accTree = { 27 role: ROLE_IMAGE_MAP, 28 children: [ 29 { 30 role: ROLE_ENTRY, 31 name: "first name", 32 }, 33 { 34 role: ROLE_ENTRY, 35 name: "last name", 36 }, 37 { 38 role: ROLE_RADIOBUTTON, 39 name: "male", 40 }, 41 { 42 role: ROLE_RADIOBUTTON, 43 name: "female", 44 }, 45 { 46 role: ROLE_CHECKBUTTON, 47 name: "have bike", 48 }, 49 { 50 role: ROLE_EDITCOMBOBOX, 51 name: "bike model", 52 }, 53 { 54 role: ROLE_CHECKBUTTON, 55 name: "have car", 56 }, 57 { 58 role: ROLE_CHECKBUTTON, 59 name: "have airplane", 60 }, 61 { 62 role: ROLE_PUSHBUTTON, 63 name: "submit", 64 }, 65 ], 66 }; 67 68 // Test image map tree structure, roles, and names. 69 testAccessibleTree("imagemap", accTree); 70 71 SimpleTest.finish(); 72 } 73 74 SimpleTest.waitForExplicitFinish(); 75 addA11yLoadEvent(doPreTest); 76 </script> 77 78 </head> 79 <body> 80 81 <a target="_blank" 82 href="https://bugzilla.mozilla.org/show_bug.cgi?id=548291" 83 title="Accessible tree of ARIA image maps"> 84 Mozilla Bug 548291 85 </a> 86 <p id="display"></p> 87 <div id="content" style="display: none"></div> 88 <pre id="test"> 89 </pre> 90 91 <img id="imagemap" src="../formimage.png" width="219" height="229" border="0" usemap="#ariaMap"> 92 <map id="ariaMap" name="ariaMap"> 93 <area id="t1" role="textbox" shape="rect" tabindex="0" alt="" title="first name" coords="4,20,108,48" href="#" /> 94 <area id="t2" role="textbox" shape="rect" alt="" title="last name" coords="111,21,215,50" href="#" /> 95 <area id="rb1" role="radio" aria-checked="true" shape="circle" alt="" title="male" coords="60,75,11" href="#" /> 96 <area id="rb2" role="radio" shape="circle" alt="" title="female" coords="73,94,11" href="#" /> 97 <area id="cb1" role="checkbox" aria-checked="true" shape="rect" alt="" title="have bike" coords="95,123,118,145" href="#" /> 98 <area id="cbox" role="combobox" shape="rect" alt="" title="bike model" coords="120,124,184,146" href="#" /> 99 <area id="cb2" role="checkbox" shape="rect" alt="" title="have car" coords="90,145,114,164" href="#" /> 100 <area id="cb3" role="checkbox" shape="rect" alt="" title="have airplane" coords="130,163,152,184" href="#" /> 101 <area id="b1" role="button" shape="rect" alt="" title="submit" coords="4,198,67,224" href="#" /> 102 </map> 103 </body> 104 </html>