Javascript 使用时更新aria扩展属性的最佳方法：在

我正在处理一个组合框，在此过程中，我想使用新的

：focus in

伪选择器来管理显示与组合框关联的可扩展列表框

：专注于内在是一个很好的解决方案，效果很好。我遇到的唯一问题是如何保持列表框上的

aria expanded

属性保持更新。由于伪选择器，所有隐藏/显示功能都发生在浏览器中，因此我不确定Javascript中是否可以使用钩子来确定项目何时可见以更新该属性

有没有一个大家都知道的优雅的解决方案？我不想复制focus/blur的逻辑：focus in现在正在处理，只是为了更新这个属性。我还担心他们可能会失去同步。有没有办法用

：focus in

或类似的东西监视元素

.list{
显示：无；
}
.combobox容器：焦点位于.list中{
显示：块；
}

福

由于这个原因，由于许多屏幕阅读器用户仍在使用Internet Explorer的

JAWs

，这会立即使您的解决方案无法访问

此外，您还存在这样一个问题：虽然这是一个演示，但在现实世界中，自动完成列表将通过AJAX或经过过滤的预加载列表填充

这意味着，即使在组合框中没有键入任何内容（这不是预期的行为），在您聚焦

时，列表始终会显示出来

这是可以接受仅依赖JavaScript的少数情况之一（有一个回退，即表单仍然可以在没有JavaScript的情况下提交）

当您返回一些建议，然后使用显示和隐藏结果时，您可以使用JavaScript来切换

aria expanded=“true”

，而不是尝试使用

：聚焦在

中

下面的示例显示了实现这一点的CSS。

+

操作符是关键，它是选择父元素中下一个同级元素的关键

CSS:

.combobox容器div[aria expanded=“true”]+.list

对于下面的示例，我将其设置为，一旦在框中键入超过1个字符，它将

aria expanded

属性更改为

true

（如果输入为空，则再次返回）-这使它更像是一个“真实世界”的示例

旁注：您不需要在

中添加

tabindex

，预期的行为是直接将选项卡添加到第一个建议的项目，我在下面的示例中删除了该项

//忽略这一点，这是我对代码段的标准jQuery替换
if（typeof$==“undefined”）{！函数（b，c，d，e，f）{f=b['add'+e]
函数i（a，d，i）{for（d=（a&&a.nodeType？[a]：''+a===a？b.queryselectoral（a）：c），i=d.length；i--；c.unshift.call（this，d[i]）；}
$=函数（a）{return/^f/.test（typeof a）}/in/.test（b.readyState）}setTimeout（函数（）{$（a）；}，9）：a（）：新的i（a）}；$[d]=i[d]={on:function（a，b）{返回这个。每个（函数（c）{f？c['add e'+e]（a，b，false）：c.attachEvent（'on'+a，b）}），关闭：函数（a，b）{返回这个。每个（函数（c）{f？c）{detache+a，b）}（变量c=this，d=0，e=c.length；d=200&&this.status 0）{
$（'div[role=combobox]'）.attr（'aria-expanded'，true）；
返回；
}
$（'div[role=combobox]'）.attr（'aria-expanded'，false）；
返回；
})；

.list{
显示：无；
}
.combobox容器div[aria expanded=“true”]+.list{
显示：块；
边框：2倍实心#333；
}

福

既然您使用的是autocomplete，您不想通过javascript（而不是css）控制列表框的显示吗。