144804 2015-05-08 09:38:42 -0700 AX: Don't expose elements as data tables just because they use display: table 2015-05-13 00:06:43 -0700 1 1 1 Unclassified WebKit Accessibility 528+ (Nightly build) All All RESOLVED FIXED InRadar P2 Normal --- 1 cfleizach cfleizach aboxhall apinheiro commit-queue dmazzoni jcraig jdiggs mario samuel_white webkit-bug-importer oldest_to_newest 1093205 0 cfleizach 2015-05-08 09:38:42 -0700 A layout table can be coded using a <div> element styled with display:table, and children <div> elements with display:table-cell (plus other table-* rules to define the table’s rows and column). The expectation is that since the tabular structure is defined with the styling and not with structural markup (e.g. html <table> element or WAI-ARIA role=“table), the content should not be exposed by VO as an actual table. This irrespectively of other style applied to the elements (e.g. borders). In particular, if the table consists of only one row, it should be treated by VO as a layout table and therefore not exposed as a table. If the border is not present, the markup is no longer exposed as a table. It’s common practice to visually hide the content using the Clip Method, for example with the following CSS class: .a11y { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } If a border is applied to any of the <div> elements of the faux table VO exposes a table. However, the first time the page is visited, VO does not allow to enter the table. The table can be reached with VO (e.g. with VO+right keys), but its not possible to enter inside the table and visit its cells. It’s not even possible to get past the table. Although it’s possible to go back using VO+left. But after reloading the page VO still exposes the table but now does allow to enter the table. This can be tested using the following markup: <div class="layout-table"> <div class="first-cell a11y">Visually hidden div</div> <div class="second-cell">Left div</div> <div class="third-cell">Right div</div> </div> and using only the following CSS: .layout-table { display:table; } .layout-table .second-cell, .layout-table .third-cell, .layout-table .third-cell-no-border { display: table-cell; } .layout-table .third-cell { border-left: 5px solid #f00; } <rdar://problem/19745053> 1093318 1 252751 cfleizach 2015-05-08 15:01:03 -0700 Created attachment 252751 patch 1093529 2 252751 commit-queue 2015-05-10 07:54:15 -0700 Comment on attachment 252751 patch Clearing flags on attachment: 252751 Committed r184046: <http://trac.webkit.org/changeset/184046> 1093530 3 commit-queue 2015-05-10 07:54:19 -0700 All reviewed patches have been landed. Closing bug. 1094429 4 jcraig 2015-05-13 00:06:43 -0700 *** Bug 144424 has been marked as a duplicate of this bug. *** 252751 2015-05-08 15:01:03 -0700 2015-05-10 07:54:15 -0700 patch patch text/plain 4242 cfleizach SW5kZXg6IFNvdXJjZS9XZWJDb3JlL0NoYW5nZUxvZwo9PT09PT09PT09PT09PT09PT09PT09PT09 PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09Ci0tLSBTb3VyY2UvV2Vi Q29yZS9DaGFuZ2VMb2cJKHJldmlzaW9uIDE4Mzk5NSkKKysrIFNvdXJjZS9XZWJDb3JlL0NoYW5n ZUxvZwkod29ya2luZyBjb3B5KQpAQCAtMSwzICsxLDE3IEBACisyMDE1LTA1LTA4ICBDaHJpcyBG bGVpemFjaCAgPGNmbGVpemFjaEBhcHBsZS5jb20+CisKKyAgICAgICAgQVg6IERvbid0IGV4cG9z ZSBlbGVtZW50cyBhcyBkYXRhIHRhYmxlcyBqdXN0IGJlY2F1c2UgdGhleSB1c2UgZGlzcGxheTog dGFibGUKKyAgICAgICAgaHR0cHM6Ly9idWdzLndlYmtpdC5vcmcvc2hvd19idWcuY2dpP2lkPTE0 NDgwNAorCisgICAgICAgIFJldmlld2VkIGJ5IE5PQk9EWSAoT09QUyEpLgorCisgICAgICAgIEVs ZW1lbnRzIHdpbGwgY3JlYXRlIFJlbmRlclRhYmxlIG9iamVjdHMgaWYgdGhleSBoYXZlIGRpc3Bs YXk6dGFibGUuIFdlIHNob3VsZG4ndCBhc3N1bWUgdGhlc2UgYXJlIGFjY2Vzc2liaWxpdHkgdGFi bGVzLgorCisgICAgICAgIFRlc3Q6IGFjY2Vzc2liaWxpdHkvY3NzLXRhYmxlLWlnbm9yZWQuaHRt bAorCisgICAgICAgICogYWNjZXNzaWJpbGl0eS9BY2Nlc3NpYmlsaXR5VGFibGUuY3BwOgorICAg ICAgICAoV2ViQ29yZTo6QWNjZXNzaWJpbGl0eVRhYmxlOjppc0RhdGFUYWJsZSk6CisKIDIwMTUt MDUtMDggIFhhYmllciBSb2RyaWd1ZXogQ2FsdmFyICA8Y2FsdmFyaXNAaWdhbGlhLmNvbT4gYW5k IFlvdWVubiBGYWJsZXQgPHlvdWVubi5mYWJsZXRAY3JmLmNhbm9uLmZyPgogCiAgICAgICAgIFtT dHJlYW1zIEFQSV0gUmVhZGFibGVTdHJlYW0gY29uc3RydWN0b3Igc3RhcnQgZnVuY3Rpb24gc2hv dWxkIGJlIGFibGUgdG8gZXJyb3IgdGhlIHN0cmVhbQpJbmRleDogU291cmNlL1dlYkNvcmUvYWNj ZXNzaWJpbGl0eS9BY2Nlc3NpYmlsaXR5VGFibGUuY3BwCj09PT09PT09PT09PT09PT09PT09PT09 PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0KLS0tIFNvdXJjZS9X ZWJDb3JlL2FjY2Vzc2liaWxpdHkvQWNjZXNzaWJpbGl0eVRhYmxlLmNwcAkocmV2aXNpb24gMTgz OTY1KQorKysgU291cmNlL1dlYkNvcmUvYWNjZXNzaWJpbGl0eS9BY2Nlc3NpYmlsaXR5VGFibGUu Y3BwCSh3b3JraW5nIGNvcHkpCkBAIC0xNTAsNiArMTUwLDEwIEBACiAgICAgICAgIH0KICAgICB9 CiAgICAgCisgICAgLy8gVGhlIGZvbGxvd2luZyBjaGVja3Mgc2hvdWxkIG9ubHkgYXBwbHkgaWYg dGhpcyBpcyBhIHJlYWwgPHRhYmxlPiBlbGVtZW50LgorICAgIGlmICghaGFzVGFnTmFtZSh0YWJs ZVRhZykpCisgICAgICAgIHJldHVybiBmYWxzZTsKKyAgICAKICAgICBSZW5kZXJUYWJsZSYgdGFi bGUgPSBkb3duY2FzdDxSZW5kZXJUYWJsZT4oKm1fcmVuZGVyZXIpOwogICAgIC8vIGdvIHRocm91 Z2ggdGhlIGNlbGwncyBhbmQgY2hlY2sgZm9yIHRlbGwtdGFsZSBzaWducyBvZiAiZGF0YSIgdGFi bGUgc3RhdHVzCiAgICAgLy8gY2VsbHMgaGF2ZSBib3JkZXJzLCBvciB1c2UgYXR0cmlidXRlcyBs aWtlIGhlYWRlcnMsIGFiYnIsIHNjb3BlIG9yIGF4aXMKSW5kZXg6IExheW91dFRlc3RzL0NoYW5n ZUxvZwo9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09 PT09PT09PT09PT09PT09Ci0tLSBMYXlvdXRUZXN0cy9DaGFuZ2VMb2cJKHJldmlzaW9uIDE4Mzk5 NSkKKysrIExheW91dFRlc3RzL0NoYW5nZUxvZwkod29ya2luZyBjb3B5KQpAQCAtMSwzICsxLDEz IEBACisyMDE1LTA1LTA4ICBDaHJpcyBGbGVpemFjaCAgPGNmbGVpemFjaEBhcHBsZS5jb20+CisK KyAgICAgICAgQVg6IERvbid0IGV4cG9zZSBlbGVtZW50cyBhcyBkYXRhIHRhYmxlcyBqdXN0IGJl Y2F1c2UgdGhleSB1c2UgZGlzcGxheTogdGFibGUKKyAgICAgICAgaHR0cHM6Ly9idWdzLndlYmtp dC5vcmcvc2hvd19idWcuY2dpP2lkPTE0NDgwNAorCisgICAgICAgIFJldmlld2VkIGJ5IE5PQk9E WSAoT09QUyEpLgorCisgICAgICAgICogYWNjZXNzaWJpbGl0eS9jc3MtdGFibGUtaWdub3JlZC1l eHBlY3RlZC50eHQ6IEFkZGVkLgorICAgICAgICAqIGFjY2Vzc2liaWxpdHkvY3NzLXRhYmxlLWln bm9yZWQuaHRtbDogQWRkZWQuCisKIDIwMTUtMDUtMDggIENhcmxvcyBHYXJjaWEgQ2FtcG9zICA8 Y2dhcmNpYUBpZ2FsaWEuY29tPgogCiAgICAgICAgIFtHVEtdIFdUUiBkb2Vzbid0IGNvcnJlY3Rs eSBoYW5kbGUgdGhlIEVzY2FwZSBrZXkKSW5kZXg6IExheW91dFRlc3RzL2FjY2Vzc2liaWxpdHkv Y3NzLXRhYmxlLWlnbm9yZWQtZXhwZWN0ZWQudHh0Cj09PT09PT09PT09PT09PT09PT09PT09PT09 PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0KLS0tIExheW91dFRlc3Rz L2FjY2Vzc2liaWxpdHkvY3NzLXRhYmxlLWlnbm9yZWQtZXhwZWN0ZWQudHh0CShyZXZpc2lvbiAw KQorKysgTGF5b3V0VGVzdHMvYWNjZXNzaWJpbGl0eS9jc3MtdGFibGUtaWdub3JlZC1leHBlY3Rl ZC50eHQJKHdvcmtpbmcgY29weSkKQEAgLTAsMCArMSwxMCBAQAorVGhpcyB0ZXN0cyB0aGF0IGFu IGVsZW1lbnQgdXNlIGRpc3BsYXk6dGFibGUgd2lsbCBub3QgYmUgZXhwb3NlZCBhcyBhbiBhY2Nl c3NpYmxlIHRhYmxlLgorCitPbiBzdWNjZXNzLCB5b3Ugd2lsbCBzZWUgYSBzZXJpZXMgb2YgIlBB U1MiIG1lc3NhZ2VzLCBmb2xsb3dlZCBieSAiVEVTVCBDT01QTEVURSIuCisKKworUEFTUyAhdGFi bGUgfHwgIXRhYmxlLmlzVmFsaWQgaXMgdHJ1ZQorUEFTUyBzdWNjZXNzZnVsbHlQYXJzZWQgaXMg dHJ1ZQorCitURVNUIENPTVBMRVRFCisKSW5kZXg6IExheW91dFRlc3RzL2FjY2Vzc2liaWxpdHkv Y3NzLXRhYmxlLWlnbm9yZWQuaHRtbAo9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09 PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09Ci0tLSBMYXlvdXRUZXN0cy9hY2Nlc3Np YmlsaXR5L2Nzcy10YWJsZS1pZ25vcmVkLmh0bWwJKHJldmlzaW9uIDApCisrKyBMYXlvdXRUZXN0 cy9hY2Nlc3NpYmlsaXR5L2Nzcy10YWJsZS1pZ25vcmVkLmh0bWwJKHdvcmtpbmcgY29weSkKQEAg LTAsMCArMSwzNyBAQAorPCFET0NUWVBFIEhUTUwgUFVCTElDICItLy9JRVRGLy9EVEQgSFRNTC8v RU4iPgorPGh0bWw+Cis8aGVhZD4KKzxzY3JpcHQgc3JjPSIuLi9yZXNvdXJjZXMvanMtdGVzdC1w cmUuanMiPjwvc2NyaXB0PgorPHN0eWxlPgorLmxheW91dC10YWJsZSB7IGRpc3BsYXk6dGFibGU7 IH0KKy5sYXlvdXQtdGFibGUgLnNlY29uZC1jZWxsLCAubGF5b3V0LXRhYmxlIC50aGlyZC1jZWxs LCAubGF5b3V0LXRhYmxlIC50aGlyZC1jZWxsLW5vLWJvcmRlciB7IGRpc3BsYXk6IHRhYmxlLWNl bGw7IH0KKy5sYXlvdXQtdGFibGUgLnRoaXJkLWNlbGwgeyBib3JkZXItbGVmdDogNXB4IHNvbGlk ICNmMDA7IH0KKzwvc3R5bGU+Cis8L2hlYWQ+CisKKzxib2R5IGlkPSJib2R5Ij4KKworPGRpdiBp ZD0iY29udGVudCI+Cis8ZGl2IGNsYXNzPSJsYXlvdXQtdGFibGUiIGlkPSJ0YWJsZSI+CisgICAg PGRpdiBjbGFzcz0iZmlyc3QtY2VsbCBhMTF5Ij5WaXN1YWxseSBoaWRkZW4gZGl2PC9kaXY+Cisg ICAgPGRpdiBjbGFzcz0ic2Vjb25kLWNlbGwiPkxlZnQgZGl2PC9kaXY+CisgICAgPGRpdiBjbGFz cz0idGhpcmQtY2VsbCI+UmlnaHQgZGl2PC9kaXY+Cis8L2Rpdj4KKzwvZGl2PgorCis8cCBpZD0i ZGVzY3JpcHRpb24iPjwvcD4KKzxkaXYgaWQ9ImNvbnNvbGUiPjwvZGl2PgorCis8c2NyaXB0Pgor ZGVzY3JpcHRpb24oIlRoaXMgdGVzdHMgdGhhdCBhbiBlbGVtZW50IHVzZSBkaXNwbGF5OnRhYmxl IHdpbGwgbm90IGJlIGV4cG9zZWQgYXMgYW4gYWNjZXNzaWJsZSB0YWJsZS4iKTsKKworaWYgKHdp bmRvdy5hY2Nlc3NpYmlsaXR5Q29udHJvbGxlcikgeworICAgIHZhciB0YWJsZSA9IGFjY2Vzc2li aWxpdHlDb250cm9sbGVyLmFjY2Vzc2libGVFbGVtZW50QnlJZCgidGFibGUiKTsKKyAgICBzaG91 bGRCZVRydWUoIiF0YWJsZSB8fCAhdGFibGUuaXNWYWxpZCIpOworICAgIGRvY3VtZW50LmdldEVs ZW1lbnRCeUlkKCJjb250ZW50Iikuc3R5bGUudmlzaWJpbGl0eSA9ICJoaWRkZW4iOworfQorCis8 L3NjcmlwdD4KKzxzY3JpcHQgc3JjPSIuLi9yZXNvdXJjZXMvanMtdGVzdC1wb3N0LmpzIj48L3Nj cmlwdD4KKzwvYm9keT4KKzwvaHRtbD4K