Element not exposed to accessibility tree when it is set to display: contents
Reported by
hi...@hiddedevries.nl,
Apr 20 2018
|
|||||||||
Issue descriptionChrome Version : 66.0.3359.117 (Official Build) (64-bit) OS Version: OS X 10.12 URLs (if applicable) : https://codepen.io/hidde/pen/gzbMeL Other browsers tested: Add OK or FAIL after other browsers where you have tested this issue: Safari: FAIL Firefox: FAIL (bug here: https://bugzilla.mozilla.org/show_bug.cgi?id=1455357) IE/Edge: n/a (does not support display:contents) What steps will reproduce the problem? 1. In a grid container, add on grid item that is a <ul> 2. Verify that is has an accessible role of 'list' 3. Set the item to 'display: contents' with CSS What is the expected result? The element still has its accessible role of 'list' What happens instead of that? The element is no longer exposed to the accessibility tree Please provide any additional information below. Attach a screenshot if possible. Background: More meaningful/semantic markup improves accessibility as AT can better understand what stuff is on the page. In CSS Grid Layout, items can be placed on a grid when they are direct children. That is an incentive for authors to make flatter/less meaningful markup. display:contents solves this and lets users effectively place 'grand children' on the grid.
,
Apr 23 2018
hidde@ Thanks for the issue. Tested this issue on Mac OS 10.13.3 on the reported version 66.0.3359.117 and the latest canary 68.0.3403.0 by following the below steps. 1. Launched Chrome and navigated to the given codepen link. 2. Opened Devtools -> Elements -> Accessibility and can see the list displayed there. Attached is the screen shot for reference. Request you to check and confirm of anything is missed from our end in triaging the issue. Also request you to provide a screen cast of the steps followed which will be helpful in further triaging of the issue. Thanks..
,
Apr 23 2018
Thanks for triaging! In the screenshot, the list with ingredients is selected, that still has its accessible role, because it is not part of the grid. The problem is in the list of sponsors, the second UL on the page (<ul class="sponsors"/>), which is set to display: contents, that does not have its accessible role.
,
Apr 23 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 23 2018
In the attached screenshot, the element that has display: contents set to it, it shown as ‘Accessibility node not exposed’. When we remove 'display: contents' from it, this changes and it does get an accessible role.
,
Apr 23 2018
Clearing the Mac bit as it doesn't look Mac specific. Redirecting to Blink Accessibility.
,
Apr 25 2018
Able to reproduce the issue on chrome reported version 66.0.3359.117(as per screenshot provided in comment#5) using Mac 10.12.6, Windows 10 and Ubuntu 14.04 and same issue is seen on latest chrome 68.0.3405.0. As the issue is seen from introduction of Accessibility from M-64, hence considering this issue as non regression and marking it as untriaged. Thanks!
,
May 1 2018
Any updates on this? I’d like to add two use cases: * use of a <ul> element to group list items in Grid Layout (as described here: https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents) * use of <nav> element in a Grid Layout (as described here: https://twitter.com/AmeliasBrain/status/991026364512813056) Basically it affects any site that uses HTML elements with specific roles and wants to lay out that element’s children on a Grid. Accessibility experts start recommending to not use display:contents at all, that would be sad as it is a great future. Many thanks for looking at this!
,
May 8 2018
Agreed it would be a shame if people couldn't use display: contents! I started having a poke at this - no working solution yet but I'm interested in solving this.
,
May 8 2018
@Alice: That's awesome, thanks for the update!
,
May 21 2018
FWIW, Firefox has fixed this issue in release 62.0a1: https://bugzilla.mozilla.org/show_bug.cgi?id=1455357 Also note that adding ARIA roles does not put the node back into the accessibility tree. The attached image shows the accessibility tree with a role set. Finally, I have more examples here: http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html#Bugs
,
Aug 22
Is there any news on this issue? Fwiw, this problem is now listed as an implementation bug on Can I Use: https://caniuse.com/#feat=css-display-contents
,
Sep 2
,
Sep 2
Tests for fieldset/legend in https://github.com/web-platform-tests/wpt/pull/12691
,
Sep 12
This is in progress. This is a non-trivial change as we have previously walked the layout tree to build the accessibility tree, so it requires a significant shift.
,
Sep 26
+tabatkins This is even more complicated than I realised, actually. Since the element won't have a CSS box model object (layout object) associated with it, it has no meaningful dimensions, meaning we can't associate any dimensions with the accessibility node. This may be possible to work around for landmark roles, but for widget roles we run into added issues (apart from being unable to touch explore to the widget) - the element will also be unfocusable more or less by design. There is a discussion of the focusability issue here https://github.com/w3c/csswg-drafts/issues/2632 but it seems unlikely that there will be any spec changes such that these elements will be required to be focusable. I'm honestly not sure what the right solution is here. Firefox worked around the bounding box issue by marking the node as "offscreen", which I imagine produces a workable if sub-optimal experience, but I don't know that there is a reasonable solution to the focusability issue.
,
Oct 4
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/e9046c082c74934f5aa00122b4288caed90e76b1 commit e9046c082c74934f5aa00122b4288caed90e76b1 Author: Alice Boxhall <aboxhall@chromium.org> Date: Thu Oct 04 09:04:32 2018 Fix issues with deferred ChildrenChanged calls Bug: 835455 Change-Id: Ifdcbf93252ee64438cc43adaf89ac17b2759a99f Reviewed-on: https://chromium-review.googlesource.com/c/1260523 Commit-Queue: Alice Boxhall <aboxhall@chromium.org> Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org> Cr-Commit-Position: refs/heads/master@{#596551} [modify] https://crrev.com/e9046c082c74934f5aa00122b4288caed90e76b1/chrome/browser/resources/chromeos/chromevox/cvox2/background/background_test.extjs [modify] https://crrev.com/e9046c082c74934f5aa00122b4288caed90e76b1/third_party/blink/renderer/modules/accessibility/ax_object_cache_impl.cc [modify] https://crrev.com/e9046c082c74934f5aa00122b4288caed90e76b1/third_party/blink/renderer/modules/accessibility/ax_object_cache_impl.h
,
Oct 22
FYI that the Firefox fix did not address display: contents globally, only on a limited basis. Buttons are still affected. New issue filed there: https://bugzilla.mozilla.org/show_bug.cgi?id=1500958 Mentioning it here because the Firefox team appeared to deal only with the list example in the original report. I'd like this fix to avoid being limited in the same way.
,
Nov 12
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/94eba324eda18982e67915d39b37aa87f29e025a commit 94eba324eda18982e67915d39b37aa87f29e025a Author: Alice Boxhall <aboxhall@chromium.org> Date: Mon Nov 12 03:27:45 2018 Process attribute changes in AXObjectCache after layout is clean. Processing attribute changes can cause AXObjects to get created, which can cause crashes if layout is not clean. Also, check that nodes do not need distribution updates before processing attribute changes. Bug: 835455 Change-Id: Ibf7a3d0e2d7befe53e43096e6d0414a5623e8885 Reviewed-on: https://chromium-review.googlesource.com/c/1324530 Commit-Queue: Alice Boxhall <aboxhall@chromium.org> Reviewed-by: Nektarios Paisios <nektar@chromium.org> Reviewed-by: Keishi Hattori <keishi@chromium.org> Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org> Cr-Commit-Position: refs/heads/master@{#607134} [modify] https://crrev.com/94eba324eda18982e67915d39b37aa87f29e025a/third_party/blink/renderer/core/dom/qualified_name.h [modify] https://crrev.com/94eba324eda18982e67915d39b37aa87f29e025a/third_party/blink/renderer/modules/accessibility/ax_object_cache_impl.cc [modify] https://crrev.com/94eba324eda18982e67915d39b37aa87f29e025a/third_party/blink/renderer/modules/accessibility/ax_object_cache_impl.h
,
Nov 12
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/e7316d0c2c1a3ea146197778d926502c9646e4bf commit e7316d0c2c1a3ea146197778d926502c9646e4bf Author: Alice Boxhall <aboxhall@chromium.org> Date: Mon Nov 12 05:43:59 2018 Prefer walking the LayoutTreeBuilder tree when building the Accessibility tree. This is in preparation for cl/1242572, which will include elements with a display: contents style in the Accessibility tree. Since display: contents means an element will not get a LayoutObject, walking the Layout Tree means we miss some elements. Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=835455 Change-Id: I63c7da185da25f4661bfdeacb5a29ce79c2a3701 Reviewed-on: https://chromium-review.googlesource.com/c/1206050 Commit-Queue: Alice Boxhall <aboxhall@chromium.org> Reviewed-by: Nektarios Paisios <nektar@chromium.org> Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org> Cr-Commit-Position: refs/heads/master@{#607152} [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/content/shell/test_runner/accessibility_controller.cc [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/content/test/data/accessibility/aria/aria-owns-expected-blink.txt [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/content/test/data/accessibility/aria/aria-owns-expected-mac.txt [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/content/test/data/accessibility/html/modal-dialog-opened-expected-android.txt [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/content/test/data/accessibility/html/modal-dialog-opened-expected-auralinux.txt [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/content/test/data/accessibility/html/modal-dialog-opened-expected-blink.txt [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/content/test/data/accessibility/html/modal-dialog-opened-expected-mac.txt [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/content/test/data/accessibility/html/modal-dialog-opened-expected-win.txt [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/content/test/data/accessibility/html/modal-dialog-stack-expected-android.txt [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/content/test/data/accessibility/html/modal-dialog-stack-expected-auralinux.txt [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/content/test/data/accessibility/html/modal-dialog-stack-expected-blink.txt [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/content/test/data/accessibility/html/modal-dialog-stack-expected-mac.txt [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/content/test/data/accessibility/html/modal-dialog-stack-expected-win.txt [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/third_party/WebKit/LayoutTests/accessibility/aria-hidden-updates-alldescendants.html [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/third_party/WebKit/LayoutTests/accessibility/editable-anonymous-block.html [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/third_party/WebKit/LayoutTests/accessibility/title-ui-element-correctness-expected.txt [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/third_party/WebKit/LayoutTests/accessibility/title-ui-element-correctness.html [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/third_party/WebKit/LayoutTests/inspector-protocol/accessibility/accessibility-ignoredNodes-expected.txt [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/third_party/blink/renderer/modules/accessibility/ax_layout_object.cc [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/third_party/blink/renderer/modules/accessibility/ax_layout_object.h [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/third_party/blink/renderer/modules/accessibility/ax_list_box_option.cc [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/third_party/blink/renderer/modules/accessibility/ax_menu_list.cc [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/third_party/blink/renderer/modules/accessibility/ax_node_object.cc [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/third_party/blink/renderer/modules/accessibility/ax_node_object.h [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/third_party/blink/renderer/modules/accessibility/ax_object.cc [modify] https://crrev.com/e7316d0c2c1a3ea146197778d926502c9646e4bf/third_party/blink/renderer/modules/accessibility/ax_object_cache_impl.cc
,
Nov 20
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/31ad4379452829c09f2cc4f79bdf8e9897bc30dc commit 31ad4379452829c09f2cc4f79bdf8e9897bc30dc Author: Alice Boxhall <aboxhall@chromium.org> Date: Tue Nov 20 00:05:01 2018 Include display:contents elements in accessibility tree Bug: 835455 Change-Id: If3f4eacb975a8ee50a66bb787a55d257633cfb1e Reviewed-on: https://chromium-review.googlesource.com/c/1242572 Commit-Queue: Alice Boxhall <aboxhall@chromium.org> Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org> Cr-Commit-Position: refs/heads/master@{#609515} [modify] https://crrev.com/31ad4379452829c09f2cc4f79bdf8e9897bc30dc/content/test/data/accessibility/css/inline-position-relative-expected-blink.txt [modify] https://crrev.com/31ad4379452829c09f2cc4f79bdf8e9897bc30dc/content/test/data/accessibility/html/input-checkbox-label-expected-blink.txt [modify] https://crrev.com/31ad4379452829c09f2cc4f79bdf8e9897bc30dc/content/test/data/accessibility/html/input-checkbox-label-expected-mac.txt [add] https://crrev.com/31ad4379452829c09f2cc4f79bdf8e9897bc30dc/third_party/WebKit/LayoutTests/accessibility/display-contents.html [modify] https://crrev.com/31ad4379452829c09f2cc4f79bdf8e9897bc30dc/third_party/blink/renderer/modules/accessibility/ax_layout_object.cc [modify] https://crrev.com/31ad4379452829c09f2cc4f79bdf8e9897bc30dc/third_party/blink/renderer/modules/accessibility/ax_node_object.cc [modify] https://crrev.com/31ad4379452829c09f2cc4f79bdf8e9897bc30dc/third_party/blink/renderer/modules/accessibility/ax_node_object.h [modify] https://crrev.com/31ad4379452829c09f2cc4f79bdf8e9897bc30dc/third_party/blink/renderer/modules/accessibility/ax_object_cache_impl.cc
,
Nov 27
Issue 820660 has been merged into this issue. |
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by susan.boorgula@chromium.org
, Apr 22 2018