| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <script src="../resources/js-test.js"></script> |
| </head> |
| <body> |
| |
| <!-- ==================================================================================================== --> |
| <!-- This tests ARIA table role and cell role work as intended --> |
| <!-- ==================================================================================================== --> |
| |
| <div role="grid" data-role="grid" class="ex"> |
| <div role="gridcell" data-role="gridcell" class="ex">data</div> |
| <div role="cell" data-role="cell" class="ex">data2</div> |
| <div role="cell" data-role="cell" class="ex">data3</div> |
| </div> |
| |
| <table role="table" data-role="table" class="ex"> |
| <td role="gridcell" data-role="gridcell" class="ex">data</td> |
| <td data-role="cell" class="ex">data2</td> |
| <td role="cell" data-role="cell" class="ex">data3</td> |
| </table> |
| |
| <script> |
| if (window.testRunner && window.accessibilityController) { |
| let output = "This tests that table and cell have the correct ARIA roles.\n"; |
| |
| let examples = document.querySelectorAll(".ex"); |
| for (let i = 0; i < examples.length; i++) { |
| let el = examples[i]; |
| el.id = "ex" + i; |
| |
| axElement = accessibilityController.accessibleElementById(el.id); |
| if (!axElement) |
| continue; |
| |
| let role = axElement.computedRoleString; |
| let contentAttrRoleString = el.getAttribute("role"); |
| let note = el.getAttribute("data-note"); |
| let out = el.tagName.toLowerCase() + (contentAttrRoleString ? ("[role=\"" + contentAttrRoleString + "\"]") : "") + (note ? note : ""); |
| out += ` -> ${role}. `; |
| |
| let expectedRole = ""; |
| if (el.hasAttribute("data-role")) |
| expectedRole = el.getAttribute("data-role"); |
| |
| if (role == expectedRole) |
| output += `PASS: ${out}\n`; |
| else |
| output += `FAIL: ${out} Expected: ${expectedRole}.\n`; |
| } |
| |
| debug(output); |
| // Once tests are complete, hide all the example markup. |
| examples.forEach((element) => { element.style.display = "none"; }); |
| } |
| </script> |
| </body> |
| </html> |
