Javascript 可扩展粘性搜索表单

我正在从头开始构建一个可扩展的粘性搜索表单，它将在WordPress网站上使用。我使用的是Bootstrap、jQuery和字体。表单最初是在提交按钮（放大镜图标）完全可见的情况下收回的。单击按钮时，搜索字段将扩展到全宽。再次单击以提交表单

我对可访问性有几点担心。我将搜索字段包装在一个标签中，并将标签文本包装在一个仅为屏幕阅读器显示的span样式中，因此：

<label aria-hidden="true">
  <span class="sr-only">Search:</span>
  <input type="search" class="search-field form-control" placeholder="Search" value="" name="s">
</label>

按钮文本是“搜索”而不是“提交”，因为最初只有按钮应该是可见的（视觉上和屏幕阅读器都可以看到），所以它需要描述此表单的用途。我可以添加JavaScript，在搜索字段展开时将按钮文本更改为“提交”，但即使如此，我仍然担心标签和搜索占位符都会显示“搜索”。关于我可以将标签文本更改为哪些内容的任何建议都是描述性和非冗余的

处理用户点击扩展表单的JavaScript代码如下：

$(document).on("click", function (event) {
  if (0 === $(event.target).closest($form).length) {
    $sticky_search.removeClass("active");
    $label.attr("aria-hidden", "true");
  }
});

但这显然只适用于鼠标点击。我如何检测用户是否已从表单中移出？我最初尝试在表单元素上设置一个“blur”处理程序，但由于某些原因，它没有起作用。这就像“模糊”事件不像“点击”那样冒泡，但这不可能是正确的。（我在WordPress网站上对此进行了测试。可能是主题或插件中存在干扰。）我可以这样处理：

$search_field.add($form.find(".search-submit"))
    .on("blur", function() {
        $sticky_search.removeClass("active");
        $label.attr("aria-hidden", "true");
    })
    .on("focus", function() {
        $sticky_search.addClass("active");
        $label.attr("aria-hidden", "false");
    });

这样看起来并不“干净”，一个元素上的“活动”类被移除，失去焦点，而另一个元素上的“活动”类被重新添加，获得焦点，但如果这是唯一的方法

$search_field.add($form.find(".search-submit"))
    .on("blur", function() {
        $sticky_search.removeClass("active");
        $label.attr("aria-hidden", "true");
    })
    .on("focus", function() {
        $sticky_search.addClass("active");
        $label.attr("aria-hidden", "false");
    });