Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(image-viewer): image-viewer 支持无障 碍模式 #1715

Closed
wants to merge 3 commits into from

Conversation

notfoundma
Copy link

@notfoundma notfoundma commented Mar 3, 2023

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

fix #1062

💡 需求背景和解决方案

📝 更新日志

  • fix(组件名称): 处理问题或特性描述 ...

  • 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

andriod设备录屏

https://share.weiyun.com/lCbJwA6F

ios设备录屏

https://share.weiyun.com/ezpL6yyU

@syxysszyw
Copy link
Collaborator

预览3

@github-actions
Copy link
Contributor

github-actions bot commented Mar 3, 2023

qrcode

@@ -22,7 +24,7 @@
current="{{currentSwiperIndex}}"
bindchange="onSwiperChange"
>
<swiper-item wx:for="{{images}}" wx:key="index" class="{{classPrefix}}__preview-image">
<swiper-item wx:for="{{images}}" wx:key="index" class="{{classPrefix}}__preview-image" ria-role="img" aria-label="图像">
<t-image
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. ria-role="img" aria-label="图像" 为什么是定义在 <swiper-item /> 上?从代码上看,里面有一个 t-image
  2. 应该是 aria-role 而非 ria-role

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

里面有个t-image有自己的无障碍属性,是不是不用加到上了?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

“不用加到上”是指什么?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

示例中有多张图像,是不是可以通过图像1、图像2...来适当区分

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

焦点穿透问题依旧存在哦

具体什么机型,我测试是通过的

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

“不用加到上”是指什么?

不用加在 swiper-item上

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

具体什么机型,我测试是通过的

iPhone 11 Pro,iOS 16.3

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不用加在 swiper-item上

如果需要加 aria-role=img,从代码看起来应该加在 t-image 上才比较合理

@syxysszyw
Copy link
Collaborator

焦点穿透问题依旧存在哦

@notfoundma
Copy link
Author

@notfoundma notfoundma closed this Mar 3, 2023
@notfoundma notfoundma reopened this Mar 3, 2023
@LeeJim LeeJim added the a11y 无障碍访问 label Mar 6, 2023
@syxysszyw
Copy link
Collaborator

预览1

@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2023

qrcode

@syxysszyw
Copy link
Collaborator

预览1

@github-actions
Copy link
Contributor

github-actions bot commented Mar 14, 2023

qrcode

@syxysszyw
Copy link
Collaborator

预览4

@github-actions
Copy link
Contributor

github-actions bot commented Mar 14, 2023

qrcode

@@ -32,12 +34,14 @@
data-index="{{index}}"
class="{{classPrefix}}__image"
bindload="onImageLoadSuccess"
aria-role="img"
:aria-label="图像{{index}}"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里为什么需要加冒号?

@syxysszyw
Copy link
Collaborator

预览2

@syxysszyw syxysszyw closed this Mar 16, 2023
@syxysszyw syxysszyw reopened this Mar 16, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Mar 16, 2023

qrcode

@syxysszyw
Copy link
Collaborator

  1. 点击蒙层无法关闭
  2. 图片没有替代文本,获取焦点时播报“列表框”,用户不清楚这里有多张图片,并且不支持滑动浏览
  3. 存在焦点穿透问题

@LeeJim LeeJim closed this Apr 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y 无障碍访问
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[ImageViewer] 无障碍支持
3 participants