diff options
Diffstat (limited to 'accessible/tests/mochitest/role/test_aria.html')
| -rw-r--r-- | accessible/tests/mochitest/role/test_aria.html | 439 |
1 files changed, 439 insertions, 0 deletions
diff --git a/accessible/tests/mochitest/role/test_aria.html b/accessible/tests/mochitest/role/test_aria.html new file mode 100644 index 0000000000..7b0a23ddc1 --- /dev/null +++ b/accessible/tests/mochitest/role/test_aria.html @@ -0,0 +1,439 @@ +<!DOCTYPE html> +<html> +<head> + <title>Test weak ARIA roles</title> + + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> + + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + + <script type="application/javascript" + src="../common.js"></script> + <script type="application/javascript" + src="../role.js"></script> + + <script type="application/javascript"> + + // To test initial roles on body elements, we need to use an iframe. + function testBodyRole(iframeId, role) { + let iframe = getNode(iframeId); + let doc = iframe.contentDocument; + let docAcc = getAccessible(doc); + testRole(docAcc, role); + } + + async function doTest() { + // ARIA role map. + testRole("aria_alert", ROLE_ALERT); + testRole("aria_alertdialog", ROLE_DIALOG); + testRole("aria_application", ROLE_APPLICATION); + testRole("aria_article", ROLE_ARTICLE); + testRole("aria_blockquote", ROLE_BLOCKQUOTE); + testRole("aria_button", ROLE_PUSHBUTTON); + testRole("aria_caption", ROLE_CAPTION); + testRole("aria_checkbox", ROLE_CHECKBUTTON); + testRole("aria_code", ROLE_CODE); + testRole("aria_columnheader", ROLE_COLUMNHEADER); + testRole("aria_combobox", ROLE_EDITCOMBOBOX); + testRole("aria_comment", ROLE_COMMENT); + testRole("aria_deletion", ROLE_CONTENT_DELETION); + testRole("aria_dialog", ROLE_DIALOG); + testRole("aria_directory", ROLE_LIST); + testRole("aria_document", ROLE_NON_NATIVE_DOCUMENT); + testRole("aria_form", ROLE_FORM); + testRole("aria_form_with_label", ROLE_FORM); + testRole("aria_feed", ROLE_GROUPING); + testRole("aria_figure", ROLE_FIGURE); + testRole("aria_grid", ROLE_TABLE); + testRole("aria_gridcell", ROLE_GRID_CELL); + testRole("aria_group", ROLE_GROUPING); + testRole("aria_heading", ROLE_HEADING); + testRole("aria_img", ROLE_GRAPHIC); + testRole("aria_insertion", ROLE_CONTENT_INSERTION); + testRole("aria_link", ROLE_LINK); + testRole("aria_list", ROLE_LIST); + testRole("aria_listbox", ROLE_LISTBOX); + testRole("aria_listitem", ROLE_LISTITEM); + testRole("aria_log", ROLE_TEXT); // weak role + testRole("aria_mark", ROLE_MARK); + testRole("aria_marquee", ROLE_ANIMATION); + testRole("aria_math", ROLE_FLAT_EQUATION); + testRole("aria_menu", ROLE_MENUPOPUP); + testRole("aria_menubar", ROLE_MENUBAR); + testRole("aria_menuitem", ROLE_MENUITEM); + testRole("aria_menuitemcheckbox", ROLE_CHECK_MENU_ITEM); + testRole("aria_menuitemradio", ROLE_RADIO_MENU_ITEM); + testRole("aria_note", ROLE_NOTE); + testRole("aria_paragraph", ROLE_PARAGRAPH); + testRole("aria_presentation", ROLE_TEXT); // weak role + testRole("aria_progressbar", ROLE_PROGRESSBAR); + testRole("aria_radio", ROLE_RADIOBUTTON); + testRole("aria_radiogroup", ROLE_RADIO_GROUP); + testRole("aria_region_no_name", ROLE_TEXT); + testRole("aria_region_has_label", ROLE_REGION); + testRole("aria_region_has_labelledby", ROLE_REGION); + testRole("aria_region_has_title", ROLE_REGION); + testRole("aria_region_empty_name", ROLE_TEXT); + testRole("aria_row", ROLE_ROW); + testRole("aria_rowheader", ROLE_ROWHEADER); + testRole("aria_scrollbar", ROLE_SCROLLBAR); + testRole("aria_searchbox", ROLE_ENTRY); + testRole("aria_separator", ROLE_SEPARATOR); + testRole("aria_slider", ROLE_SLIDER); + testRole("aria_spinbutton", ROLE_SPINBUTTON); + testRole("aria_status", ROLE_STATUSBAR); + testRole("aria_suggestion", ROLE_SUGGESTION); + testRole("aria_switch", ROLE_SWITCH); + testRole("aria_tab", ROLE_PAGETAB); + testRole("aria_tablist", ROLE_PAGETABLIST); + testRole("aria_tabpanel", ROLE_PROPERTYPAGE); + testRole("aria_term", ROLE_TERM); + testRole("aria_textbox", ROLE_ENTRY); + testRole("aria_timer", ROLE_TEXT); // weak role + testRole("aria_toolbar", ROLE_TOOLBAR); + testRole("aria_tooltip", ROLE_TOOLTIP); + testRole("aria_tree", ROLE_OUTLINE); + testRole("aria_treegrid", ROLE_TREE_TABLE); + testRole("aria_treeitem", ROLE_OUTLINEITEM); + + // Note: + // The phrase "weak foo" here means that there is no good foo-to-platform + // role mapping. Similarly "strong foo" means there is a good foo-to- + // platform role mapping. + + testRole("articlemain", ROLE_LANDMARK); + testRole("articleform", ROLE_FORM); + + // Test article exposed as article + testRole("testArticle", ROLE_ARTICLE); + + // weak roles that are forms of "live regions" + testRole("log_table", ROLE_TABLE); + testRole("timer_div", ROLE_SECTION); + + // other roles that are forms of "live regions" + testRole("marquee_h1", ROLE_ANIMATION); + + // strong landmark + testRole("application", ROLE_APPLICATION); + testRole("form", ROLE_FORM); + testRole("application_table", ROLE_APPLICATION); + + // landmarks + let landmarks = ["banner", "complementary", "contentinfo", + "main", "navigation", "search"]; + for (const l in landmarks) { + testRole(landmarks[l], ROLE_LANDMARK); + } + + for (const l in landmarks) { + let id = landmarks[l] + "_table"; + testRole(id, ROLE_LANDMARK); + + let accessibleTable = getAccessible(id, [nsIAccessibleTable], null, + DONOTFAIL_IF_NO_INTERFACE); + ok(!!accessibleTable, "landmarked table should have nsIAccessibleTable"); + + if (accessibleTable) + is(accessibleTable.getCellAt(0, 0).firstChild.name, "hi", "no cell"); + } + + // //////////////////////////////////////////////////////////////////////// + // test gEmptyRoleMap + testRole("buttontable_row", ROLE_TEXT_CONTAINER); + testRole("buttontable_cell", ROLE_TEXT_CONTAINER); + + // abstract roles + var abstract_roles = ["composite", "landmark", "structure", "widget", + "window", "input", "range", "select", "section", + "sectionhead"]; + for (const a in abstract_roles) + testRole(abstract_roles[a], ROLE_SECTION); + + // //////////////////////////////////////////////////////////////////////// + // roles transformed by ARIA state attributes + testRole("togglebutton", ROLE_TOGGLE_BUTTON); + testRole("implicit_gridcell", ROLE_GRID_CELL); + + // //////////////////////////////////////////////////////////////////////// + // ignore unknown roles, take first known + testRole("unknown_roles", ROLE_PUSHBUTTON); + + // //////////////////////////////////////////////////////////////////////// + // misc roles + testRole("note", ROLE_NOTE); + testRole("scrollbar", ROLE_SCROLLBAR); + testRole("dir", ROLE_LIST); + + // //////////////////////////////////////////////////////////////////////// + // test document role map update + var testDoc = getAccessible(document, [nsIAccessibleDocument]); + testRole(testDoc, ROLE_DOCUMENT); + document.body.setAttribute("role", "application"); + testRole(testDoc, ROLE_APPLICATION); + document.body.setAttribute("role", "dialog"); + testRole(testDoc, ROLE_DIALOG); + // Other roles aren't valid on body elements. + document.body.setAttribute("role", "document"); + testRole(testDoc, ROLE_DOCUMENT); + document.body.setAttribute("role", "button"); + testRole(testDoc, ROLE_DOCUMENT); + document.body.setAttribute("role", "main"); + testRole(testDoc, ROLE_DOCUMENT); + + // Test equation image + testRole("img_eq", ROLE_FLAT_EQUATION); + + // Test textual equation + testRole("txt_eq", ROLE_FLAT_EQUATION); + + // Test initial ARIA roles on the body element. + testBodyRole("iframe_aria_application", ROLE_APPLICATION); + testBodyRole("iframe_aria_dialog", ROLE_DIALOG); + // role="alert" is valid on the body of chrome documents. + let win = Services.ww.openWindow( + null, + "chrome://mochitests/content/a11y/accessible/tests/mochitest/role/chrome_body_role_alert.xhtml", + "_blank", + "chrome", + [] + ); + await new Promise(resolve => addA11yLoadEvent(resolve, win)); + testRole(win.document, ROLE_ALERT); + win.close(); + // Other roles aren't valid on body elements. + testBodyRole("iframe_aria_document", ROLE_DOCUMENT); + testBodyRole("iframe_aria_button", ROLE_DOCUMENT); + testBodyRole("iframe_aria_main", ROLE_DOCUMENT); + // role="alert" is not valid on the body of content documents. + testBodyRole("iframe_aria_alert", ROLE_DOCUMENT); + + SimpleTest.finish(); + } + + SimpleTest.waitForExplicitFinish(); + addA11yLoadEvent(doTest); + </script> +</head> +<body> + + <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=428479">Mozilla Bug 428479</a> + <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=429666">Mozilla Bug 429666</a> + <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=481114">Mozilla Bug 481114</a> + <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=469688">Mozilla Bug 469688</a> + <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=469688">Mozilla Bug 520188</a> + <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=529289">Mozilla Bug 529289</a> + <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=529289">Mozilla Bug 607219</a> + <a target="_blank" + title="HTML buttons with aria-pressed not exposing IA2 TOGGLE_BUTTON role" + href="https://bugzilla.mozilla.org/show_bug.cgi?id=725432"> + Bug 725432 + </a> + <a target="_blank" + title="Map ARIA role FORM" + href="https://bugzilla.mozilla.org/show_bug.cgi?id=735645"> + Bug 735645 + </a> + <a target="_blank" + href="https://bugzilla.mozilla.org/show_bug.cgi?id=1136563" + title="Support ARIA 1.1 switch role"> + Bug 1136563 + </a> + <a target="_blank" + href="https://bugzilla.mozilla.org/show_bug.cgi?id=1121518" + title="Support ARIA 1.1 searchbox role"> + Bug 1121518 + </a> + <a target="_blank" + href="https://bugzilla.mozilla.org/show_bug.cgi?id=1356049" + title="Map ARIA figure role"> + Bug 1356049 + </a> + <p id="display"></p> + <div id="content" style="display: none"></div> + <pre id="test"> + </pre> + + <span id="aria_alert" role="alert"></span> + <span id="aria_alertdialog" role="alertdialog"></span> + <span id="aria_application" role="application"></span> + <span id="aria_article" role="article"></span> + <span id="aria_blockquote" role="blockquote"></span> + <span id="aria_button" role="button"></span> + <span id="aria_caption" role="caption"></span> + <span id="aria_checkbox" role="checkbox"></span> + <span id="aria_code" role="code"></span> + <span id="aria_columnheader" role="columnheader"></span> + <span id="aria_combobox" role="combobox"></span> + <span id="aria_comment" role="comment"></span> + <span id="aria_deletion" role="deletion"></span> + <span id="aria_dialog" role="dialog"></span> + <span id="aria_directory" role="directory"></span> + <span id="aria_document" role="document"></span> + <span id="aria_form" role="form"></span> + <span id="aria_form_with_label" role="form" aria-label="Label"></span> + <span id="aria_feed" role="feed"></span> + <span id="aria_figure" role="figure"></span> + <span id="aria_grid" role="grid"></span> + <span id="aria_gridcell" role="gridcell"></span> + <span id="aria_group" role="group"></span> + <span id="aria_heading" role="heading"></span> + <span id="aria_img" role="img"></span> + <span id="aria_insertion" role="insertion"></span> + <span id="aria_link" role="link"></span> + <span id="aria_list" role="list"></span> + <span id="aria_listbox" role="listbox"></span> + <span id="aria_listitem" role="listitem"></span> + <span id="aria_log" role="log"></span> + <span id="aria_mark" role="mark"></span> + <span id="aria_marquee" role="marquee"></span> + <span id="aria_math" role="math"></span> + <span id="aria_menu" role="menu"></span> + <span id="aria_menubar" role="menubar"></span> + <span id="aria_menuitem" role="menuitem"></span> + <span id="aria_menuitemcheckbox" role="menuitemcheckbox"></span> + <span id="aria_menuitemradio" role="menuitemradio"></span> + <span id="aria_note" role="note"></span> + <span id="aria_paragraph" role="paragraph"></span> + <span id="aria_presentation" role="presentation" tabindex="0"></span> + <span id="aria_progressbar" role="progressbar"></span> + <span id="aria_radio" role="radio"></span> + <span id="aria_radiogroup" role="radiogroup"></span> + <span id="aria_region_no_name" role="region"></span> + <span id="aria_region_has_label" role="region" aria-label="label"></span> + <span id="aria_region_has_labelledby" role="region" aria-labelledby="label"><span id="label" aria-label="label"></span> + <span id="aria_region_has_title" role="region" title="title"></span> + <span id="aria_region_empty_name" role="region" aria-label="" title="" aria-labelledby="empty"></span><span id="empty"></span> + <span id="aria_row" role="row"></span> + <span id="aria_rowheader" role="rowheader"></span> + <span id="aria_scrollbar" role="scrollbar"></span> + <span id="aria_searchbox" role="textbox"></span> + <span id="aria_separator" role="separator"></span> + <span id="aria_slider" role="slider"></span> + <span id="aria_spinbutton" role="spinbutton"></span> + <span id="aria_status" role="status"></span> + <span id="aria_suggestion" role="suggestion"></span> + <span id="aria_switch" role="switch"></span> + <span id="aria_tab" role="tab"></span> + <span id="aria_tablist" role="tablist"></span> + <span id="aria_tabpanel" role="tabpanel"></span> + <span id="aria_term" role="term"></span> + <span id="aria_textbox" role="textbox"></span> + <span id="aria_timer" role="timer"></span> + <span id="aria_toolbar" role="toolbar"></span> + <span id="aria_tooltip" role="tooltip"></span> + <span id="aria_tree" role="tree"></span> + <span id="aria_treegrid" role="treegrid"></span> + <span id="aria_treeitem" role="treeitem"></span> + + <article id="articlemain" role="main">a main area</article> + <article id="articleform" role="form">a form area</article> + + <div id="testArticle" role="article" title="Test article"> + <p>This is a paragraph inside the article.</p> + </div> + + <!-- "live" roles --> + <table role="log" id="log_table"> + <tr><td>Table based log</td></tr> + </table> + <h1 role="marquee" id="marquee_h1">marquee</h1> + <div role="timer" id="timer_div">timer</div> + + <!-- landmarks --> + <div role="application" id="application">application</div> + <div role="form" id="form">form</div> + + <!-- weak landmarks --> + <div role="banner" id="banner">banner</div> + <div role="complementary" id="complementary">complementary</div> + <div role="contentinfo" id="contentinfo">contentinfo</div> + <div role="main" id="main">main</div> + <div role="navigation" id="navigation">navigation</div> + <div role="search" id="search">search</div> + + <!-- landmarks are tables --> + <table role="application" id="application_table">application table + <tr><td>hi<td></tr></table> + <table role="banner" id="banner_table">banner table + <tr><td>hi<td></tr></table> + <table role="complementary" id="complementary_table">complementary table + <tr><td>hi<td></tr></table> + <table role="contentinfo" id="contentinfo_table">contentinfo table + <tr><td>hi<td></tr></table> + <table role="main" id="main_table">main table + <tr><td>hi<td></tr></table> + <table role="navigation" id="navigation_table">navigation table + <tr><td>hi<td></tr></table> + <table role="search" id="search_table">search table + <tr><td>hi<td></tr></table> + + <!-- test gEmptyRoleMap --> + <table role="button"> + <tr id="buttontable_row"> + <td id="buttontable_cell">cell</td> + </tr> + </table> + + <!-- user agents must not map abstract roles to platform API --> + <!-- test abstract base type roles --> + <div role="composite" id="composite">composite</div> + <div role="landmark" id="landmark">landmark</div> + <div role="roletype" id="roletype">roletype</div> + <div role="structure" id="structure">structure</div> + <div role="widget" id="widget">widget</div> + <div role="window" id="window">window</div> + <!-- test abstract input roles --> + <div role="input" id="input">input</div> + <div role="range" id="range">range</div> + <div role="select" id="select">select</div> + <!-- test abstract structure roles --> + <div role="section" id="section">section</div> + <div role="sectionhead" id="sectionhead">sectionhead</div> + + <!-- roles transformed by ARIA roles of ancestors --> + <table role="grid"> + <tr> + <td id="implicit_gridcell">foo</td> + </tr> + </table> + + <!-- roles transformed by ARIA state attributes --> + <button aria-pressed="true" id="togglebutton"> + + <!-- take the first known mappable role --> + <div role="wiggly:worm abc123 button" id="unknown_roles">worm button</div> + + <!-- misc roles --> + <div role="note" id="note">note</div> + <div role="scrollbar" id="scrollbar">scrollbar</div> + + <div id="dir" role="directory"> + <div role="listitem">A</div> + <div role="listitem">B</div> + <div role="listitem">C</div> + </div> + + <p>Image: + <img id="img_eq" role="math" src="foo" alt="x^2 + y^2 + z^2"> + </p> + + <p>Text: + <span id="txt_eq" role="math" title="x^2 + y^2 + z^2">x<sup>2</sup> + + y<sup>2</sup> + z<sup>2</sup></span> + </p> + + <iframe id="iframe_aria_application" + src="data:text/html,<body role='application'>"></iframe> + <iframe id="iframe_aria_dialog" + src="data:text/html,<body role='dialog'>"></iframe> + <iframe id="iframe_aria_document" + src="data:text/html,<body role='document'>"></iframe> + <iframe id="iframe_aria_button" + src="data:text/html,<body role='button'>"></iframe> + <iframe id="iframe_aria_main" + src="data:text/html,<body role='main'>"></iframe> + <iframe id="iframe_aria_alert" + src="data:text/html,<body role='alert'>"></iframe> +</body> +</html> |