Blocked aria-hidden on a <input> element because the element that just received focus must not be...

1,我们使用element-ui的单选框radio,点击的时候报错如下图的错,究其原因是访问ibility问题:这个错误可能是因为HTML元素<input>上的aria-hidden属性被错误地使用了。aria-hidden属性是一个用于指示元素是否对屏幕阅读器等辅助技术隐藏的属性。如果一个<input>元素被设置为aria-hidden="true",这可能违反了无障碍性web的最佳实践,因为屏幕阅读器用户依赖这类元素来理解应用的结构和内容

2.解决方案一(生命周期里面修改)

<el-radio-group
    v-model="formData.dimension"
    @input="changeHandle"
    ref="radio"
>
    <el-radio :label="1">同一报告</el-radio>
    <el-radio :label="2">同一就诊</el-radio>
    <el-radio :label="3">同一患者</el-radio>
</el-radio-group>



mounted() {
    this.$refs.radio.$children.forEach((item) => {
        item.$refs.radio.removeAttribute("aria-hidden");
    });
}

3.解决方案二(注册指令)

export default {
  bind(el, binding) {
    // 获取节点
    let ariaEls = el.querySelectorAll(".el-radio__original");
    ariaEls.forEach((item) => {
      item.removeAttribute("aria-hidden");
    });
  }
};
import Vue from "vue";
import removeAria from "./moudle/removeAria";

//全局注册
Vue.directive("removeAria", removeAria);
Vue.use(rightmenu);
<!--使用指令-->
<el-radio-group
    v-model="formData.radio"
    @input="changeHandle"
    ref="radio2"
    v-removeAria
>
    <el-radio :label="'1'"> 条件树设置 </el-radio>
    <el-radio :label="'2'"> 满足所有变量 </el-radio>
    <el-radio :label="'3'"> 满足任意变量 </el-radio>
</el-radio-group>

  • 10
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值