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: InRadar
Depends on:
Blocks:
 
Reported: 2018-05-16 07:22 PDT by Hidde
Modified: 2018-05-16 07:23 PDT (History)
2 users (show)

See Also:


Attachments

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>