185679 2018-05-16 07:22:56 -0700 AX: Element not exposed to accessibility tree when it is set to display: contents 2024-09-24 16:11:40 -0700 1 1 1 Unclassified WebKit Accessibility Safari 11 All All RESOLVED FIXED BrowserCompat, InRadar P2 Normal --- 188643 1 hidde webkit-unassigned 709922234 benoit.rouleau caleb code hey hidde jcraig joss kyle.bavender me me m.goleb+bugzilla miriam nate.whittaker olestr simon.fraser stewartm tobi twilco.o tyler_w webkit-bug-importer zcorpan oldest_to_newest 1424312 0 hidde 2018-05-16 07:22:56 -0700 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). 1424313 1 webkit-bug-importer 2018-05-16 07:23:19 -0700 <rdar://problem/40293047> 1456024 2 zcorpan 2018-09-02 01:27:01 -0700 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 1456026 3 zcorpan 2018-09-02 01:38:16 -0700 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 1474134 4 jcraig 2018-11-01 09:41:17 -0700 *** Bug 191154 has been marked as a duplicate of this bug. *** 1474964 5 353831 jcraig 2018-11-04 23:08:34 -0800 Created attachment 353831 test case 1742509 6 olestr 2021-03-22 15:12:23 -0700 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. 1781623 7 hey 2021-08-03 08:56:43 -0700 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. 1786077 8 stewartm 2021-08-20 18:50:54 -0700 I'm also having issues with grid and accessibility related to this issue. Would love to see a fix implemented. 1808031 9 me 2021-10-22 21:17:40 -0700 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 1830749 10 joss 2022-01-13 15:30:08 -0800 I would also love to be able to use `display: contents` without negatively impacting accessibility. 1851570 11 jcraig 2022-03-15 16:27:41 -0700 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 *** 1851600 12 jcraig 2022-03-15 17:52:35 -0700 Linked bug only covers a portion. Reopening this bug. 1894859 13 gsnedders 2022-08-30 10:06:09 -0700 (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? 1894869 14 jcraig 2022-08-30 10:35:43 -0700 Checking. That old comment may be superseded in recent builds. 1894876 15 jcraig 2022-08-30 11:05:37 -0700 Tyler confirmed majority is resolved. Other edge cases can be tracked individually. Thanks for following up. 1898330 16 tyler_w 2022-09-13 13:51:55 -0700 (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 353831 2018-11-04 23:08:34 -0800 2018-11-04 23:08:34 -0800 test case display_contents.html text/html 678 jcraig PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KCTx0aXRsZT5kaXNwbGF5OiBjb250ZW50czs8 L3RpdGxlPgo8L2hlYWQ+Cjxib2R5PgoKPHA+Q29udGVudCBiZWZvcmUgbWFpbi48L3A+Cgo8bWFp bj4KCjxoMT5ObyBzdHlsZSBjaGFuZ2VzPC9oMT4KPGRpdiByb2xlPSJ0b29sYmFyIj4KCTxkaXY+ CgkJPGJ1dHRvbj5Gb288L2J1dHRvbj4KCTwvZGl2Pgo8L2Rpdj4KCjxoMT5kaXNwbGF5OiBjb250 ZW50czsgb24gdGhlIHRvb2xiYXI8L2gxPgo8ZGl2IHJvbGU9InRvb2xiYXIiIHN0eWxlPSJkaXNw bGF5OiBjb250ZW50czsiPgoJPGRpdj4KCQk8YnV0dG9uPkZvbzwvYnV0dG9uPgoJPC9kaXY+Cjwv ZGl2PgoKPGgxPmRpc3BsYXk6IGNvbnRlbnRzOyBvbiB0aGUgZ2VuZXJpYyBkaXY8L2gxPgo8ZGl2 IHJvbGU9InRvb2xiYXIiPgoJPGRpdiBzdHlsZT0iZGlzcGxheTogY29udGVudHM7Ij4KCQk8YnV0 dG9uPkZvbzwvYnV0dG9uPgoJPC9kaXY+CjwvZGl2PgoKPGgxPmRpc3BsYXk6IGNvbnRlbnRzOyBv biB0aGUgYnV0dG9uPC9oMT4KPGRpdiByb2xlPSJ0b29sYmFyIj4KCTxkaXY+CgkJPGJ1dHRvbiBz dHlsZT0iZGlzcGxheTogY29udGVudHM7Ij5Gb288L2J1dHRvbj4KCTwvZGl2Pgo8L2Rpdj4KCjwv bWFpbj4KCjxwPkNvbnRlbnQgYWZ0ZXIgbWFpbi48L3A+CgoKPC9ib2R5Pgo8L2h0bWw+