Losing columnHeader role when setting CSS display on a table
Categories
(Core :: Disability Access APIs, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox109 | --- | fixed |
People
(Reporter: henry-x, Assigned: nlapre)
References
(Blocks 1 open bug)
Details
Attachments
(1 file)
Steps to Reproduce
Open the following
<html>
<body>
<table style="display: grid;">
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</tbody>
</table>
</body>
</html>
Result
Accessibility tab shows the header cells with the cell role. The same happens if display is set on the header <tr>.
Note that the rest of the table's roles remain correct. Which seems to be an improvement on what's written here https://developer.mozilla.org/en-US/docs/Web/CSS/display#tables
Expect
Expect the columnHeader role. Similar to if no display was set on the <table>.
Full Context
I noticed this when working on Thunderbird for a <table> with some equal width and height cells using display: grid on the <table> and display: contents on the <thead>, <tbody> and <tr> elements (actually, I also had to use display: contents on the <th> and <tr> elements as well, but that was because of a quirk with XUL).
For the time being, I'm adding back the role="columnHeader" explicitly, but I thought I should flag this here.
|
||
Comment 1•5 years ago
|
||
I can confirm this bug with the latest nightly but I'm not sure how to characterize its severity. Jamie, what do you think? How widespread do you think this is on the web?
|
|
||
Updated•5 years ago
|
|
||
Comment 2•5 years ago
|
||
Anecdotally, I don't think it's hugely prevalent right now, but tables with non-table CSS styling are becoming more common over time. I'm going with s3. At worst, the user can still access the info, albeit manually and with a great deal more tedium.
Implementation note: This happens because we use ARIAGridCellAccessible for such tables internally and ARIAGridCellAccessible doesn't know how to handle <th> tags.
|
|
||
Comment 3•4 years ago
|
||
From bug 1460669 comment 0:
I think we need to merge HTMLTableHeaderCellAccessible logic into generic TableAccessibleCell, which will be picked up by ARIAGridCellAccessible and HTMLTableCellAccessible classes.
|
||
Comment 5•3 years ago
|
||
Coming in to note that I have encountered <th>s with flex and grid are exposed as cells, not headers.
Using this test:
https://cdpn.io/aardrian/debug/xxGEKKJ
This HTML:
<table">
<caption>Books</caption>
<thead>
<tr>
<th>Author</th>
<th>Title</th>
<th>Year</th>
<th>ISBN-13</th>
</tr>
</thead>
With either of these applied:
table tr {
display: flex;
}
table tr {
display: grid;
grid-template-columns: 18em 27em 3em 10em;
}
Shows the <th>s as "cell"s in the Firefox accessibility inspector.
|
Assignee | |
Updated•3 years ago
|
|
|
Assignee | |
Comment 6•3 years ago
|
||
This revision addresses an issue with th elements within tables that don't have
the table CSS display style. In these cases, where we create an
ARIAGridCellAccessible for a th, we fail to report rowheader and columnheader
properly, since ARIAGridCellAccessible doesn't know how to handle th elements.
This revision fixes the problem by moving the th NativeRole logic into the
TableCellAccessible class, then calling that logic from both the ARIA grid cell
accessible NativeRole and from HTMLTableHeaderCellAccessible, as before. This
revision also updates tests reliant on the old behavior, including beefing up
an existing test aimed at this bug specifically.
|
|
||
Comment 8•3 years ago
|
||
| bugherder | ||
Description
•