uni-app ios 旁白h5 使用 uni-popup、picker等弹出弹出层 点击弹出层空白处 会点击到弹窗层阴影下方的文本内容

uni-app ios 旁白h5 使用 uni-popup、picker等弹出弹出层 点击弹出层空白处 会点击到弹窗层阴影下方的文本内容

项目信息 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 3.0.0-3081220230817001
浏览器平台 手机系统浏览器
浏览器版本 safari 和微信内置浏览器都存在这个问题
项目创建方式 CLI
CLI版本号 3.0.0-3081220230817001

操作步骤：

  1. 苹果手机-设置-辅助功能-打开旁白
  2. 页面中使用uni-popup组件、picker等弹出
  3. 点击阴影处朗读阴影下方内容

预期结果：

  1. 苹果手机-设置-辅助功能-打开旁白
  2. 页面中使用uni-popup组件、picker等弹出
  3. 点击阴影处不需要朗读阴影下方内容

实际结果：

点击阴影处朗读阴影下方内容

bug描述：

uniapp ios 旁白h5，使用 uni-popup弹出层，点击弹出层空白处，会点击到弹窗层阴影下方的文本内容

bug图


更多关于uni-app ios 旁白h5 使用 uni-popup、picker等弹出弹出层 点击弹出层空白处 会点击到弹窗层阴影下方的文本内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

附件

更多关于uni-app ios 旁白h5 使用 uni-popup、picker等弹出弹出层 点击弹出层空白处 会点击到弹窗层阴影下方的文本内容的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的iOS旁白模式下H5弹出层穿透问题。解决方案如下：

  1. 针对uni-popup组件，需要在弹出层显示时给遮罩层添加aria-hidden="true"属性，防止旁白读取底层内容：
<view class="uni-popup__mask" 
      aria-hidden="true"
      @click="close">
</view>
  1. 对于picker等原生组件，可以通过动态设置底层元素的aria-hidden属性：
// 显示弹出层时
document.getElementById('content').setAttribute('aria-hidden', 'true');

// 隐藏弹出层时
document.getElementById('content').removeAttribute('aria-hidden');
  1. 或者使用CSS禁止底层元素的可访问性：
.popup-show ~ * {
  -webkit-user-select: none;
  pointer-events: none;
  aria-hidden: true;
}
  1. 也可以尝试在弹出层显示时给body添加inert属性（需要polyfill支持）：
document.body.setAttribute('inert', '');
回到顶部