javascript - 使用 :focus-within 时更新 aria-expanded 属性的最佳方法

Question

我正在开发一个组合框，为此，我想使用新的 :focus-within 伪选择器来管理与组合框关联的可扩展列表框的显示。

:focus-within 是一个很好的解决方案，并且很有魅力。我遇到的唯一问题是弄清楚如何保持列表框中的 aria-expanded 属性更新。由于伪选择器的存在，所有隐藏/显示功能都发生在浏览器区域，因此我不确定是否可以在 Javascript 中使用 Hook 来确定元素何时可见或不可见，以便更新该属性。

有没有人知道的优雅解决方案？我不想复制 :focus-within 现在正在处理的焦点/模糊逻辑，只是为了更新此属性。我还担心他们可能会不同步。有什么方法可以使用 :focus-within 或类似的东西来监视元素吗？

.list {
  display: none;
}
.combobox-container:focus-within .list {
  display: block;
}

<section class="combobox-container">
  <div role="combobox" aria-expanded="false" aria-owns="listbox" aria-haspopup="listbox">
     <label> Foo
       <input type="text" aria-autocomplete="list" aria-controls="listbox" />
     </label>
  </div>
  <ul class="list" id="listbox" role="listbox" tabindex="0" aria-multiselectable="true">
    <!-- items for autocomplete. focusable anchors inside li tags. -->
    <li><a href="#">Javascript</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
  </ul>
</section>

Accessibility guidelines for a combobox

Answer 1

focus-within only has 84% browser coverage

因此，这会立即导致您的解决方案无法访问，因为许多屏幕阅读器用户仍在使用 JAWs使用 Internet Explorer。

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

这意味着列表将始终在您聚焦 <input> 时显示。 ，即使没有在组合框中输入任何内容(这不是预期的行为)。

这是少数可以接受仅依赖 JavaScript 的情况之一(但仍可以在没有 JavaScript 的情况下提交表单)。

而不是尝试使用 :focus-within您可以使用 JavaScript 来切换 aria-expanded="true"当您返回一些建议然后使用standard CSS3 selectors时显示和隐藏结果。

下面的示例显示了实现此目的的 CSS。 +运算符是关键，它是Adjacent Sibling Combinator选择父元素中的下一个兄弟元素。

CSS: .combobox-container div[aria-expanded="true"]+.list

对于下面的示例，我这样做是为了一旦您在框中输入超过 1 个字符，它就会更改 aria-expanded属性为true (如果输入为空则再次返回)-这使它感觉更像是“现实世界”的示例。

旁注:您无需添加 tabindex到<ul> ，预期的行为是直接跳到第一个建议的元素，我在下面的示例中删除了它。

//ignore this, this is my standard jQuery replacement for snippets
if(typeof $=="undefined"){!function(b,c,d,e,f){f=b['add'+e]
function i(a,d,i){for(d=(a&&a.nodeType?[a]:''+a===a?b.querySelectorAll(a):c),i=d.length;i--;c.unshift.call(this,d[i]));}
$=function(a){return /^f/.test(typeof a)?/in/.test(b.readyState)?setTimeout(function(){$(a);},9):a():new i(a);};$[d]=i[d]={on:function(a,b){return this.each(function(c){f?c['add'+e](a,b,false):c.attachEvent('on'+a,b)})},off:function(a,b){return this.each(function(c){f?c['remove'+e](a,b):c.detachEvent('on'+a,b)})},each:function(a,b){for(var c=this,d=0,e=c.length;d<e;++d){a.call(b||c[d],c[d],d,c)}
return c},splice:c.splice}}(document,[],'prototype','EventListener');var props=['add','remove','toggle','has'],maps=['add','remove','toggle','contains'];props.forEach(function(prop,index){$.prototype[prop+'Class']=function(a){return this.each(function(b){if(a){b.classList[maps[index]](a);}});};});$.prototype.hasClass=function(a){return this[0].classList.contains(a);};}
$.prototype.find=function(selector){return $(selector,this);};$.prototype.parent=function(){return(this.length==1)?$(this[0].parentNode):[];};$.prototype.findWithin=function(a){console.log("THIS IS",this[0],a);return this[0].getElementsByClassName(a);};$.prototype.first=function(){return $(this[0]);};$.prototype.focus=function(){return this[0].focus();};$.prototype.css=function(a,b){if(typeof(a)==='object'){for(var prop in a){this.each(function(c){c.style[prop]=a[prop];});}
return this;}else{return b===[]._?this[0].style[a]:this.each(function(c){c.style[a]=b;});}};$.prototype.text=function(a){return a===[]._?this[0].textContent:this.each(function(b){b.textContent=a;});};$.prototype.html=function(a){return a===[]._?this[0].innerHTML:this.each(function(b){b.innerHTML=a;});};$.prototype.attr=function(a,b){return b===[]._?this[0].getAttribute(a):this.each(function(c){c.setAttribute(a,b);});};$.param=function(obj,prefix){var str=[];for(var p in obj){var k=prefix?prefix+"["+p+"]":p,v=obj[p];str.push(typeof v=="object"?$.param(v,k):encodeURIComponent(k)+"="+encodeURIComponent(v));}
return str.join("&");};$.prototype.append=function(a){return this.each(function(b){b.appendChild(a[0]);});};$.ajax=function(a,b,c,d){var xhr=new XMLHttpRequest();var type=(typeof(b)==='object')?1:0;var gp=['GET','POST'];xhr.open(gp[type],a,true);if(type==1){xhr.setRequestHeader("X-Requested-With","XMLHttpRequest");}
xhr.responseType=(typeof(c)==='string')?c:'';var cb=(!type)?b:c;xhr.onerror=function(){cb(this,true);};xhr.onreadystatechange=function(){if(this.readyState===4){if(this.status>=200&&this.status<400){cb(this,false);}else{cb(this,true);}}};if(type){xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');xhr.send($.param(b));}else{xhr.send();}
xhr=null;};

//only part of the demo, not for production use
$('input').on('keyup', function(e){
    if($(this)[0].value.length > 0){
        $('div[role=combobox]').attr('aria-expanded', true);
        return; 
    }
    $('div[role=combobox]').attr('aria-expanded', false);
    return;
});

.list {
  display: none;
}
.combobox-container div[aria-expanded="true"]+.list{
  display: block;
  border:2px solid #333;
}

<section class="combobox-container">
  <div role="combobox" aria-expanded="false" aria-owns="listbox" aria-haspopup="listbox">
     <label> Foo
       <input type="text" aria-autocomplete="list" aria-controls="listbox" />
     </label>
  </div>
  <ul class="list" id="listbox" role="listbox" aria-multiselectable="true">
    <!-- items for autocomplete. focusable anchors inside li tags. -->
    <li><a href="#">Javascript</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
  </ul>
</section>