Changeset 285791 in webkit


Ignore:
Timestamp:
Nov 14, 2021 10:47:32 AM (8 months ago)
Author:
ntim@apple.com
Message:

Modal dialogs should make the root element unfocusable
​https://bugs.webkit.org/show_bug.cgi?id=233099

Reviewed by Simon Fraser.

From ​https://html.spec.whatwg.org/multipage/interaction.html#inert,

A Document document is blocked by a modal dialog subject if subject is
the topmost dialog element in document's top layer. While document is
so blocked, every node that is connected to document, with the
exception of the subject element and its shadow-including descendants,
must be marked inert.

RenderStyle::effectiveInert() already matches this definition, Node::deprecatedIsInert() does not.

Main reason the removed check was there is to prevent the whole document from being inert to hit-testing, but with the RenderStyle
approach, we instead override effectiveInert to false for the modal dialog. Removing this check for focus is absolutely fine
however, since focusability isn't inherited (Node::deprecatedIsInert is only used for focus).

Tests added by this Chromium WPT: ​https://github.com/web-platform-tests/wpt/commit/0457111e7109ec3d9e575aa421b96d8c36ce2ae8

LayoutTests/imported/w3c:

  • web-platform-tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable-expected.txt:
  • web-platform-tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html:

Source/WebCore:

  • dom/Node.cpp:

