Bug 296989 – madisoncity.k12.al.us: Search button is not working (Adds Quirks needsFormControlToBeMouseFocusable)

• Status: NEW
• Component: Forms

[Karl Dubost]

This was initially reported on https://github.com/webcompat/web-bugs/issues/151961

1. Go to https://www.madisoncity.k12.al.us/Page/11
2. Click on the magnifier at the top right of the menu bar.

Results:
nothing

Expected:
a search form appears like in Firefox and Chrome.

[Radar WebKit Bug Importer]

<rdar://problem/157639717>

[Karl Dubost]

```
<div id="gb-search" class="ui-clear" data-search-icon-color="White">
                      <button id="gb-search-btn" class="cs-btn-reset" aria-controls="gb-search-form" aria-label="Search" aria-expanded="false"><span class="cs-ally-hidden">Search</span></button>
                      <div id="gb-search-form-menu" aria-hidden="true">
                          <form id="gb-search-form">
                              <div class="search-input-icon drt-aspire-icon-font"></div>
                              <label for="gb-search-input" class="cs-ally-hidden">Search...</label>		
                              <input tabindex="-1" type="text" id="gb-search-input" class="gb-search-input" value="Search...">
                              <button tabindex="-1" type="submit" id="gb-submit-search" class="cs-btn-reset" aria-label="submit search"><span>Go</span></button>
                          </form>
                      </div>
                  </div>
```

There are two events defined: focus and hover and they both call:



```
$("#gb-search #gb-search-btn").on("hover focus", function(e) {
            	//if(_this.AllyClick(e)) {
                	e.preventDefault();
                	if(!$("#gb-search-form-menu").hasClass("open")){
                    	$("#gb-search-input, #gb-submit-search").attr("tabindex","0");
                    	$("#gb-search-form-menu").addClass("open").attr("aria-hidden","false");
                        $(this).addClass("open").attr("aria-expanded","true");
                        	$("#gb-search-form #gb-search-input").focus();
                    } else {
                    	$("#gb-search-input, #gb-submit-search").attr("tabindex","-1");
                    	$("#gb-search-form-menu").removeClass("open").attr("aria-hidden","true");
                        $(this).removeClass("open").focus().attr("aria-expanded","false");
                    }
                //}
            });
        },
```

not sure why AllyClick has been put in comment. 

```
        "AllyClick": function(event) {
            if(event.type == "click") {
                return true;
            } else if(event.type == "keydown") {
                if(event.keyCode == this.KeyCodes.space || event.keyCode == this.KeyCodes.enter) {
                    return true;
                }
            } else {
                return false;
            }
        },
```

[Karl Dubost]

The website expects button to be focusable. 
While this is expected by the web platform, it is for now a choice for macOS platform convention to not follow this behavior. 

See previously:
Bug 22261
Bug 193478

[Karl Dubost]

To note that if the site was just doing that 

```
            $("#gb-search #gb-search-btn").on("focus hover click", function(e) {
            	//if(_this.AllyClick(e)) {
                	e.preventDefault();
```

it would work.

[Karl Dubost]

So it's not enough to add

https://searchfox.org/wubkat/rev/1880bd04e75e45ec48e76e3c61706f9514ab3d99/Source/WebCore/page/Quirks.cpp#174-183
```cpp
// ceac.state.gov https://bugs.webkit.org/show_bug.cgi?id=193478
// weather.com rdar://139689157
bool Quirks::needsFormControlToBeMouseFocusable() const
{
#if PLATFORM(MAC)
    return needsQuirks() && m_quirksData.needsFormControlToBeMouseFocusableQuirk;
#else
    return false;
#endif // PLATFORM(MAC)
}
```

to solve the issue

[Karl Dubost]

I was wondering if it was because the code has                     	
    $("#gb-search-input, #gb-submit-search").attr("tabindex","0");

and this part 

https://searchfox.org/wubkat/rev/1880bd04e75e45ec48e76e3c61706f9514ab3d99/Source/WebCore/html/HTMLFormControlElement.cpp#236-246
```cpp
bool HTMLFormControlElement::isMouseFocusable() const
{
#if (PLATFORM(GTK) || PLATFORM(WPE))
    return HTMLElement::isMouseFocusable();
#else
    // FIXME: We should remove the quirk once <rdar://problem/47334655> is fixed.
    if (!!tabIndexSetExplicitly() || document().quirks().needsFormControlToBeMouseFocusable())
        return HTMLElement::isMouseFocusable();
    return false;
#endif
}
```

but we are not reaching the code inside the if, so maybe there is something broken in the code.

[Karl Dubost]

Oh… 
is it because 
   https://searchfox.org/wubkat/source/Source/WebCore/html/HTMLButtonElement.cpp 
has isMouseFocusable at all.

[Karl Dubost]

Ah no we correctly enter 
bool HTMLFormControlElement::isMouseFocusable() const {}
we do not pass the `if` for https://www.madisoncity.k12.al.us/Page/11
maybe my domain check is not correct.

[Karl Dubost]

Pull request: https://github.com/WebKit/WebKit/pull/49323