2014-02-11 19:27:12 +00:00
<!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) -->
<!-- This only tests elements that have an exact 1:1 ARIA role mapping, and computed role overrides. -->
<!-- ==================================================================================================== -->
2016-07-08 18:01:55 +00:00
< div id = "content" >
2018-01-18 20:39:12 +00:00
< a data-role = "link" href = "#" data-note = "[href]" data-platform = "atk,mac" class = "ex" > X< / a >
< article data-role = "article" data-platform = "atk,mac" class = "ex" > X< / article >
< aside data-role = "complementary" data-platform = "atk,mac" class = "ex" > X< / aside >
< button data-role = "button" data-platform = "atk,mac" class = "ex" > X< / button >
2019-10-24 00:09:48 +00:00
< del data-role = "deletion" data-platform = "atk,mac" class = "ex" > X< / ins >
2018-01-18 20:39:12 +00:00
< dfn data-role = "definition" data-platform = "atk,mac" class = "ex" > X< / dfn >
< dl data-role = "" data-platform = "atk,mac" class = "ex" >
2014-02-11 19:27:12 +00:00
< dt > X< / dt >
< dd > X< / dd >
< / dl >
2019-02-25 19:15:23 +00:00
< footer data-role = "contentinfo" data-platform = "atk,mac" class = "ex" > X< / footer >
2018-01-18 20:39:12 +00:00
< form data-role = "form" data-platform = "atk,mac" class = "ex" > X< / form >
< header data-role = "banner" data-platform = "atk,mac" class = "ex" > X< / header >
< h1 data-role = "heading" data-platform = "atk,mac" class = "ex" > X< / h1 >
< h2 data-role = "heading" data-platform = "atk,mac" class = "ex" > X< / h2 >
< h3 data-role = "heading" data-platform = "atk,mac" class = "ex" > X< / h3 >
< h4 data-role = "heading" data-platform = "atk,mac" class = "ex" > X< / h4 >
< h5 data-role = "heading" data-platform = "atk,mac" class = "ex" > X< / h5 >
< h5 data-role = "heading" data-platform = "atk,mac" class = "ex" > X< / h6 >
< hr data-role = "separator" data-platform = "atk,mac" class = "ex" >
2021-07-12 16:14:28 +00:00
< img data-role = "image" data-platform = "atk,mac" class = "ex" data-note = ":not([src]):not([alt])" >
2018-01-18 20:39:12 +00:00
< img data-role = "" data-platform = "atk,mac" class = "ex" alt = "" data-note = "[alt='']" >
2021-07-12 16:14:28 +00:00
< img data-role = "image" data-platform = "atk,mac" class = "ex" src = "foo.png" data-note = "[src]:not([alt])" >
< img data-role = "image" data-platform = "atk,mac" class = "ex" alt = "X" data-note = "[alt='X']" >
2018-01-18 20:39:12 +00:00
< input type = "button" value = "X" data-role = "button" data-platform = "atk,mac" class = "ex" data-note = "[type='button']" >
< input type = "checkbox" data-role = "checkbox" data-platform = "atk,mac" class = "ex" data-note = "[type='checkbox']" >
< input type = "date" data-role = "" data-platform = "atk,mac" class = "ex" data-note = "[type='date']" >
< input type = "datetime" value = "X" data-role = "" data-platform = "atk,mac" class = "ex" data-note = "[type='datetime']" >
< input type = "datetime-local" value = "X" data-role = "" data-platform = "atk,mac" class = "ex" data-note = "[type='datetime-local']" >
< input type = "email" value = "X" data-role = "" data-platform = "atk,mac" class = "ex" data-note = "[type='email']" >
< input type = "file" data-role = "button" data-platform = "atk,mac" class = "ex" data-note = "[type='file']" >
< input type = "hidden" data-role = "" data-platform = "atk,mac" class = "ex" data-note = "[type='hidden']" >
< input type = "image" data-role = "button" data-platform = "atk,mac" class = "ex" data-note = "[type='image']" >
< input type = "month" value = "X" data-role = "" data-platform = "atk,mac" class = "ex" data-note = "[type='month']" >
< input type = "number" value = "X" data-role = "" data-platform = "atk,mac" class = "ex" data-note = "[type='number']" >
< input type = "password" value = "X" data-role = "" data-platform = "atk,mac" class = "ex" data-note = "[type='password']" >
< input type = "radio" data-role = "radio" data-platform = "atk,mac" class = "ex" data-note = "[type='radio']" >
< input type = "range" data-role = "slider" data-platform = "atk,mac" class = "ex" data-note = "[type='range']" >
< input type = "reset" data-role = "button" data-platform = "atk,mac" class = "ex" data-note = "[type='reset']" >
< input type = "search" value = "X" data-role = "searchbox" data-platform = "atk,mac" class = "ex" data-note = "[type='search']" >
< input type = "submit" data-role = "button" data-platform = "atk,mac" class = "ex" data-note = "[type='submit']" >
< input type = "tel" value = "X" data-role = "" data-platform = "atk,mac" class = "ex" data-note = "[type='tel']" >
< input type = "text" value = "X" data-role = "" data-platform = "atk,mac" class = "ex" data-note = "[type='text']" >
< input type = "time" value = "X" data-role = "" data-platform = "atk,mac" class = "ex" data-note = "[type='time']" >
< input type = "url" value = "X" data-role = "" data-platform = "atk,mac" class = "ex" data-note = "[type='url']" >
< input type = "week" value = "X" data-role = "" data-platform = "atk,mac" class = "ex" data-note = "[type='week']" >
2019-07-11 13:36:50 +00:00
< ins data-role = "insertion" data-platform = "atk,mac" class = "ex" > X< / ins >
2018-01-18 20:39:12 +00:00
< mark data-role = "" data-platform = "atk,mac" class = "ex" > X< / mark >
< math data-role = "math" data-platform = "atk,mac" class = "ex" > X< / math >
2014-02-11 19:27:12 +00:00
<!-- skipped <menu> -->
<!-- skipped <meta> -->
2019-03-20 13:09:02 +00:00
<!-- renable for atk after http://webkit.org/b/163383 fixed --> < meter data-role = "meter" data-platform = "mac" class = "ex" value = "0.75" > X< / meter >
2018-01-18 20:39:12 +00:00
< nav data-role = "navigation" data-platform = "atk,mac" class = "ex" > X< / nav >
2014-02-11 19:27:12 +00:00
<!-- skipped <noscript> -->
<!-- skipped <object> -->
2018-01-18 20:39:12 +00:00
< ol data-role = "list" data-platform = "atk,mac" class = "ex" >
< li data-role = "listitem" data-platform = "atk,mac" class = "ex" > X< / li >
2014-02-11 19:27:12 +00:00
< / ol >
<!-- skipped <optgroup> -->
<!-- skipped <option> -->
<!-- skipped <output> -->
2018-06-05 15:55:06 +00:00
< p data-role = "paragraph" data-platform = "atk,mac" class = "ex" > X< / p >
2014-02-11 19:27:12 +00:00
<!-- skipped <param> -->
2018-01-18 20:39:12 +00:00
< pre data-role = "" data-platform = "atk,mac" class = "ex" > X< / pre >
< progress data-role = "progressbar" data-platform = "atk,mac" class = "ex" value = "0.75" > X< / progress >
< q data-role = "" data-platform = "atk,mac" class = "ex" > X< / q >
2014-02-11 19:27:12 +00:00
<!-- skipped <ruby/rp/rt> -->
2018-01-18 20:39:12 +00:00
< s data-role = "" data-platform = "atk,mac" class = "ex" > X< / s >
< samp data-role = "" data-platform = "atk,mac" class = "ex" > X< / samp >
2014-02-11 19:27:12 +00:00
<!-- skipped <script> -->
2018-01-18 20:39:12 +00:00
< section data-role = "" data-platform = "atk,mac" class = "ex" data-note = ":not([aria-label]:not([aria-labelledby])" > X< / section >
< section data-role = "region" data-platform = "atk,mac" class = "ex" aria-label = "x" data-note = "[aria-label]" > X< / section >
< section data-role = "region" data-platform = "atk,mac" class = "ex" aria-labelledby = "section-label" data-note = "[aria-labelledby]" >
2016-05-04 12:54:59 +00:00
< h2 id = "section-label" > X< / h2 >
< / section >
2018-01-18 20:39:12 +00:00
< select data-role = "button" data-platform = "atk,mac" class = "ex" data-note = ":not([multiple])" >
< option data-role = "" data-platform = "atk,mac" class = "ex" > X< / option >
< optgroup data-role = "" data-platform = "atk,mac" class = "ex" label = "more" >
< option data-role = "" data-platform = "atk,mac" class = "ex" > X< / option >
2014-02-11 19:27:12 +00:00
< / optgroup >
< / select >
2018-01-18 20:39:12 +00:00
< select data-role = "listbox" data-platform = "atk,mac" class = "ex" multiple data-note = "[multiple]" >
< option data-role = "option" data-platform = "atk,mac" class = "ex" > X< / option >
< optgroup data-role = "option" data-platform = "atk,mac" class = "ex" label = "more" >
< option data-role = "option" data-platform = "atk,mac" class = "ex" > Y< / option >
< option data-role = "option" data-platform = "atk,mac" class = "ex" > Z< / option >
2014-02-11 19:27:12 +00:00
< / optgroup >
< / select >
2018-01-18 20:39:12 +00:00
< small data-role = "" data-platform = "atk,mac" class = "ex" > X< / small >
< span data-role = "" data-platform = "atk,mac" class = "ex" > X< / span >
2019-10-24 00:09:48 +00:00
< strong data-role = "" data-platform = "atk,mac" class = "ex" > X< / strong >
2019-07-11 13:36:50 +00:00
< sub data-role = "subscript" data-platform = "atk,mac" class = "ex" > X< / sub >
< sup data-role = "superscript" data-platform = "atk,mac" class = "ex" > X< / sup >
2018-01-18 20:39:12 +00:00
< svg data-role = "" data-platform = "atk,mac" class = "ex" > X< / svg >
2014-02-11 19:27:12 +00:00
2018-01-18 20:39:12 +00:00
< table data-role = "table" data-platform = "atk,mac" class = "ex" >
2018-06-05 15:55:06 +00:00
< caption data-role = "caption" data-platform = "atk,mac" class = "ex" > X< / caption >
2018-01-18 20:39:12 +00:00
< thead data-role = "rowgroup" data-platform = "atk,mac" class = "ex" >
< tr data-role = "row" data-platform = "atk,mac" class = "ex" >
< th data-role = "columnheader" data-platform = "atk,mac" class = "ex" > X< / th >
2014-02-11 19:27:12 +00:00
< / tr >
< / thead >
2018-01-18 20:39:12 +00:00
< tbody data-role = "rowgroup" data-platform = "atk,mac" class = "ex" >
< tr data-role = "row" data-platform = "atk,mac" class = "ex" >
< td data-role = "cell" data-platform = "atk,mac" class = "ex" > X< / td >
2014-02-11 19:27:12 +00:00
< / tr >
< / tbody >
2018-01-18 20:39:12 +00:00
< tfoot data-role = "rowgroup" data-platform = "atk,mac" class = "ex" >
< tr data-role = "row" data-platform = "atk,mac" class = "ex" >
< td data-role = "cell" data-platform = "atk,mac" class = "ex" > X< / td >
2014-02-11 19:27:12 +00:00
< / tr >
< / tfoot >
< / table >
2015-07-10 22:04:50 +00:00
2018-01-18 20:39:12 +00:00
< table role = "grid" data-role = "grid" data-platform = "atk,mac" class = "ex" >
< caption data-role = "" data-platform = "atk,mac" class = "ex" > X< / caption >
< thead data-role = "rowgroup" data-platform = "atk,mac" class = "ex" >
< tr data-role = "row" data-platform = "atk,mac" class = "ex" >
< th data-role = "columnheader" data-platform = "atk,mac" class = "ex" > X< / th >
2015-07-10 22:04:50 +00:00
< / tr >
< / thead >
2018-01-18 20:39:12 +00:00
< tbody data-role = "rowgroup" data-platform = "atk,mac" class = "ex" >
< tr data-role = "row" data-platform = "atk,mac" class = "ex" >
< td role = "gridcell" data-role = "gridcell" data-platform = "atk,mac" class = "ex" > X< / td >
2015-07-10 22:04:50 +00:00
< / tr >
< / tbody >
2018-01-18 20:39:12 +00:00
< tfoot data-role = "rowgroup" data-platform = "atk,mac" class = "ex" >
< tr data-role = "row" data-platform = "atk,mac" class = "ex" >
< td role = "gridcell" data-role = "gridcell" data-platform = "atk,mac" class = "ex" > X< / td >
2015-07-10 22:04:50 +00:00
< / tr >
< / tfoot >
< / table >
2018-01-18 20:39:12 +00:00
< textarea data-role = "textbox" data-platform = "atk,mac" class = "ex" > X< / textarea >
2019-07-11 13:36:50 +00:00
< time data-role = "time" data-platform = "atk,mac" class = "ex" > X< / time >
2018-01-18 20:39:12 +00:00
< ul data-role = "list" data-platform = "atk,mac" class = "ex" >
< li data-role = "listitem" data-platform = "atk,mac" class = "ex" > X< / li >
2014-02-11 19:27:12 +00:00
< / ul >
2018-01-18 20:39:12 +00:00
< var data-role = "" data-platform = "atk,mac" class = "ex" > X< / var >
< wbr data-role = "" data-platform = "atk,mac" class = "ex" > X< / wbr >
2014-02-11 19:27:12 +00:00
<!-- ==================================================================================================== -->
<!-- Abstract ARIA roles in alphabetical order; only generic role should be exposed on abstract roles -->
<!-- ==================================================================================================== -->
2018-01-18 20:39:12 +00:00
< div role = "command" data-role = "" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "composite" data-role = "" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "input" data-role = "" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "landmark" data-role = "" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "range" data-role = "" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "roletype" data-role = "" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "section" data-role = "" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "sectionhead" data-role = "" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "select" data-role = "" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "structure" data-role = "" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "widget" data-role = "" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "window" data-role = "" data-platform = "atk,mac" class = "ex" > X< / div >
2014-02-11 19:27:12 +00:00
<!-- ==================================================================================================== -->
<!-- Non - abstract ARIA roles in alphabetical order, excepting the need for nesting (e.g. row is with its grid parent) -->
<!-- ==================================================================================================== -->
2018-01-18 20:39:12 +00:00
< div role = "alert" data-role = "alert" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "alertdialog" data-role = "alertdialog" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "application" data-role = "application" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "article" data-role = "article" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "banner" data-role = "banner" data-platform = "atk,mac" class = "ex" > X< / div >
2018-06-05 15:55:06 +00:00
< div role = "blockquote" data-role = "blockquote" data-platform = "atk,mac" class = "ex" > X< / div >
2018-01-18 20:39:12 +00:00
< div role = "button" data-role = "button" data-platform = "atk,mac" class = "ex" > X< / div >
2018-06-05 15:55:06 +00:00
< div role = "caption" data-role = "caption" data-platform = "atk,mac" class = "ex" > X< / div >
2018-01-18 20:39:12 +00:00
< div role = "checkbox" data-role = "checkbox" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "combobox" data-role = "combobox" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "complementary" data-role = "complementary" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "contentinfo" data-role = "contentinfo" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "definition" data-role = "definition" data-platform = "atk,mac" class = "ex" > X< / div >
2019-07-11 13:36:50 +00:00
< div role = "deletion" data-role = "deletion" data-platform = "atk,mac" class = "ex" > X< / div >
2018-01-18 20:39:12 +00:00
< div role = "dialog" data-role = "dialog" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "directory" data-role = "list" data-platform = "atk,mac" class = "ex" > X< / div > <!-- FIXME: should be directory -->
< div role = "document" data-role = "document" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "figure" data-role = "figure" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "form" data-role = "form" data-platform = "atk,mac" class = "ex" > X< / div >
2018-01-22 19:16:52 +00:00
< div role = "graphics-document" data-role = "document" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "graphics-object" data-role = "group" data-platform = "atk,mac" class = "ex" > X< / div >
2021-07-12 16:14:28 +00:00
< div role = "graphics-symbol" data-role = "image" data-platform = "atk,mac" class = "ex" > X< / div >
2018-01-18 20:39:12 +00:00
< div role = "grid" data-role = "grid" data-platform = "atk,mac" class = "ex" >
< div role = "rowgroup" data-role = "rowgroup" data-platform = "atk,mac" class = "ex" >
< div role = "row" data-role = "row" data-platform = "atk,mac" class = "ex" >
< div role = "rowheader" data-role = "rowheader" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "columnheader" data-role = "columnheader" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "gridcell" data-role = "gridcell" data-platform = "atk,mac" class = "ex" > X< / div >
2014-02-11 19:27:12 +00:00
< / div >
< / div >
< / div >
2018-01-18 20:39:12 +00:00
< div role = "feed" data-role = "feed" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "group" data-role = "group" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "heading" data-role = "heading" data-platform = "atk,mac" class = "ex" > X< / div >
2021-07-12 16:14:28 +00:00
< div role = "img" data-role = "image" data-platform = "atk,mac" class = "ex" > X< / div >
2019-07-11 13:36:50 +00:00
< div role = "insertion" data-role = "insertion" data-platform = "atk,mac" class = "ex" > X< / div >
2018-01-18 20:39:12 +00:00
< div role = "link" data-role = "link" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "list" data-role = "list" data-platform = "atk,mac" class = "ex" >
< div role = "listitem" data-role = "listitem" data-platform = "atk,mac" class = "ex" > X< / div >
2014-02-11 19:27:12 +00:00
< / div >
2018-01-18 20:39:12 +00:00
< div role = "listbox" data-role = "listbox" data-platform = "atk,mac" class = "ex" >
< div role = "option" data-role = "option" data-platform = "atk,mac" class = "ex" > X< / div >
2014-02-11 19:27:12 +00:00
< / div >
2018-01-18 20:39:12 +00:00
< div role = "log" data-role = "log" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "main" data-role = "main" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "marquee" data-role = "marquee" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "math" data-role = "math" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "menu" data-role = "menu" data-platform = "atk,mac" class = "ex" >
< div role = "menuitem" data-role = "menuitem" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "menuitemcheckbox" data-role = "menuitemcheckbox" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "menuitemradio" data-role = "menuitemradio" data-platform = "atk,mac" class = "ex" > X< / div >
2014-02-11 19:27:12 +00:00
< / div >
2018-01-18 20:39:12 +00:00
< div role = "menubar" data-role = "menubar" data-platform = "atk,mac" class = "ex" >
< div role = "menuitem" data-role = "menuitem" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "menuitemcheckbox" data-role = "menuitemcheckbox" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "menuitemradio" data-role = "menuitemradio" data-platform = "atk,mac" class = "ex" > X< / div >
2014-02-11 19:27:12 +00:00
< / div >
2019-03-20 13:09:02 +00:00
< div role = "meter" data-role = "meter" data-platform = "atk,mac" class = "ex" > X< / div >
2018-01-18 20:39:12 +00:00
< div role = "navigation" data-role = "navigation" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "note" data-role = "note" data-platform = "atk,mac" class = "ex" > X< / div >
2018-06-05 15:55:06 +00:00
< div role = "paragraph" data-role = "paragraph" data-platform = "atk,mac" class = "ex" > X< / div >
2018-01-18 20:39:12 +00:00
< div role = "presentation" data-role = "" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "progressbar" data-role = "progressbar" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "radiogroup" data-role = "radiogroup" data-platform = "atk,mac" class = "ex" >
< div role = "radio" data-role = "radio" data-platform = "atk,mac" class = "ex" > X< / div >
2014-02-11 19:27:12 +00:00
< / div >
2018-01-18 20:39:12 +00:00
< div role = "region" data-platform = "atk,mac" class = "ex" data-role = "" data-note = ":not([aria-label]:not([aria-labelledby])" > X< / div >
< div role = "region" data-platform = "atk,mac" class = "ex" data-role = "region" aria-label = "x" data-note = "[aria-label]" > X< / div >
< div role = "region" data-platform = "atk,mac" class = "ex" data-role = "region" aria-labelledby = "region-label" data-note = "[aria-labelledby]" >
2017-04-29 02:07:21 +00:00
< h2 id = "region-label" > X< / h2 >
< / div >
2018-01-18 20:39:12 +00:00
< div role = "scrollbar" data-role = "scrollbar" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "search" data-role = "search" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "separator" data-role = "separator" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "slider" data-role = "slider" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "spinbutton" data-role = "spinbutton" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "status" data-role = "status" data-platform = "atk,mac" class = "ex" > X< / div >
2019-07-11 13:36:50 +00:00
< div role = "subscript" data-role = "subscript" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "superscript" data-role = "superscript" data-platform = "atk,mac" class = "ex" > X< / div >
2018-01-18 20:39:12 +00:00
< div role = "tablist" data-role = "tablist" data-platform = "atk,mac" class = "ex" >
< div role = "tab" data-role = "tab" data-platform = "atk,mac" class = "ex" > X< / div >
2014-02-11 19:27:12 +00:00
< / div >
2018-01-18 20:39:12 +00:00
< div role = "tabpanel" data-role = "tabpanel" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "textbox" data-role = "" data-platform = "atk,mac" class = "ex" > X< / div > <!-- FIXME: should be textbox -->
< div role = "term" data-role = "term" data-platform = "atk,mac" class = "ex" > X< / div >
2019-07-11 13:36:50 +00:00
< div role = "time" data-role = "time" data-platform = "atk,mac" class = "ex" > X< / div >
2018-01-18 20:39:12 +00:00
< div role = "timer" data-role = "timer" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "toolbar" data-role = "toolbar" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "tooltip" data-role = "tooltip" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "tree" data-role = "tree" data-platform = "atk,mac" class = "ex" >
< div role = "treeitem" data-role = "treeitem" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "group" data-role = "group" data-platform = "atk,mac" class = "ex" >
< div role = "treeitem" data-role = "treeitem" data-platform = "atk,mac" class = "ex" > X< / div >
2014-02-11 19:27:12 +00:00
< / div >
< / div >
2018-01-18 20:39:12 +00:00
< div role = "treegrid" data-role = "treegrid" data-platform = "atk,mac" class = "ex" >
< div role = "rowgroup" data-role = "rowgroup" data-platform = "atk,mac" class = "ex" >
< div role = "row" data-role = "row" data-platform = "atk,mac" class = "ex" >
< div role = "rowheader" data-role = "rowheader" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "columnheader" data-role = "columnheader" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "gridcell" data-role = "gridcell" data-platform = "atk,mac" class = "ex" > X< / div >
2014-02-11 19:27:12 +00:00
< / div >
< / div >
< / div >
<!-- ==================================================================================================== -->
<!-- generic role attribute parsing tests -->
<!-- ==================================================================================================== -->
2018-01-18 20:39:12 +00:00
< div role = "button foo" data-role = "button" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "foo button bar" data-role = "button" data-platform = "atk,mac" class = "ex" > X< / div >
< div role = "foo button bar" data-role = "button" data-platform = "atk,mac" class = "ex" > X< / div > <!-- [sic] Two spaces in role string -->
2014-02-11 19:27:12 +00:00
<!-- FIXME: These two should be button but fail b/c of http://webkit.org/b/128400 -->
2018-01-18 20:39:12 +00:00
< div role = "foo button bar" data-role = "" data-platform = "atk,mac" class = "ex" > X< / div > <!-- [sic] Tab chars in role string -->
2014-02-11 19:27:12 +00:00
< div role = "foo
button
2018-01-18 20:39:12 +00:00
bar" data-role="" data-platform="atk,mac" class="ex">X< / div > <!-- [sic] Newlines in role string -->
2014-02-11 19:27:12 +00:00
<!-- ==================================================================================================== -->
<!-- implicit role parsing tests -->
<!-- ==================================================================================================== -->
2021-07-12 16:14:28 +00:00
< img role = "foo" src = "foo.png" data-role = "image" alt = "X" data-platform = "atk,mac" class = "ex" >
< img role = "foo bar" src = "foo.png" data-role = "image" alt = "X" data-platform = "atk,mac" class = "ex" >
< img role = "foo bar" src = "foo.png" data-role = "image" alt = "X" data-platform = "atk,mac" class = "ex" > <!-- [sic] Two spaces in role string -->
< img role = "foo bar" src = "foo.png" data-role = "image" alt = "X" data-platform = "atk,mac" class = "ex" > <!-- [sic] Newline in role string -->
2014-02-11 19:27:12 +00:00
< img role = "foo
2021-07-12 16:14:28 +00:00
bar" src="foo.png" data-role="image" alt="X" data-platform="atk,mac" class="ex"><!-- [sic] Tab char in role string -->
2018-01-18 20:39:12 +00:00
< img role = "text" src = "foo.png" data-role = "text" alt = "X" data-platform = "atk,mac" class = "ex" >
< img role = "text img" src = "foo.png" data-role = "text" alt = "X" data-platform = "atk,mac" class = "ex" >
2021-07-12 16:14:28 +00:00
< img role = "img text" src = "foo.png" data-role = "image" alt = "X" data-platform = "atk,mac" class = "ex" >
< img role = "presentation" data-role = "image" data-note = "[aria-label]" alt = "X" src = "foo.png" aria-label = "X" data-platform = "atk,mac" class = "ex" > <!-- presentation with global attr should fallback to implicit role -->
2018-01-18 20:39:12 +00:00
< a href = "#" role = "foo bar" data-role = "link" data-platform = "atk,mac" class = "ex" > X< / a >
2016-07-08 18:01:55 +00:00
< / div >
2014-02-11 19:27:12 +00:00
< div id = "console" > < / div >
< script >
if (window.testRunner & & window.accessibilityController) {
description("This tests that native elements and ARIA overrides result in the same ARIA computed role, regardless of platform.")
var examples = document.querySelectorAll(".ex");
var el, contentAttrRoleString, axElement, computedAriaRole, output, expectedRole, expectation, result, note;
2018-01-18 20:39:12 +00:00
var currentPlatform = accessibilityController.platformName;
2021-08-06 00:23:19 +00:00
let consoleOutput = "";
2014-02-11 19:27:12 +00:00
for (var i = 0, c = examples.length; i < c ; i + + ) {
el = examples[i];
el.id = "ex" + i
axElement = accessibilityController.accessibleElementById(el.id);
if (!axElement)
continue;
2018-01-18 20:39:12 +00:00
supportedPlatforms = el.getAttribute('data-platform');
if (!supportedPlatforms || supportedPlatforms.indexOf(currentPlatform) == -1)
continue;
2014-02-11 19:27:12 +00:00
computedAriaRole = axElement.computedRoleString;
contentAttrRoleString = el.getAttribute("role");
note = el.getAttribute("data-note")
output = el.tagName.toLowerCase() + (contentAttrRoleString ? ("[role=\""+contentAttrRoleString+"\"]") : "") + (note ? note : "");
output += " -> ";
output += computedAriaRole;
output += ". ";
expectedRole = "";
if (el.hasAttribute("data-role")) {
expectedRole = el.getAttribute("data-role");
}
expectation = expectedRole;
matchedResults = (computedAriaRole == expectedRole)
2021-08-04 18:59:03 +00:00
if (matchedResults)
2021-08-06 00:23:19 +00:00
consoleOutput += "PASS " + output + "\n";
2021-08-04 18:59:03 +00:00
else
2021-08-06 00:23:19 +00:00
consoleOutput += "FAIL " + output + "Expected: " + expectation + "\n";
2014-02-11 19:27:12 +00:00
}
2021-08-06 00:23:19 +00:00
document.getElementById("console").textContent = consoleOutput;
2014-02-11 19:27:12 +00:00
// Once tests are complete, hide all the example markup.
2016-07-08 18:01:55 +00:00
document.getElementById("content").style.visibility = "hidden";
2014-02-11 19:27:12 +00:00
}
< / script >
< script src = "../resources/js-test-post.js" > < / script >
< / body >
< / html >