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.

Sign up for GitHub

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

Jump to bottom

feat(cascader): support aria #1657

Open
wants to merge 21 commits into
base: develop
Choose a base branch
from
Open

feat(cascader): support aria #1657

wants to merge 21 commits into from

Conversation

zhangpaopao0609
Copy link
Contributor

🤔 这个 PR 的性质是？

  • 新特性提交

🔗 相关 Issue

fix #1254

💡 需求背景和解决方案

ios 录屏

📝 更新日志

  • feat(Cascader): 支持无障碍访问

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

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

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

@LeeJim LeeJim added the a11y 无障碍访问 label Feb 27, 2023
@syxysszyw
Copy link
Collaborator

预览1

@github-actions
Copy link
Contributor

github-actions bot commented Mar 1, 2023 •
edited
Loading

qrcode

@syxysszyw
Copy link
Collaborator

预览1

@github-actions
Copy link
Contributor

github-actions bot commented Mar 3, 2023 •
edited
Loading

qrcode

@syxysszyw
Copy link
Collaborator

预览1

@github-actions
Copy link
Contributor

github-actions bot commented Mar 3, 2023 •
edited
Loading

qrcode

@syxysszyw
Copy link
Collaborator

预览1

@syxysszyw
Copy link
Collaborator

  • "选择选项"现在读成了“按钮”，实际上点击后不会有反应，建议这里不需要读成“按钮”
  • 非第一级选项列表会有一个隐藏元素能获取焦点
91_1677832897.mp4
  • 苹果手机上切换到最后一级选项列表时无法选中

@syxysszyw
Copy link
Collaborator

预览3

@github-actions
Copy link
Contributor

github-actions bot commented Mar 10, 2023 •
edited
Loading

qrcode

@syxysszyw
Copy link
Collaborator

syxysszyw commented Mar 10, 2023 •
edited
Loading

非第一级选项列表会有一个隐藏元素能获取焦点
苹果手机上切换到最后一级选项列表时无法选中

这2个问题是不是还能复现？

@syxysszyw
Copy link
Collaborator

预览2

@github-actions
Copy link
Contributor

正在构建预览的二维码，请稍等...

@syxysszyw
Copy link
Collaborator

预览3

@github-actions
Copy link
Contributor

github-actions bot commented Mar 14, 2023 •
edited
Loading

qrcode

@zhangpaopao0609
Copy link
Contributor Author

预览

@github-actions
Copy link
Contributor

github-actions bot commented Mar 15, 2023 •
edited
Loading

qrcode

@zhangpaopao0609
Copy link
Contributor Author

预览

@github-actions
Copy link
Contributor

github-actions bot commented Mar 15, 2023 •
edited
Loading

qrcode

@zhangpaopao0609
Copy link
Contributor Author

zhangpaopao0609 commented Mar 15, 2023 •
edited
Loading

非第一级选项列表会有一个隐藏元素能获取焦点

关于这一点，目前实现的方式是将上一级隐藏 aria-hidden="true"，从代码来看（如下视频），是成功设置了的，但是真机测试似乎是没有设置成功，在这里记录一下。

3b99ac77609e7ede480e4f72a2dcaa3f.mov

@syxysszyw
Copy link
Collaborator

预览4

@github-actions
Copy link
Contributor

github-actions bot commented Mar 21, 2023 •
edited
Loading

qrcode

@zhangpaopao0609
Copy link
Contributor Author

预览

@github-actions
Copy link
Contributor

正在构建预览的二维码，请稍等...

@zhangpaopao0609
Copy link
Contributor Author

预览

@github-actions
Copy link
Contributor

github-actions bot commented Mar 24, 2023 •
edited
Loading

qrcode

@zhangpaopao0609
Copy link
Contributor Author

截止目前此组件无障碍支持还遗留的问题如下：

  1. 上一层【被选中的】选项能获取焦点（点击后切换到下一层级，但上一层【被选中】的那一项还能被选中）
  2. 最后一层级，点击后无法无法关闭

因一时间未找到解决办法，所以先行合并此 pr，以完成前置支持，然后重新提一个 issue 来记录，同时也希望能有社区大佬给解决一波！

@zhangpaopao0609 zhangpaopao0609 mentioned this pull request May 30, 2023
Open
@zhangpaopao0609
Copy link
Contributor Author

预览

@syxysszyw
Copy link
Collaborator

预览

syxysszyw
syxysszyw reviewed May 31, 2023
View reviewed changes
src/cascader/cascader.wxml
>
<view
class="{{name}}__options-container"
style="width: {{items.length + 1}}00vw; transform: translateX(-{{stepIndex}}00vw)"
Copy link
Collaborator

Choose a reason for hiding this comment

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

这个style去掉了，符合预期吗

src/cascader/cascader.wxml
bind:change="handleSelect"
data-level="{{index}}"
data-level="{{stepIndex}}"
Copy link
Collaborator

Choose a reason for hiding this comment

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

这里的变更 @LeeJim 帮忙多关注下

@anlyyao
Copy link
Collaborator

anlyyao commented Nov 1, 2023

@zhangpaopao0609 大佬，抽空帮忙处理一下冲突～ +1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@syxysszyw syxysszyw syxysszyw left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
a11y 无障碍访问
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Cascader] 无障碍支持
4 participants
@zhangpaopao0609 @syxysszyw @anlyyao @LeeJim