Bug 185679 - AX: Element not exposed to accessibility tree when it is set to display: contents
Summary: AX: Element not exposed to accessibility tree when it is set to display: con...
Alias: None
Product: WebKit
Classification: Unclassified
Component: Accessibility (show other bugs)
Version: Safari 11
Hardware: All All
: P2 Normal
Assignee: Nobody
Keywords: BrowserCompat, InRadar
: 191154 (view as bug list)
Depends on:
Blocks: 188643
  Show dependency treegraph
Reported: 2018-05-16 07:22 PDT by Hidde
Modified: 2022-03-15 17:52 PDT (History)
22 users (show)

See Also:

test case (678 bytes, text/html)
2018-11-04 23:08 PST, James Craig
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Hidde 2018-05-16 07:22:56 PDT
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).
Comment 1 Radar WebKit Bug Importer 2018-05-16 07:23:19 PDT
Comment 3 Simon Pieters (:zcorpan) 2018-09-02 01:38:16 PDT
Test for display: contents on the legend (the legend is not used for the fieldset's accessible name).

Comment 4 James Craig 2018-11-01 09:41:17 PDT
*** Bug 191154 has been marked as a duplicate of this bug. ***
Comment 5 James Craig 2018-11-04 23:08:34 PST
Created attachment 353831 [details]
test case
Comment 6 Ole Strøm 2021-03-22 15:12:23 PDT
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.
Comment 7 hey 2021-08-03 08:56:43 PDT
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.
Comment 8 stewartm 2021-08-20 18:50:54 PDT
I'm also having issues with grid and accessibility related to this issue. Would love to see a fix implemented.
Comment 9 Shannon Moeller 2021-10-22 21:17:40 PDT
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
Comment 10 joss 2022-01-13 15:30:08 PST
I would also love to be able to use `display: contents` without negatively impacting accessibility.
Comment 11 James Craig 2022-03-15 16:27:41 PDT
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 ***
Comment 12 James Craig 2022-03-15 17:52:35 PDT
Linked bug only covers a portion. Reopening this bug.