accessible/tests/mochitest/role/test_aria.html
author Marco Zehe <mzehe@mozilla.com>
Thu, 15 Aug 2019 01:25:56 +0000
changeset 488176 3769178b9a30790002c9c9555a11a045d460d5a3
parent 469642 0d9b9b96f5475adbed73922da696aeff7cbbaed3
child 489280 ad9f9646f46cd86078ddfe8082828948eeef5b5b
permissions -rw-r--r--
Bug 1501182 - Expose WAI-ARIA landmarks as landmark roles through accessibility APIs, r=Jamie This change will bring us on par with what Chrome does. However, if the author makes an error in applying a landmark role to an interactive element, or other element where the landmark role is illegal, as defined in the [WAI-ARIA in HTML specification section 2](https://www.w3.org/TR/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html), the accessible properties will now be that of the landmark role, no longer that of the native host language element. This might make some elements less accessible due to author error than before, but we currently do not know of examples in the wild that actually expose this problem. This could only be solved by applying the rules from said table also in the user agents, but that is not specified anywhere. Differential Revision: https://phabricator.services.mozilla.com/D41923

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

    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_columnheader", ROLE_COLUMNHEADER);
      testRole("aria_combobox", ROLE_EDITCOMBOBOX);
      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_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_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_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 (l in landmarks) {
        testRole(landmarks[l], ROLE_LANDMARK);
      }

      for (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_NOTHING);
      testRole("buttontable_cell", ROLE_NOTHING);

      // abstract roles
      var abstract_roles = ["composite", "landmark", "structure", "widget",
                            "window", "input", "range", "select", "section",
                            "sectionhead"];
      for (a in abstract_roles)
        testRole(abstract_roles[a], ROLE_SECTION);

      // ////////////////////////////////////////////////////////////////////////
      // roles transformed by ARIA state attributes
      testRole("togglebutton", ROLE_TOGGLE_BUTTON);

      // ////////////////////////////////////////////////////////////////////////
      // 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);

      // Test equation image
      testRole("img_eq", ROLE_FLAT_EQUATION);

      // Test textual equation
      testRole("txt_eq", ROLE_FLAT_EQUATION);

      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 id="aria_alertdialog" role="alertdialog"/>
  <span id="aria_application" role="application"/>
  <span id="aria_article" role="article"/>
  <span id="aria_blockquote" role="blockquote"/>
  <span id="aria_button" role="button"/>
  <span id="aria_caption" role="caption"/>
  <span id="aria_checkbox" role="checkbox"/>
  <span id="aria_columnheader" role="columnheader"/>
  <span id="aria_combobox" role="combobox"/>
  <span id="aria_dialog" role="dialog"/>
  <span id="aria_directory" role="directory"/>
  <span id="aria_document" role="document"/>
  <span id="aria_form" role="form"/>
  <span id="aria_form_with_label" role="form" aria-label="Label"/>
  <span id="aria_feed" role="feed"/>
  <span id="aria_figure" role="figure"/>
  <span id="aria_grid" role="grid"/>
  <span id="aria_gridcell" role="gridcell"/>
  <span id="aria_group" role="group"/>
  <span id="aria_heading" role="heading"/>
  <span id="aria_img" role="img"/>
  <span id="aria_link" role="link"/>
  <span id="aria_list" role="list"/>
  <span id="aria_listbox" role="listbox"/>
  <span id="aria_listitem" role="listitem"/>
  <span id="aria_log" role="log"/>
  <span id="aria_marquee" role="marquee"/>
  <span id="aria_math" role="math"/>
  <span id="aria_menu" role="menu"/>
  <span id="aria_menubar" role="menubar"/>
  <span id="aria_menuitem" role="menuitem"/>
  <span id="aria_menuitemcheckbox" role="menuitemcheckbox"/>
  <span id="aria_menuitemradio" role="menuitemradio"/>
  <span id="aria_note" role="note"/>
  <span id="aria_paragraph" role="paragraph"/>
  <span id="aria_presentation" role="presentation" tabindex="0"/>
  <span id="aria_progressbar" role="progressbar"/>
  <span id="aria_radio" role="radio"/>
  <span id="aria_radiogroup" role="radiogroup"/>
  <span id="aria_region_no_name" role="region"/>
  <span id="aria_region_has_label" role="region" aria-label="label"/>
  <span id="aria_region_has_labelledby" role="region" aria-labelledby="label"/><span id="label" aria-label="label">
  <span id="aria_region_has_title" role="region" title="title"/>
  <span id="aria_region_empty_name" role="region" aria-label="" title="" aria-labelledby="empty"/><span id="empty"/>
  <span id="aria_row" role="row"/>
  <span id="aria_rowheader" role="rowheader"/>
  <span id="aria_scrollbar" role="scrollbar"/>
  <span id="aria_searchbox" role="textbox"/>
  <span id="aria_separator" role="separator"/>
  <span id="aria_slider" role="slider"/>
  <span id="aria_spinbutton" role="spinbutton"/>
  <span id="aria_status" role="status"/>
  <span id="aria_switch" role="switch"/>
  <span id="aria_tab" role="tab"/>
  <span id="aria_tablist" role="tablist"/>
  <span id="aria_tabpanel" role="tabpanel"/>
  <span id="aria_term" role="term"/>
  <span id="aria_textbox" role="textbox"/>
  <span id="aria_timer" role="timer"/>
  <span id="aria_toolbar" role="toolbar"/>
  <span id="aria_tooltip" role="tooltip"/>
  <span id="aria_tree" role="tree"/>
  <span id="aria_treegrid" role="treegrid"/>
  <span id="aria_treeitem" role="treeitem"/>

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

</body>
</html>