同事项目的前端部分,用的ant-design-vue,经常报一个错误,让我给看看。
错误如下:
Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at w3c.github.io/aria/#aria-…. Element with focus: div
在网上查了一下,所有给出的“解决方法”,都是通过各种方法,把这个属性给去了(汗)。没有讲这个报错是什么,为什么会出现。好在报错信息里自带网址,顺便了解了一下。
给一个标签,加上aria-hidden属性,表明其在无障碍层面属于不可见的元素,只起装饰作用(给肉眼看),对于阅读器什么的是不需要的。这种情况下,它及其子元素,不应该得到焦点,但是现在缺得到了焦点。因此报错。
了解了原因,解决方案就简单了,其实出这类错的大多表单弹框,给其第一个输入控件上,加上auto-focus属性,让其自动获得焦点,aria-hidden下面的元素就不会在一打开的时候获取焦点了。