⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 248983 in webkit


Ignore:
Timestamp:
Aug 21, 2019, 5:34:48 PM (7 years ago)
Author:
rniwa@webkit.org
Message:

SVG element should become focusable when focus and key event listeners are added
​https://bugs.webkit.org/show_bug.cgi?id=200997

Reviewed by Said Abou-Hallawa.

Source/WebCore:

This patch removes the odd behavior WebKit (and Blink) browsers had to make SVG elements
with key or focus event listeners focusable. New behavior matches the behavior of Firefox
as well as the SVG 2.0 specification: ​https://www.w3.org/TR/SVG2/interact.html#Focus

Test: svg/custom/tabindex-order.html

  • svg/SVGAElement.cpp:

(WebCore::SVGAElement::supportsFocus const):

  • svg/SVGElement.cpp:

(WebCore::SVGElement::hasFocusEventListeners const): Deleted.
(WebCore::SVGElement::isMouseFocusable const): Deleted.

  • svg/SVGElement.h:
  • svg/SVGGraphicsElement.h:

LayoutTests:

Updated existing tests to set tabIndex where appropriate, and added SVG elements
without tabindex content attribute to tabindex-order.html so that the test would
skip those elements when sequentially focus navigating across them.

  • svg/custom/add-event-listener-shadow-tree-element.html:
  • svg/custom/resources/focus-event-handling-keyboard.js:
  • svg/custom/resources/focus-event-handling.js:
  • svg/custom/tabindex-order-expected.txt:
  • svg/custom/tabindex-order.html: Added test cases without tabindex.
