当前位置:   article > 正文

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

locked aria-hidden on a element because the element that just receiv

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

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

  1. <el-radio-group
  2. v-model="formData.dimension"
  3. @input="changeHandle"
  4. ref="radio"
  5. >
  6. <el-radio :label="1">同一报告</el-radio>
  7. <el-radio :label="2">同一就诊</el-radio>
  8. <el-radio :label="3">同一患者</el-radio>
  9. </el-radio-group>
  10. mounted() {
  11. this.$refs.radio.$children.forEach((item) => {
  12. item.$refs.radio.removeAttribute("aria-hidden");
  13. });
  14. }

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

  1. export default {
  2. bind(el, binding) {
  3. // 获取节点
  4. let ariaEls = el.querySelectorAll(".el-radio__original");
  5. ariaEls.forEach((item) => {
  6. item.removeAttribute("aria-hidden");
  7. });
  8. }
  9. };
  1. import Vue from "vue";
  2. import removeAria from "./moudle/removeAria";
  3. //全局注册
  4. Vue.directive("removeAria", removeAria);
  5. Vue.use(rightmenu);
  1. <!--使用指令-->
  2. <el-radio-group
  3. v-model="formData.radio"
  4. @input="changeHandle"
  5. ref="radio2"
  6. v-removeAria
  7. >
  8. <el-radio :label="'1'"> 条件树设置 </el-radio>
  9. <el-radio :label="'2'"> 满足所有变量 </el-radio>
  10. <el-radio :label="'3'"> 满足任意变量 </el-radio>
  11. </el-radio-group>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/1009845
推荐阅读
相关标签
  

闽ICP备14008679号