Bug 144804 - AX: Don't expose elements as data tables just because they use display: table
Summary: AX: Don't expose elements as data tables just because they use display: table
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Accessibility (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: chris fleizach
URL:
Keywords: InRadar
: 144424 (view as bug list)
Depends on:
Blocks:
 
Reported: 2015-05-08 09:38 PDT by chris fleizach
Modified: 2015-05-13 00:06 PDT (History)
9 users (show)

See Also:


Attachments
patch (4.14 KB, patch)
2015-05-08 15:01 PDT, chris fleizach
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description chris fleizach 2015-05-08 09:38:42 PDT
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>
Comment 1 chris fleizach 2015-05-08 15:01:03 PDT
Created attachment 252751 [details]
patch
Comment 2 WebKit Commit Bot 2015-05-10 07:54:15 PDT
Comment on attachment 252751 [details]
patch

Clearing flags on attachment: 252751

Committed r184046: <http://trac.webkit.org/changeset/184046>
Comment 3 WebKit Commit Bot 2015-05-10 07:54:19 PDT
All reviewed patches have been landed.  Closing bug.
Comment 4 James Craig 2015-05-13 00:06:43 PDT
*** Bug 144424 has been marked as a duplicate of this bug. ***