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).
https://github.com/web-platform-tests/wpt/pull/12691 also has a test for this for fieldset:
Test for display: contents on the legend (the legend is not used for the fieldset's accessible name).
*** Bug 191154 has been marked as a duplicate of this bug. ***
Created attachment 353831 [details]
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.
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.
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 ***
Linked bug only covers a portion. Reopening this bug.