(WebCore::Node::deprecatedIsInert const):

Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r285745 r285791  
     12021-11-14  Tim Nguyen  <ntim@apple.com>
     2
     3        Modal dialogs should make the root element unfocusable
     4        https://bugs.webkit.org/show_bug.cgi?id=233099
     5
     6        Reviewed by Simon Fraser.
     7
     8        From https://html.spec.whatwg.org/multipage/interaction.html#inert,
     9
     10        > A Document document is blocked by a modal dialog subject if subject is
     11        > the topmost dialog element in document's top layer. While document is
     12        > so blocked, every node that is connected to document, with the
     13        > exception of the subject element and its shadow-including descendants,
     14        > must be marked inert.
     15
     16        RenderStyle::effectiveInert() already matches this definition, Node::deprecatedIsInert() does not.
     17
     18        Main reason the removed check was there is to prevent the whole document from being inert to hit-testing, but with the RenderStyle
     19        approach, we instead override effectiveInert to false for the modal dialog. Removing this check for focus is absolutely fine
     20        however, since focusability isn't inherited (Node::deprecatedIsInert is only used for focus).
     21
     22        Tests added by this Chromium WPT: https://github.com/web-platform-tests/wpt/commit/0457111e7109ec3d9e575aa421b96d8c36ce2ae8
     23
     24        * web-platform-tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable-expected.txt:
     25        * web-platform-tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html:
     26
    1272021-11-12  Ryan Haddad  <ryanhaddad@apple.com>
    228

  • trunk/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable-expected.txt

    r281309 r285791  
    1 I get focusI don't get focus.
    21
    32I'm editable
    … …  
    54 Link
    65
    7 PASS Test that inert nodes are not focusable.
     6PASS #html is not  focusable
     7PASS #body is not  focusable
     8PASS #top-dialog is  focusable
     9PASS #top-dialog-button is  focusable
     10PASS #bottom-dialog is not  focusable
     11PASS #bottom-dialog-button is not  focusable
     12PASS #container is not  focusable
     13PASS #text is not  focusable
     14PASS #datetime is not  focusable
     15PASS #color is not  focusable
     16PASS #select is not  focusable
     17PASS #optgroup is not  focusable
     18PASS #option is not  focusable
     19PASS #contenteditable-div is not  focusable
     20PASS #tabindex-span is not  focusable
    821

  • trunk/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/inert-node-is-unfocusable.html

    r249886 r285791  
    11<!DOCTYPE html>
    2 <html>
     2<html id="html" tabindex="1">
    33<head>
     4<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#blocked-by-a-modal-dialog">
     5<meta name="assert" content="Checks that, when opening modal dialogs, inert nodes are not focusable.">
    46<script src="/resources/testharness.js"></script>
    57<script src="/resources/testharnessreport.js"></script>
    … …  
    2729
    2830function testFocus(element, expectFocus) {
    29     var focusedElement = null;
    30     element.addEventListener('focus', function() { focusedElement = element; }, false);
    31     element.focus();
    32     var theElement = element;
    33     assert_equals(focusedElement === theElement, expectFocus, element.id);
     31    test(function() {
     32        var focusedElement = null;
     33        element.addEventListener('focus', function() { focusedElement = element; }, false);
     34        element.focus();
     35        var theElement = element;
     36        if (expectFocus) {
     37            assert_equals(focusedElement, theElement);
     38        } else {
     39            assert_not_equals(focusedElement, theElement);
     40        }
     41    }, `#${CSS.escape(element.id)} is ${expectFocus ? "" : "not "} focusable`);
    3442}
    3543
    … …  
    4250}
    4351
    44 test(function() {
    45     var bottomDialog = document.getElementById('bottom-dialog');
     52var bottomDialog = document.getElementById('bottom-dialog');
     53var topDialog = document.getElementById('top-dialog');
     54setup(function() {
    4655    bottomDialog.showModal();
     56    topDialog.showModal();
     57    add_completion_callback(function() {
     58        topDialog.close();
     59        bottomDialog.close();
     60    });
     61});
    4762
    48     var topDialog = document.getElementById('top-dialog');
    49     topDialog.showModal();
    50 
    51     testFocus(document.body, false);
    52     testTree(topDialog, true);
    53     testTree(bottomDialog, false);
    54     testTree(document.getElementById('container'), false);
    55 }, "Test that inert nodes are not focusable.");
     63testFocus(document.documentElement, false);
     64testFocus(document.body, false);
     65testTree(topDialog, true);
     66testTree(bottomDialog, false);
     67testTree(document.getElementById('container'), false);
    5668</script>
    5769</body>

  • trunk/Source/WebCore/ChangeLog

    r285790 r285791  
     12021-11-14  Tim Nguyen  <ntim@apple.com>
     2
     3        Modal dialogs should make the root element unfocusable
     4        https://bugs.webkit.org/show_bug.cgi?id=233099
     5
     6        Reviewed by Simon Fraser.
     7
     8        From https://html.spec.whatwg.org/multipage/interaction.html#inert,
     9
     10        > A Document document is blocked by a modal dialog subject if subject is
     11        > the topmost dialog element in document's top layer. While document is
     12        > so blocked, every node that is connected to document, with the
     13        > exception of the subject element and its shadow-including descendants,
     14        > must be marked inert.
     15
     16        RenderStyle::effectiveInert() already matches this definition, Node::deprecatedIsInert() does not.
     17
     18        Main reason the removed check was there is to prevent the whole document from being inert to hit-testing, but with the RenderStyle
     19        approach, we instead override effectiveInert to false for the modal dialog. Removing this check for focus is absolutely fine
     20        however, since focusability isn't inherited (Node::deprecatedIsInert is only used for focus).
     21
     22        Tests added by this Chromium WPT: https://github.com/web-platform-tests/wpt/commit/0457111e7109ec3d9e575aa421b96d8c36ce2ae8
     23
     24        * dom/Node.cpp:
     25        (WebCore::Node::deprecatedIsInert const):
     26
    1272021-11-14  Simon Fraser  <simon.fraser@apple.com>
    228

  • trunk/Source/WebCore/dom/Node.cpp

    r284366 r285791  
    26292629        return true;
    26302630
    2631     if (this != &document() && this != document().documentElement()) {
     2631    if (this != &document()) {
    26322632        Node* activeModalDialog = document().activeModalDialog();
    26332633        if (activeModalDialog && !activeModalDialog->containsIncludingShadowDOM(this))
Note: See TracChangeset for help on using the changeset viewer.