Google Git
Sign in
webkit / WebKit / a847461eedf68a16e2d2491447608ea3bf9d7890 / . / LayoutTests / platform / mac / accessibility / role-subrole-roledescription.html
blob: 37c6539720bd90a0d20832149ad159f86419ea8a [file] [log] [blame]
<!DOCTYPE HTML>
<html>
<body>
<script src="../../../resources/js-test-pre.js"></script>
<!-- ==================================================================================================== -->
<!-- HTML elements in alphabetical order, excepting the need for nesting (e.g. <li> is with its <ol> and <ul> parents) -->
<!-- ==================================================================================================== -->
<a data-role="AXLink" data-subrole="" data-roledescription="link" href="#" data-note="[href]" class="ex">X</a>
<a data-role="" data-subrole="" data-roledescription="" data-note=":not([href])" class="ex">X</a>
<abbr data-role="" data-subrole="" data-roledescription="" class="ex">X</abbr>
<!-- http://webkit.org/b/83989 --><address data-role="AXGroup" data-subrole="AXLandmarkContentInfo" data-roledescription="content information" class="ex">X</address>
<!-- skipped <area> -->
<article data-role="AXGroup" data-subrole="AXDocumentArticle" data-roledescription="article" class="ex">X</article>
<aside data-role="AXGroup" data-subrole="AXLandmarkComplementary" data-roledescription="complementary" class="ex">X</aside>
<audio data-role="" data-subrole="" data-roledescription="" class="ex">X</audio>
<b data-role="" data-subrole="" data-roledescription="" class="ex">X</b>
<bdo data-role="" data-subrole="" data-roledescription="" class="ex">X</bdo>
<blockquote data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</blockquote>
<button data-role="AXButton" data-subrole="" data-roledescription="button" class="ex">X</button>
<canvas data-role="" data-subrole="" data-roledescription="" class="ex">X</canvas>
<cite data-role="" data-subrole="" data-roledescription="" class="ex">X</cite>
<code data-role="" data-subrole="" data-roledescription="" class="ex">X</code>
<!-- skipped <command> -->
<!-- skipped <datalist> -->
<del data-role="" data-subrole="" data-roledescription="" class="ex">X</del>
<!-- skipped <details/summary> http://webkit.org/b/108979 -->
<dfn data-role="AXGroup" data-subrole="AXDefinition" data-roledescription="definition" class="ex">X</dfn>
<dl data-role="AXList" data-subrole="AXDescriptionList" data-alternatesubrole="AXDefinitionList" data-roledescription="description list" class="ex">
<dt data-role="AXGroup" data-subrole="AXTerm" data-roledescription="term" class="ex">X</dt>
<dd data-role="AXGroup" data-subrole="AXDescription" data-roledescription="description" class="ex">X</dd>
</dl>
<div data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</div>
<em data-role="" data-subrole="" data-roledescription="" class="ex">X</em>
<!-- skipped <embed> -->
<fieldset data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">
<legend data-role="" data-subrole="" data-roledescription="" class="ex">X</legend>
</fieldset>
<!-- skipped figure/figcaption http://webkit.org/b/108996 -->
<footer data-role="AXGroup" data-subrole="AXLandmarkContentInfo" data-roledescription="footer" class="ex">X</footer>
<form data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</form>
<!-- skipped <frame> -->
<!-- skipped <frameset> -->
<!-- skipped <head> -->
<!-- http://webkit.org/b/109013 --><header data-role="AXGroup" data-subrole="AXLandmarkBanner" data-roledescription="banner" class="ex">X</header>
<hgroup data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</hgroup>
<h1 data-role="AXHeading" data-subrole="" data-roledescription="heading" class="ex">X</h1>
<h2 data-role="AXHeading" data-subrole="" data-roledescription="heading" class="ex">X</h2>
<h3 data-role="AXHeading" data-subrole="" data-roledescription="heading" class="ex">X</h3>
<h4 data-role="AXHeading" data-subrole="" data-roledescription="heading" class="ex">X</h4>
<h5 data-role="AXHeading" data-subrole="" data-roledescription="heading" class="ex">X</h5>
<h6 data-role="AXHeading" data-subrole="" data-roledescription="heading" class="ex">X</h6>
<!-- http://webkit.org/b/109015 --><hr data-role="" data-subrole="" data-roledescription="" class="ex">
<!-- skipped <html> -->
<i data-role="" data-subrole="" data-roledescription="" class="ex">X</i>
<!-- skipped <iframe> -->
<img data-role="" data-subrole="" data-roledescription="" class="ex" data-note=":not([src]):not([alt])">
<img data-role="" data-subrole="" data-roledescription="" class="ex" alt="" data-note="[alt='']">
<img data-role="" data-subrole="" data-roledescription="" class="ex" src="foo.png" data-note="[src]:not([alt])">
<img data-role="AXImage" data-subrole="" data-roledescription="image" class="ex" alt="X" data-note="[alt='X']">
<input type="button" value="X" data-role="AXButton" data-subrole="" data-roledescription="button" class="ex" data-note="[type='button']">
<!-- skipped <menu><input type="button"></menu> -->
<!-- http://webkit.org/b/109017 --><input type="color" value="X" data-role="AXColorWell" data-subrole="" data-roledescription="color well" class="ex" data-note="[type='color']">
<input type="checkbox" data-role="AXCheckBox" data-subrole="" data-roledescription="check box" class="ex" data-note="[type='checkbox']">
<!-- skipped <menu><input type="checkbox"></menu> -->
<!-- http://webkit.org/b/109017 --><input type="date" value="X" data-role="AXTextField" data-subrole="" data-roledescription="text field" class="ex" data-note="[type='date']">
<!-- http://webkit.org/b/109017 --><input type="datetime" value="X" data-role="AXTextField" data-subrole="" data-roledescription="text field" class="ex" data-note="[type='datetime']">
<!-- http://webkit.org/b/109017 --><input type="datetime-local" value="X" data-role="AXTextField" data-subrole="" data-roledescription="text field" class="ex" data-note="[type='datetime-local']">
<!-- http://webkit.org/b/109017 --><input type="email" value="X" data-role="AXTextField" data-subrole="" data-roledescription="text field" class="ex" data-note="[type='email']">
<input type="file" data-role="AXButton" data-subrole="AXFileUploadButton" data-roledescription="file upload button" class="ex" data-note="[type='file']">
<input type="hidden" data-role="" data-subrole="" data-roledescription="" class="ex" data-note="[type='hidden']">
<input type="image" data-role="AXButton" data-subrole="" data-roledescription="button" class="ex" data-note="[type='image']">
<!-- http://webkit.org/b/109017 --><input type="month" value="X" data-role="AXTextField" data-subrole="" data-roledescription="text field" class="ex" data-note="[type='month']">
<!-- http://webkit.org/b/109017 --><input type="number" value="X" data-role="AXTextField" data-subrole="" data-roledescription="text field" class="ex" data-note="[type='number']">
<input type="password" value="X" data-role="AXTextField" data-subrole="AXSecureTextField" data-roledescription="secure text field" class="ex" data-note="[type='password']">
<input type="radio" data-role="AXRadioButton" data-subrole="" data-roledescription="radio button" class="ex" data-note="[type='radio']">
<!-- skipped <menu><input type="radio"></menu> -->
<input type="range" data-role="AXSlider" data-subrole="" data-roledescription="slider" class="ex" data-note="[type='range']">
<input type="reset" data-role="AXButton" data-subrole="" data-roledescription="button" class="ex" data-note="[type='reset']">
<input type="search" value="X" data-role="AXTextField" data-subrole="AXSearchField" data-roledescription="search text field" class="ex" data-note="[type='search']">
<input type="submit" data-role="AXButton" data-subrole="" data-roledescription="button" class="ex" data-note="[type='submit']">
<!-- http://webkit.org/b/109017 --><input type="tel" value="X" data-role="AXTextField" data-subrole="" data-roledescription="text field" class="ex" data-note="[type='tel']">
<input type="text" value="X" data-role="AXTextField" data-subrole="" data-roledescription="text field" class="ex" data-note="[type='text']">
<!-- skipped <input type="text"> with suggestions source element: http://www.w3.org/html/wg/drafts/html/master/forms.html#concept-input-list -->
<!-- http://webkit.org/b/109017 --><input type="time" value="X" data-role="AXTextField" data-subrole="" data-roledescription="text field" class="ex" data-note="[type='time']">
<!-- http://webkit.org/b/109017 --><input type="url" value="X" data-role="AXTextField" data-subrole="" data-roledescription="text field" class="ex" data-note="[type='url']">
<!-- http://webkit.org/b/109017 --><input type="week" value="X" data-role="AXTextField" data-subrole="" data-roledescription="text field" class="ex" data-note="[type='week']">
<ins data-role="" data-subrole="" data-roledescription="" class="ex">X</ins>
<!-- skipped <link> -->
<!-- skipped <map> -->
<!-- http://webkit.org/b/109018 --><mark data-role="" data-subrole="" data-roledescription="" class="ex">X</mark>
<math data-role="AXGroup" data-subrole="AXDocumentMath" data-roledescription="math" class="ex">X</math>
<!-- skipped <menu> -->
<!-- skipped <meta> -->
<meter data-role="AXProgressIndicator" data-subrole="" data-roledescription="progress indicator" class="ex" value="0.75">X</meter>
<nav data-role="AXGroup" data-subrole="AXLandmarkNavigation" data-roledescription="navigation" class="ex">X</nav>
<!-- skipped <noscript> -->
<!-- skipped <object> -->
<ol data-role="AXList" data-subrole="AXContentList" data-roledescription="content list" class="ex">
<li data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</li>
</ol>
<!-- skipped <optgroup> -->
<!-- skipped <option> -->
<!-- skipped <output> -->
<p data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</p>
<!-- skipped <param> -->
<pre data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</pre>
<progress data-role="AXProgressIndicator" data-subrole="" data-roledescription="progress indicator" class="ex" value="0.75">X</progress>
<q data-role="" data-subrole="" data-roledescription="" class="ex">X</q>
<!-- skipped <ruby/rp/rt> -->
<s data-role="" data-subrole="" data-roledescription="" class="ex">X</s>
<samp data-role="" data-subrole="" data-roledescription="" class="ex">X</samp>
<!-- skipped <script> -->
<!-- http://webkit.org/b/109024 --><section data-role="AXGroup" data-subrole="AXDocumentRegion" data-roledescription="region" class="ex">X</section>
<select data-role="AXPopUpButton" data-subrole="" data-roledescription="pop up button" class="ex" data-note=":not([multiple])">
<option data-role="" data-subrole="" data-roledescription="" class="ex">X</option>
<optgroup data-role="" data-subrole="" data-roledescription="" class="ex" label="more">
<option>X</option>
</optgroup>
</select>
<select data-role="AXList" data-subrole="" data-roledescription="list" class="ex" multiple data-note="[multiple]">
<option data-role="AXStaticText" data-subrole="" data-roledescription="text" class="ex">X</option>
<optgroup data-role="AXStaticText" data-subrole="" data-roledescription="text" class="ex" label="more">
<option>Y</option>
<option>Z</option>
</optgroup>
</select>
<small data-role="" data-subrole="" data-roledescription="" class="ex">X</small>
<!-- skipped <source> -->
<span data-role="" data-subrole="" data-roledescription="" class="ex">X</span>
<strong data-role="" data-subrole="" data-roledescription="" class="ex">X</strong>
<!-- skipped <style> -->
<sub data-role="" data-subrole="" data-roledescription="" class="ex">X</sub>
<sup data-role="" data-subrole="" data-roledescription="" class="ex">X</sup>
<svg data-role="" data-subrole="" data-roledescription="" class="ex">X</svg>
<table data-role="AXTable" data-subrole="" data-roledescription="table" class="ex">
<caption data-role="" data-subrole="" data-roledescription="" class="ex">X</caption>
<thead data-role="" data-subrole="" data-roledescription="" class="ex">
<tr data-role="AXRow" data-subrole="" data-roledescription="row" class="ex">
<!-- Need separate test to verify colheader/rowheader -->
<th data-role="AXCell" data-subrole="" data-roledescription="cell" class="ex">X</th>
</tr>
</thead>
<tbody data-role="" data-subrole="" data-roledescription="" class="ex">
<tr data-role="AXRow" data-subrole="" data-roledescription="row" class="ex">
<td data-role="AXCell" data-subrole="" data-roledescription="cell" class="ex">X</td>
</tr>
</tbody>
<tfoot data-role="" data-subrole="" data-roledescription="" class="ex">
<tr data-role="AXRow" data-subrole="" data-roledescription="row" class="ex">
<!-- Need separate test to verify colheader/rowheader -->
<th data-role="AXCell" data-subrole="" data-roledescription="cell" class="ex">X</th>
</tr>
</tfoot>
</table>
<textarea data-role="AXTextArea" data-subrole="" data-roledescription="text entry area" class="ex">X</textarea>
<time data-role="" data-subrole="" data-roledescription="" class="ex">X</time>
<!-- skipped <title> -->
<ul data-role="AXList" data-subrole="AXContentList" data-roledescription="content list" class="ex">
<li data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</li>
</ul>
<var data-role="" data-subrole="" data-roledescription="" class="ex">X</var>
<!-- skipped <video> -->
<wbr data-role="" data-subrole="" data-roledescription="" class="ex">X</wbr>
<!-- Todo: I left off adding HTML5 elements here at previous element: https://dvcs.w3.org/hg/html-api-map/raw-file/default/Overview.html -->
<!-- ==================================================================================================== -->
<!-- Abstract ARIA roles in alphabetical order; only generic AXGroup role should be exposed on abstract roles -->
<!-- ==================================================================================================== -->
<div role="command" data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</div>
<div role="composite" data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</div>
<div role="input" data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</div>
<div role="landmark" data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</div>
<div role="range" data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</div>
<div role="roletype" data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</div>
<div role="section" data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</div>
<div role="sectionhead" data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</div>
<div role="select" data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</div>
<div role="structure" data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</div>
<div role="widget" data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</div>
<div role="window" data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</div>
<!-- ==================================================================================================== -->
<!-- Non-abstract ARIA roles in alphabetical order, excepting the need for nesting (e.g. row is with its grid parent) -->
<!-- ==================================================================================================== -->
<div role="alert" data-role="AXGroup" data-subrole="AXApplicationAlert" data-roledescription="alert" class="ex">X</div>
<div role="alertdialog" data-role="AXGroup" data-subrole="AXApplicationAlertDialog" data-roledescription="alert dialog" class="ex">X</div>
<div role="application" data-role="AXGroup" data-subrole="AXLandmarkApplication" data-roledescription="application" class="ex">X</div>
<div role="article" data-role="AXGroup" data-subrole="AXDocumentArticle" data-roledescription="article" class="ex">X</div>
<div role="banner" data-role="AXGroup" data-subrole="AXLandmarkBanner" data-roledescription="banner" class="ex">X</div>
<div role="button" data-role="AXButton" data-subrole="" data-roledescription="button" class="ex">X</div>
<div role="checkbox" data-role="AXCheckBox" data-subrole="" data-roledescription="check box" class="ex">X</div>
<div role="combobox" data-role="AXComboBox" data-subrole="" data-roledescription="combo box" class="ex">X</div>
<div role="complementary" data-role="AXGroup" data-subrole="AXLandmarkComplementary" data-roledescription="complementary" class="ex">X</div>
<div role="contentinfo" data-role="AXGroup" data-subrole="AXLandmarkContentInfo" data-roledescription="content information" class="ex">X</div>
<div role="definition" data-role="AXGroup" data-subrole="AXDefinition" data-roledescription="definition" class="ex">X</div>
<div role="dialog" data-role="AXGroup" data-subrole="AXApplicationDialog" data-roledescription="dialog" class="ex">X</div>
<div role="directory" data-role="AXList" data-subrole="AXContentList" data-roledescription="content list" class="ex">X</div>
<div role="document" data-role="AXGroup" data-subrole="AXDocument" data-roledescription="document" class="ex">X</div>
<div role="form" data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</div>
<div role="grid" data-role="AXTable" data-subrole="" data-roledescription="table" class="ex">
<div role="rowgroup" data-role="" data-subrole="" data-roledescription="" class="ex">
<div role="row" data-role="AXRow" data-subrole="" data-roledescription="row" class="ex">
<!-- Note: diff between rowheader, columnheader, and gridcell is in cross-reference from grid; need additional non-role verification in another test. -->
<div role="rowheader" data-role="AXCell" data-subrole="" data-roledescription="cell" class="ex">X</div>
<div role="columnheader" data-role="AXCell" data-subrole="" data-roledescription="cell" class="ex">X</div>
<div role="gridcell" data-role="AXCell" data-subrole="" data-roledescription="cell" class="ex">X</div>
</div>
</div>
</div>
<div role="group" data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</div>
<div role="heading" data-role="AXHeading" data-subrole="" data-roledescription="heading" class="ex">X</div>
<div role="img" data-role="AXImage" data-subrole="" data-roledescription="image" class="ex">X</div>
<div role="link" data-role="AXLink" data-subrole="" data-roledescription="link" class="ex">X</div>
<div role="list" data-role="AXList" data-subrole="AXContentList" data-roledescription="content list" class="ex">
<div role="listitem" data-role="AXGroup" data-subrole="" data-roledescription="group" class="ex">X</div>
</div>
<div role="listbox" data-role="AXList" data-subrole="" data-roledescription="list" class="ex">
<div role="option" data-role="AXStaticText" data-subrole="" data-roledescription="text" class="ex">X</div>
</div>
<div role="log" data-role="AXGroup" data-subrole="AXApplicationLog" data-roledescription="log" class="ex">X</div>
<div role="main" data-role="AXGroup" data-subrole="AXLandmarkMain" data-roledescription="main" class="ex">X</div>
<div role="marquee" data-role="AXGroup" data-subrole="AXApplicationMarquee" data-roledescription="marquee" class="ex">X</div>
<div role="math" data-role="AXGroup" data-subrole="AXDocumentMath" data-roledescription="math" class="ex">X</div>
<div role="menu" data-role="AXMenu" data-subrole="" data-roledescription="menu" class="ex">
<!-- Note: diff between menuitem types is an attribute; need additional non-role verification in another test. -->
<div role="menuitem" data-role="AXMenuItem" data-subrole="" data-roledescription="menu item" class="ex">X</div>
<div role="menuitemcheckbox" data-role="AXMenuItem" data-subrole="" data-roledescription="menu item" class="ex">X</div>
<div role="menuitemradio" data-role="AXMenuItem" data-subrole="" data-roledescription="menu item" class="ex">X</div>
</div>
<div role="menubar" data-role="AXMenuBar" data-subrole="" data-roledescription="menu bar" class="ex">
<!-- Note: diff between menuitem types is an attribute; need additional non-role verification in another test. -->
<div role="menuitem" data-role="AXMenuItem" data-subrole="" data-roledescription="menu item" class="ex">X</div>
<div role="menuitemcheckbox" data-role="AXMenuItem" data-subrole="" data-roledescription="menu item" class="ex">X</div>
<div role="menuitemradio" data-role="AXMenuItem" data-subrole="" data-roledescription="menu item" class="ex">X</div>
</div>
<div role="navigation" data-role="AXGroup" data-subrole="AXLandmarkNavigation" data-roledescription="navigation" class="ex">X</div>
<div role="note" data-role="AXGroup" data-subrole="AXDocumentNote" data-roledescription="note" class="ex">X</div>
<div role="presentation" data-role="" data-subrole="" data-roledescription="" class="ex">X</div>
<div role="progressbar" data-role="AXProgressIndicator" data-subrole="" data-roledescription="progress indicator" class="ex">X</div>
<div role="radiogroup" data-role="AXRadioGroup" data-subrole="" data-roledescription="radio group" class="ex">
<div role="radio" data-role="AXRadioButton" data-subrole="" data-roledescription="radio button" class="ex">X</div>
</div>
<div role="region" data-role="AXGroup" data-subrole="AXDocumentRegion" data-roledescription="region" class="ex">X</div>
<div role="scrollbar" data-role="AXScrollBar" data-subrole="" data-roledescription="scroll bar" class="ex">X</div>
<div role="search" data-role="AXGroup" data-subrole="AXLandmarkSearch" data-roledescription="search" class="ex">X</div>
<div role="separator" data-role="AXSplitter" data-subrole="" data-roledescription="splitter" class="ex">X</div>
<div role="slider" data-role="AXSlider" data-subrole="" data-roledescription="slider" class="ex">X</div>
<div role="spinbutton" data-role="AXIncrementor" data-subrole="" data-roledescription="stepper" class="ex">X</div>
<div role="status" data-role="AXGroup" data-subrole="AXApplicationStatus" data-roledescription="application status" class="ex">X</div>
<div role="tablist" data-role="AXTabGroup" data-subrole="" data-roledescription="tab group" class="ex">
<div role="tab" data-role="AXRadioButton" data-subrole="" data-roledescription="tab" class="ex">X</div>
</div>
<div role="tabpanel" data-role="AXGroup" data-subrole="AXTabPanel" data-roledescription="tab panel" class="ex">X</div>
<div role="textbox" data-role="AXTextField" data-subrole="" data-roledescription="text field" class="ex">X</div>
<div role="timer" data-role="AXGroup" data-subrole="AXApplicationTimer" data-roledescription="timer" class="ex">X</div>
<div role="toolbar" data-role="AXToolbar" data-subrole="" data-roledescription="toolbar" class="ex">X</div>
<div role="tooltip" data-role="AXGroup" data-subrole="AXUserInterfaceTooltip" data-roledescription="tooltip" class="ex">X</div>
<div role="tree" data-role="AXOutline" data-subrole="" data-roledescription="outline" class="ex">
<div role="treeitem" data-role="AXRow" data-subrole="AXOutlineRow" data-roledescription="outline row" class="ex">X</div>
<div role="group" data-role="" data-subrole="" data-roledescription="" class="ex">
<div role="treeitem" data-role="AXRow" data-subrole="AXOutlineRow" data-roledescription="outline row" class="ex">X</div>
</div>
</div>
<div role="treegrid" data-role="AXTable" data-subrole="" data-roledescription="table" class="ex">
<div role="rowgroup" data-role="" data-subrole="" data-roledescription="" class="ex">
<div role="row" data-role="AXRow" data-subrole="" data-roledescription="row" class="ex">
<!-- Note: diff between rowheader, columnheader, and gridcell is in cross-reference from grid; need additional non-role verification in another test. -->
<div role="rowheader" data-role="AXCell" data-subrole="" data-roledescription="cell" class="ex">X</div>
<div role="columnheader" data-role="AXCell" data-subrole="" data-roledescription="cell" class="ex">X</div>
<div role="gridcell" data-role="AXCell" data-subrole="" data-roledescription="cell" class="ex">X</div>
</div>
</div>
</div>
<div id="console"></div>
<script>
if (window.testRunner && window.accessibilityController) {
description("This tests that native elements and ARIA overrides result in the expected role, subrole, and role description.")
var examples = document.querySelectorAll('.ex');
var indent = "\n "; // newline and six spaces
var el, ariaRole, axElement, role, subrole, roleDescription, output, expectation, result;
for (var i = 0, c = examples.length; i < c; i++) {
el = examples[i];
el.id = 'ex' + i;
ariaRole = el.getAttribute('role');
axElement = accessibilityController.accessibleElementById(el.id);
if (axElement) {
role = axElement.role;
subrole = axElement.subrole;
roleDescription = axElement.roleDescription;
} else {
role = 'AXRole: ';
subrole = 'AXSubrole: ';
roleDescription = 'AXRoleDescription: ';
}
output = el.tagName.toLowerCase() + (ariaRole?("[role="+ariaRole+"]"):'');
if (el.getAttribute('data-note')) {
output += el.getAttribute('data-note');
}
output += indent;
output += role + indent;
output += subrole + indent;
output += roleDescription + indent;
expectation = el.getAttribute('data-role') + "/";
expectation += el.getAttribute('data-subrole');
if (el.getAttribute('data-alternatesubrole')) expectation += " or " + el.getAttribute('data-alternatesubrole');
expectation += "/" + el.getAttribute('data-roledescription');
result = document.getElementById('console');
// Test AXRole, AXSubrole, and AXRoleDescription.
if (role.replace('AXRole: ','') == el.getAttribute('data-role')
&& (subrole.replace('AXSubrole: ','') == el.getAttribute('data-subrole') || subrole.replace('AXSubrole: ','') == el.getAttribute('data-alternatesubrole'))
&& roleDescription.replace('AXRoleDescription: ','') == el.getAttribute('data-roledescription')) {
result.innerText += "PASS: " + output + "\n";
} else {
result.innerText += "FAIL: " + output + "Expected: " + expectation + "\n\n";
}
}
// Once tests are complete, hide all the example markup.
examples = document.querySelectorAll('.ex');
for (var i = 0, c = examples.length; i < c; i++) {
el = examples[i];
el.style.display = 'none';
}
}
</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>