使用.focus（）

Question

此处的目标是在搜索后关注查询结果。 这是因为我们希望我们的网站可以访问，并且屏幕阅读器会读取结果。

结果具有以下结构：

<div class="result-container">
    <p>
        <span class="selected-solution" tabindex="-1" aria-live="polite">
            Text to be read
        </span>
        <button type="button" title="Delete selected solution">
            <span class="icon icon-close" aria-hidden="true"></span>
            <span class="sr-only">Delete selected solution</span>
        </button>
    </p>
</div>

我想使用Jquery将焦点放在类“selected-solution”的范围内。 因为“结果容器”可以包含其他类型的结果（如果没有结果或内部错误），我使用通用解决方案：

$selector.find(':focusable').first().focus();

但是这个解决方案无法专注于我之前的跨度...... 如果我用div替换我的span，它可以正常工作，但这不是一个好的解决方案（它将按钮放在下一行）。

如果我在本地运行网站时尝试此命令，请选择我的范围。

你知道为什么不能专注于跨度吗？

感谢您的帮助！

修改

经过进一步测试后，似乎Jquery代码与span BUT 一起使用，当使用span时，关联的jasmine测试失败了.toBeFocused（）。

仍然很奇怪，但另一件事需要探索。

Answer 1

:focusable是一个 jQueryUI 选择器，（不是jQuery） - 确保包含jQueryUI。