【日常bug记录】Blocked aria-hidden on a ＜input＞ element because the element that just received focus must

这个bug是使用 el-radio-group 组件的时候浏览器控制台报的错误，不影响使用，但是不好看。
报错的意思就是 element UI 最后生成的标签有一个这个属性：

但是这个属性在 input 标签上应该避免使用的
我们没有办法控制 element UI 不生成这个标签，只能创建一个指令去删除它

• 1、在 main.js 中创建一个全局的指令

Vue.directive('removeAriaHidden', {
  bind(el, binding) {
    let ariaEls = el.querySelectorAll('.el-radio__original');
    ariaEls.forEach((item) => {
      item.removeAttribute('aria-hidden');
    });
  }
});

2、在 el-radio-group 标签上使用

<el-radio-group
  v-removeAriaHidden
>
</el-radio-group>

另外还有一个问题，如果 el-radio 标签是使用 v-for 渲染的，你会发现，以上的步骤解决不了问题，此时 v-for 依赖的数据大部分都是异步的，所以需要给指令增加一个延时器

Vue.directive('removeAriaHidden', {
  bind(el, binding) {
    let ariaEls = el.querySelectorAll('.el-radio__original');
    ariaEls.forEach((item) => {
      item.removeAttribute('aria-hidden');
    });
    let timeout = 0;
    if (ariaEls.length === 0) {
      timeout = 500;
    }
    setTimeout(() => {
      ariaEls = el.querySelectorAll('.el-radio__original');
      ariaEls.forEach((item) => {
        item.removeAttribute('aria-hidden');
      });
    }, timeout);
  }
});

参考文章：
https://blog.csdn.net/qq_44776454/article/details/140988172