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...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Accessibility (show other bugs)
Version: Safari 11
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
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: 2021-04-28 11:15 PDT (History)
11 users (show)

See Also:


Attachments
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
<rdar://problem/40293047>
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).

https://github.com/web-platform-tests/wpt/blob/8e12c9149bcc4a2122d5a3a699ea2abc5c90c4e6/html/semantics/forms/the-fieldset-element/accessibility/legend-display-contents-manual.html
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.