<button type="submit"> not working in FireFox

Question

This is a really odd bug that I just cannot seem to figure out. I'm trying to copy the expandable search from http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/

I pretty much have it finished up except for one annoying bug. It does absolutely nothing in FireFox. In Chrome, IE and Edge when I click on the little search icon, the search expands out and I can type something and then submit it.

However, when I hover over the search icon in FireFox, absolutely nothing happens. My cursor doesn't even change to tell me it's clickable.

There is a ton of code to all of this and I don't have really any experience in Javascript, which is what I imagine is causing the problem.

It's also worth noting that I am integrating it with my wordpress site and wordpress search. And as I stated earlier, it works beautifully in all of the browsers I have tested except FireFox.

This is the HTML that I have included in my wordpress navigation menu:

<li id="sb-search" class="sb-search">
     <form name="search-form" role="search" method="get" id="searchform" class="searchform" action="/">
          <input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="s" id="s" />
          <button type="submit" form="searchform" formmethod="get" ><i class="fa fa-search"></i></button>
     </form>
</li>'

This is the javascript I have included in the header of my wordpress site:

<script>
    $( document ).ready(function() {
        new UISearch( document.getElementById( 'sb-search' ) );
    });
</script>

And here are the three javascript files that are associated with making it work:

classie.js - http://pastebin.com/Wk5nXfkV

modernizr.custom.js - http://pastebin.com/5A7NXWLV

uisearch.js - http://pastebin.com/bQc4XkEd

There is also a lot of CSS that goes along with styling it but I can't imagine that being the problem. But if anyone would like the CSS then just let me know and I'll update the post.

Answer 1

I was able to figure this out after spending 2 hours this morning scouring the internet for answers to this mysterious problem.

I came across this article.

I scrolled down to the bottom and what he says to do after the Update (07-April-2013) worked perfectly for me. I had to change a few of my styles but other than that it worked flawlessly.

Here is an excerpt of what worked for me:

As several commenters mentioned, my recommendation results in an empty element. I wasn’t too concerned about that at first, but as I thought about it more and more, the purist in me got a little bit upset. Yes, in an ideal world, you should be able to remove all JavaScript and CSS and the page still make sense. In this case, you’d be left with a button that has no descriptive text whatsoever. That turned my stomach and I went back to the drawing board to try and find a way to have text inside of the element without hiding it offscreen. After some tinkering, here’s what I came up with:

<style>
.btn-label {
font-size: 0;
height: 1px;
overflow: hidden;
display: block;
}
</style>

<button class="icon-envelope"><span class="btn-label">Email</span></button>

The idea is to have the descriptive text inside of the <button> element while placing the Font Awesome class on the <button> itself. This allows you to modify the inner <span> element separately from the <button>. The <span> is set to be practically invisible by using a font-size of 0, a height of one pixel (to make VoiceOver happy). The rest is used to ensure the <span> never grows any larger.

In all browsers and screenreaders mentioned in this post, the text “Email button” is announced using this pattern. The solution is something that makes the purist side of me very comfortable. You aren’t tempting fate by moving text offscreen yet the <button> element still has text inside of it. You don’t have to use ARIA to provide additional context for screen readers in this case.

--Source

So my new code is:

<li id="sb-search" class="sb-search">
     <form name="search-form" role="search" method="get" id="searchform" class="searchform" action="/">
          <input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="s" id="s" />
          <button type="submit" aria-label="Submit" class="fa fa-search"><span class="btn-label">Submit</span></button>
     </form>
</li>