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]