Bug 185679 – AX: Element not exposed to accessibility tree when it is set to display: contents

• Component: Accessibility
• Status: RESOLVED FIXED

[Hidde]

CSS Grid works on direct children of the grid container. To be able to place ‘grand children’ onto a CSS Grid, one can set 'display: contents' to a grid item. Its children can then be placed on the grid. 

When the  grid item is set to `display: contents` in CSS, its accessible role changes to ‘text leaf’.

Steps to reproduce:

1. Create a grid by setting 'display: grid' on a div element
2. Place some HTML in it, and make on of the items a <ul> with a couple of <li> elements
3. Inspect the <ul> item in the accessibility tree and see that it has role=list
4. Set 'display: contents' on the UL with CSS

Expected result: UL still has accessible role of 'list'. The CSS only affects the layout.

Actual result: UL element now reports 'No accessibility information' 

(Codepen example: https://codepen.io/hidde/pen/gzbMeL; blog post with use case: https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents)

The bug also occurs in Blink (https://bugs.chromium.org/p/chromium/issues/detail?id=835455); it has recently been fixed in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1455357).

[Radar WebKit Bug Importer]

<rdar://problem/40293047>

[Simon Pieters (:zcorpan)]

https://github.com/web-platform-tests/wpt/pull/12691 also has a test for this for fieldset:

https://github.com/web-platform-tests/wpt/blob/8e12c9149bcc4a2122d5a3a699ea2abc5c90c4e6/html/semantics/forms/the-fieldset-element/accessibility/fieldset-display-contents-manual.html

[Simon Pieters (:zcorpan)]

Test for display: contents on the legend (the legend is not used for the fieldset's accessible name).

https://github.com/web-platform-tests/wpt/blob/8e12c9149bcc4a2122d5a3a699ea2abc5c90c4e6/html/semantics/forms/the-fieldset-element/accessibility/legend-display-contents-manual.html

[James Craig]

*** Bug 191154 has been marked as a duplicate of this bug. ***

[James Craig]

Created attachment 353831 [details]
test case

[Ole Strøm]

This was just fixed in Chrome / Edge / Blink: https://bugs.chromium.org/p/chromium/issues/detail?id=835455

https://caniuse.com/css-display-contents says it's fully supported in Safari since 13.1...

I remember thinking this would be so great to have until Subgrid arrives, but I could not use it due to accessibility issues in Chrome and Safari.

While I was developing plain stuff with CSS Grid today, I found myself at a typical problem that would have been solved easily with Subgrid... or "display: contents;"

So I crossed my fingers and checked https://caniuse.com/css-display-contents once again - and woah - it's now pretty much fully supported!?

It was just fixed in Chrome, but what happened to Safari? Did you guys backport a fix to the older versions, that I vaguely remember had issues with it?

So I checked the linked article again on caniuse, the one with the "severe implementation bug" that linked to the issues in Chrome and Safari, to see if the linked issues there had actually been solved.

But it seems not, unless I'm missing something?

I'm afraid that many people will use it now, as I was about to, causing issues for those in need of this being supported. And, based on a quick search on "accessibility browser usage", a fair amount of them use Safari - especially on mobile.

Any update on this? Or can I upvote it? Display:contents is also a great feature to combine with CSS grid on tables, but without the accessible roles, it defeats the purpose.

I'm also having issues with grid and accessibility related to this issue. Would love to see a fix implemented.

[Shannon Moeller]

I would also love to be able to use `display: contents` without negatively impacting accessibility, per the specification: https://drafts.csswg.org/css-display/#valdef-display-contents

I would also love to be able to use `display: contents` without negatively impacting accessibility.

[James Craig]

Work on this is progressing related to bug 237834. Forward duping the WebKit tracker.

*** This bug has been marked as a duplicate of bug 237834 ***

[James Craig]

Linked bug only covers a portion. Reopening this bug.

[Sam Sneddon [:gsnedders]]

(In reply to James Craig from comment #12)
> Linked bug only covers a portion. Reopening this bug.

It's unclear to me what portion wasn't covered? Per its title, bug 237834 included display: contents elements in the AX tree, which sounds identical to what this bug is about?

[James Craig]

Checking. That old comment may be superseded in recent builds.

[James Craig]

Tyler confirmed majority is resolved. Other edge cases can be tracked individually. Thanks for following up.

[Tyler Wilcock]

(In reply to James Craig from comment #15)
> Tyler confirmed majority is resolved. Other edge cases can be tracked
> individually. Thanks for following up.

One known issue we are tracking:

https://bugs.webkit.org/show_bug.cgi?id=239479