Location:
trunk
Files:
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r248977 r248983  
     12019-08-21  Ryosuke Niwa  <rniwa@webkit.org>
     2
     3        SVG element should become focusable when focus and key event listeners are added
     4        https://bugs.webkit.org/show_bug.cgi?id=200997
     5
     6        Reviewed by Said Abou-Hallawa.
     7
     8        Updated existing tests to set tabIndex where appropriate, and added SVG elements
     9        without tabindex content attribute to tabindex-order.html so that the test would
     10        skip those elements when sequentially focus navigating across them.
     11
     12        * svg/custom/add-event-listener-shadow-tree-element.html:
     13        * svg/custom/resources/focus-event-handling-keyboard.js:
     14        * svg/custom/resources/focus-event-handling.js:
     15        * svg/custom/tabindex-order-expected.txt:
     16        * svg/custom/tabindex-order.html: Added test cases without tabindex.
     17
    1182019-08-21  Megan Gardner  <megan_gardner@apple.com>
    219

  • trunk/LayoutTests/svg/custom/add-event-listener-shadow-tree-element.html

    r247826 r248983  
    2020                testRunner.waitUntilDone();
    2121            }
     22            use1.tabIndex = 0;
    2223            use1.setAttribute("onfocusin", "eventhandler()");
    2324            use1.focus();

  • trunk/LayoutTests/svg/custom/resources/focus-event-handling-keyboard.js

    r124380 r248983  
    2323}
    2424
     25rectElement.tabIndex = 0;
    2526rectElement.setAttribute("onfocusin", "focusinHandler(evt)");
    2627rectElement.setAttribute("onfocusout", "focusoutHandler(evt)");
     28gElement.tabIndex = 0;
    2729gElement.setAttribute("onfocusin", "focusinHandler(evt)");
    2830gElement.setAttribute("onfocusout", "focusoutHandler(evt)");
     31useElement.tabIndex = 0;
    2932useElement.setAttribute("onfocusin", "focusinHandler(evt)");
    3033useElement.setAttribute("onfocusout", "focusoutHandler(evt)");
     34useElement2.tabIndex = 0;
    3135useElement2.setAttribute("onfocusin", "focusinHandler(evt)");
    3236useElement2.setAttribute("onfocusout", "focusoutHandler(evt)");
     37switchElement.tabIndex = 0;
    3338switchElement.setAttribute("onfocusin", "focusinHandler(evt)");
    3439switchElement.setAttribute("onfocusout", "focusoutHandler(evt)");
     40imgElement.tabIndex = 0;
    3541imgElement.setAttribute("onfocusin", "focusinHandler(evt)");
    3642imgElement.setAttribute("onfocusout", "focusoutHandler(evt)");

  • trunk/LayoutTests/svg/custom/resources/focus-event-handling.js

    r124380 r248983  
    2929}
    3030
     31rectElement.tabIndex = 0;
    3132rectElement.setAttribute("onfocusin", "focusinHandler(evt)");
    3233rectElement.setAttribute("onfocusout", "focusoutHandler(evt)");
     34gElement.tabIndex = 0;
    3335gElement.setAttribute("onfocusin", "focusinHandler(evt)");
    3436gElement.setAttribute("onfocusout", "focusoutHandler(evt)");
     37useElement.tabIndex = 0;
    3538useElement.setAttribute("onfocusin", "focusinHandler(evt)");
    3639useElement.setAttribute("onfocusout", "focusoutHandler(evt)");
     40useElement2.tabIndex = 0;
    3741useElement2.setAttribute("onfocusin", "focusinHandler(evt)");
    3842useElement2.setAttribute("onfocusout", "focusoutHandler(evt)");
     43switchElement.tabIndex = 0;
    3944switchElement.setAttribute("onfocusin", "focusinHandler(evt)");
    4045switchElement.setAttribute("onfocusout", "focusoutHandler(evt)");
     46imgElement.tabIndex = 0;
    4147imgElement.setAttribute("onfocusin", "focusinHandler(evt)");
    4248imgElement.setAttribute("onfocusout", "focusoutHandler(evt)");

  • trunk/LayoutTests/svg/custom/tabindex-order-expected.txt

    r168313 r248983  
    88id: b tabindex: 1 [object SVGGElement] is focused.
    99id: c tabindex: 1 [object SVGEllipseElement] is focused.
     10id: symbol tabindex: 1 [object SVGSymbolElement] is focused.
    1011id: d tabindex: 1 [object SVGPathElement] is focused.
    1112id: e tabindex: 3 [object SVGAElement] is focused.
    … …  
    2728id: e tabindex: 3 [object SVGAElement] is focused.
    2829id: d tabindex: 1 [object SVGPathElement] is focused.
     30id: symbol tabindex: 1 [object SVGSymbolElement] is focused.
    2931id: c tabindex: 1 [object SVGEllipseElement] is focused.
    3032id: b tabindex: 1 [object SVGGElement] is focused.

  • trunk/LayoutTests/svg/custom/tabindex-order.html

    r168313 r248983  
    6666    <svg>
    6767        <rect class="tab" tabindex="6" id="g" width="1" height="1"/>
     68        <rect class="tab" id="rect without tabindex is not focusable" width="1" height="1"/>
    6869        <circle class="tab" tabindex="1" id="a" r="1" cx="0" cy="0"/>
     70        <circle class="tab" id="circle without tabindex is not focusable" r="1" cx="0" cy="0"/>
    6971        <rect class="tab" tabindex="-5" id="not in tab order (negative tabindex)" width="1" height="1"/>
    7072        <g class="tab" tabindex="1" id="b"/>
     73        <g class="tab" id="g without tabindex is not focusable"/>
    7174        <svg class="tab" tabindex="0" id="i" width="1" height="1"/>
    7275        <text class="tab" tabindex="6" id="h" width="1" height="1"/>
     76        <text class="tab" id="text without tabindex is not focusable" width="1" height="1"/>
    7377        <ellipse class="tab" tabindex="1" id="c" rx="1" ry="1" cx="0" cy="0"/>
    74         <symbol class="tab" tabindex="1" id="symbol is not focusable" width="1" height="1"/>
     78        <ellipse class="tab" id="ellipse without tabindex is not focusable" rx="1" ry="1" cx="0" cy="0"/>
     79        <symbol class="tab" tabindex="1" id="symbol" width="1" height="1"/>
     80        <symbol class="tab" id="symbol without tabindex is not focusable" width="1" height="1"/>
    7581        <defs class="tab" tabindex="1" id="defs is not focusable"/>
    7682        <path class="tab" tabindex="1" id="d" d="M0,0"/>
     83        <path class="tab" id="path without tabindex is not focusable" d="M0,0"/>
    7784        <line class="tab" tabindex="0" id="j" x1="1" x2="1" y1="0" y2="0"/>
     85        <line class="tab" id="line without tabindex is not focusable" x1="1" x2="1" y1="0" y2="0"/>
    7886        <rect class="tab" tabindex="-1" id="not in tab order (negative tabindex)" width="1" height="1"/>
    7987        <polygon class="tab" tabindex="0" id="k" points="1,1 2,2"/>
     88        <polygon class="tab" id="polygon without tabindex is not focusable" points="1,1 2,2"/>
    8089        <polyline class="tab" tabindex="4" id="f" points="1,1 2,2"/>
     90        <polyline class="tab" id="polyline without tabindex is not focusable" points="1,1 2,2"/>
    8191        <a class="tab" tabindex="3" id="e"><rect width="1" height="1"/></a>
    8292    </svg>

  • trunk/Source/WebCore/ChangeLog

    r248978 r248983  
     12019-08-21  Ryosuke Niwa  <rniwa@webkit.org>
     2
     3        SVG element should become focusable when focus and key event listeners are added
     4        https://bugs.webkit.org/show_bug.cgi?id=200997
     5
     6        Reviewed by Said Abou-Hallawa.
     7
     8        This patch removes the odd behavior WebKit (and Blink) browsers had to make SVG elements
     9        with key or focus event listeners focusable. New behavior matches the behavior of Firefox
     10        as well as the SVG 2.0 specification: https://www.w3.org/TR/SVG2/interact.html#Focus
     11
     12        Test: svg/custom/tabindex-order.html
     13
     14        * svg/SVGAElement.cpp:
     15        (WebCore::SVGAElement::supportsFocus const):
     16        * svg/SVGElement.cpp:
     17        (WebCore::SVGElement::hasFocusEventListeners const): Deleted.
     18        (WebCore::SVGElement::isMouseFocusable const): Deleted.
     19        * svg/SVGElement.h:
     20        * svg/SVGGraphicsElement.h:
     21
    1222019-08-21  Jer Noble  <jer.noble@apple.com>
    223

  • trunk/Source/WebCore/svg/SVGAElement.cpp

    r248784 r248983  
    162162        return SVGGraphicsElement::supportsFocus();
    163163    // If not a link we should still be able to focus the element if it has a tabIndex.
    164     return isLink() || Element::supportsFocus();
     164    return isLink() || SVGGraphicsElement::supportsFocus();
    165165}
    166166

  • trunk/Source/WebCore/svg/SVGElement.cpp

    r248846 r248983  
    984984}
    985985
    986 bool SVGElement::hasFocusEventListeners() const
    987 {
    988     Element* eventTarget = const_cast<SVGElement*>(this);
    989     return eventTarget->hasEventListeners(eventNames().focusinEvent)
    990         || eventTarget->hasEventListeners(eventNames().focusoutEvent)
    991         || eventTarget->hasEventListeners(eventNames().focusEvent)
    992         || eventTarget->hasEventListeners(eventNames().blurEvent);
    993 }
    994 
    995 bool SVGElement::isMouseFocusable() const
    996 {
    997     if (!isFocusable())
    998         return false;
    999     Element* eventTarget = const_cast<SVGElement*>(this);
    1000     return hasFocusEventListeners()
    1001         || eventTarget->hasEventListeners(eventNames().keydownEvent)
    1002         || eventTarget->hasEventListeners(eventNames().keyupEvent)
    1003         || eventTarget->hasEventListeners(eventNames().keypressEvent);
    1004 }
    1005    
    1006986void SVGElement::accessKeyAction(bool sendMouseEvents)
    1007987{

  • trunk/Source/WebCore/svg/SVGElement.h

    r248784 r248983  
    117117    bool addEventListener(const AtomString& eventType, Ref<EventListener>&&, const AddEventListenerOptions&) override;
    118118    bool removeEventListener(const AtomString& eventType, EventListener&, const ListenerOptions&) override;
    119     bool hasFocusEventListeners() const;
    120119
    121120    bool hasTagName(const SVGQualifiedName& name) const { return hasLocalName(name.localName()); }
    … …  
    153152    SVGElement(const QualifiedName&, Document&);
    154153    virtual ~SVGElement();
    155 
    156     bool isMouseFocusable() const override;
    157     bool supportsFocus() const override { return false; }
    158154
    159155    bool rendererIsNeeded(const RenderStyle&) override;

  • trunk/Source/WebCore/svg/SVGGraphicsElement.h

    r246490 r248983  
    7171    SVGGraphicsElement(const QualifiedName&, Document&);
    7272
    73     bool supportsFocus() const override { return Element::supportsFocus() || hasFocusEventListeners(); }
    74 
    7573    void parseAttribute(const QualifiedName&, const AtomString&) override;
    7674    void svgAttributeChanged(const QualifiedName&) override;
Note: See TracChangeset for help on using the changeset viewer.