1455066 - Firefox exposes ARIA grids with extra divs incorrectly

Status: RESOLVED FIXED

(Core :: Disability Access APIs, defect, P2)

Description

[Dominic Mazzoni]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

Steps to reproduce:

Load the following snippet into Firefox Windows and then inspect the output using an accessibility debugging tool.

<div role="grid">
    <div role="row">
      <div role="gridcell">Normal cell</div>
      <div role="gridcell">1</div>
    </div>
    <div role="row">
      <div role="gridcell">Div</div>
      <div><div role="gridcell">2</div></div>
    </div>
</div>

Firefox is not treating the last gridcell as part of the table because of the extra wrapping <div>. One easy thing to verify is that the IA2 attribute "table-cell-index" is not exposed at all on that cell. It also seems to expose the wrong table-cell-index on the previous cell either, but I'm not sure if that's related.

I believe it's also not exposing all of the IAccessibleTableCell properties correctly either, but table-cell-index being missing was my first clue.

Note that if you wrap it in a <span> or <p> it works fine.

Finally, I've seen this pattern in the wild - Amazon's result pages contain some ARIA grids that have extra wrapping <div> elements between the row and the grid elements.

Comment 1

[u554753]

Not sure if this is a layout issue or a debugging issue. Please correct if it's the latter case.

Comment 2

[alexander :surkov (:asurkov)]

It is accessibility bug, so moving it to a proper component.

HTML:div has an accessible object in Firefox, and thus it appears in the accessible hierarchy. You may argue it shouldn't be accessible, and it will be a fix for the bug. Otherwise it doesn't look like a valid ARIA grid hierarchy, and thus it has to seen as author error. Does ARIA say something about such cases?

Are you sure it works fine for HTML:p? It shouldn't be different from HTML:div.

Comment 3

[James Teh [:Jamie]]

This breaks even harder if there is a div between a grid and its rows:
data:text/html,before<div role="grid" aria-readonly="true"><div tabindex="-1"><div role="row"><div role="gridcell">cell content</div></div></div></div>
This results in a table with 0 rows and 0 columns and table navigation fails. This breaks real world usage in web apps such as SharePoint and SAP Net Viewer. Works as expected in Chrome.

The spec notes that required owned elements (row is a required owned element of grid) can be descendants, not just children:

Any element that will be owned by the element with this role. For example, an element with the role list will own at least one element with the role listitem.

https://w3c.github.io/aria/#mustContain

An 'owned element' is any DOM descendant of the element, any element specified as a child via aria-owns, or any DOM descendant of the owned child.

https://w3c.github.io/aria/#terms

IMO, this vagueness around descendant is problematic. For example, what if the intervening div had a role of button or cell? However, the reality is that our current behaviour is breaking real world use cases. Maybe we could ignore intervening generic HyperTextAccessibles with non-presentation ARIA roles?

Comment 4

[Marco Zehe (:MarcoZ)]

Attachment: Bug 1455066 - Take into account wrapping div or section elements when calculating table indexes for grid rows, r=Jamie

When looking to see if a row has a table, now also include section role accessibles in addition to row groups.

Also, when iterating through rows from a table, take into account that rows may be wrapped in section role accessibles.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f80d7f8cf8f9
Take into account wrapping div or section elements when calculating table indexes for grid rows, r=Jamie

Comment 6

[Oana Pop-Rus]

https://hg.mozilla.org/mozilla-central/rev/f80d7f8cf8f9