Bug 1634619 - Back out focusable state changes on overflow events. r=Jamie

Differential Revision: https://phabricator.services.mozilla.com/D74487
This commit is contained in:
Eitan Isaacson 2020-05-11 00:21:21 +00:00
Родитель 8ab514b1dc
Коммит 11ab196725
2 изменённых файлов: 1 добавлений и 80 удалений

Просмотреть файл

@ -145,7 +145,7 @@ const char* const kEventTypes[] = {
// HTMLInputElement.cpp & radio.js)
"RadioStateChange", "popupshown", "popuphiding", "DOMMenuInactive",
"DOMMenuItemActive", "DOMMenuItemInactive", "DOMMenuBarActive",
"DOMMenuBarInactive", "scroll", "overflow", "underflow"};
"DOMMenuBarInactive", "scroll"};
nsresult RootAccessible::AddEventListeners() {
// EventTarget interface allows to register event listeners to
@ -446,19 +446,6 @@ void RootAccessible::ProcessDOMEvent(Event* aDOMEvent, nsINode* aTarget) {
accessible);
}
#endif
else if (eventType.EqualsLiteral("overflow") ||
eventType.EqualsLiteral("underflow")) {
// An overflow or underflow may mean the element's focusable state has
// changed.
if (accessible->IsContent() && !accessible->GetContent()->IsFocusable()) {
// If the element is not focusable for other DOM reasons (input, tabindex,
// etc.), dispatch a focusable state change event.
RefPtr<AccEvent> event = new AccStateChangeEvent(
accessible, states::FOCUSABLE,
(accessible->NativeInteractiveState() & states::FOCUSABLE) != 0);
targetDocument->FireDelayedEvent(event);
}
}
}
////////////////////////////////////////////////////////////////////////////////

Просмотреть файл

@ -66,62 +66,6 @@
getNode("div").removeAttribute("tabindex");
await p;
// When an element that has overflow content gets set to
// "auto", scrollbars appear and the element should become focusable.
info("change to overflow:auto");
p = waitForEvent(...focusableStateChange("scrollable1", true));
getNode("scrollable1").style.overflow = "auto";
await p;
// If an overflow:auto element's children change to fit
// within its bounds, the scrollability goes away and the
// element becomes not focusable.
info("clamp height to parent");
p = waitForEvent(...focusableStateChange("scrollable1", false));
getNode("in-scrollable1").style.height = "100%";
await p;
// If an overflow:auto element's children become larger
// than its bounding box, it becomes scrollable and focusable
// again. If the element is contenteditable, it is already focusable,
// so we don't expect an event for that.
info("unclamp height from parent");
p = waitForEvents({
expected: [focusableStateChange("scrollable1", true)],
unexpected: [focusableStateChange("scrollable2")]
});
getNode("in-scrollable2").style.height = "200%";
getNode("in-scrollable1").style.height = "200%";
await p;
// overflow:hidden disables scrollability and focusability.
// An overflowing textarea should not fire an event since it
// is always focusable.
info("change to overflow:hidden");
p = waitForEvents({
expected: [focusableStateChange("scrollable1", false)],
unexpected: [focusableStateChange("textarea")]
});
getNode("textarea").value = "one\ntwo\nthree\nfour\nfive";
getNode("scrollable1").style.overflow = "hidden";
await p;
// contenteditable makes things focusable
p = waitForEvent(...focusableStateChange("scrollable1", true));
getNode("scrollable1").contentEditable = "true";
await p;
// A disabled textarea will file a focusable state change event.
// A disabled overflow:auto div won't.
info("change to overflow:hidden");
p = waitForEvents({
expected: [focusableStateChange("textarea", false)],
unexpected: [focusableStateChange("scrollable2")]
});
getNode("textarea").disabled = true;
getNode("scrollable2").setAttribute("disabled", "true");
await p;
p = waitForEvent(...focusableStateChange("link", false));
getNode("link").removeAttribute("href");
await p;
@ -146,16 +90,6 @@
<div id="div">Hello</div>
<div id="scrollable1" role="group" style="width: 50px; height: 50px; overflow: hidden;">
<div id="in-scrollable1" style="width: 100%; height: 200%;"></div>
</div>
<div id="scrollable2" role="group" style="width: 50px; height: 50px; overflow: auto;" contenteditable="true">
<div id="in-scrollable2" style="width: 100%; height: 100%;"></div>
</div>
<textarea id="textarea" rows="3" cols="30"></textarea>
<a id="link" href="#">A link</a>
</body>