feature/zhangpaopao/picker aria

[zhangpaopao0609]

🤔 这个 PR 的性质是？

• 新特性提交

🔗 相关 Issue

fix #1066
fix #1051

💡 需求背景和解决方案

ios 录屏

📝 更新日志

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

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

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

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

[anlyyao]

@zhangpaopao0609 辛苦rebase一下dev分支，然后执行 npm run test:snap-update，处理一下测试快照问题～

[zhangpaopao0609]

预览

[github-actions]

[zhangpaopao0609]

预览

[github-actions]

[github-actions]

[zhangpaopao0609]

预览

[github-actions]

[zhangpaopao0609]

预览

[github-actions]

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

[zhangpaopao0609]

预览

[github-actions]

[zhangpaopao0609]

预览

[github-actions]

[syxysszyw]

预览2

[github-actions]

[syxysszyw]

IOS

1. 选择器打开以后，焦点未自动定位在选择器上，左右滑动焦点位置也保持不动，只能依靠触摸调整焦点的位置（视频中打开picker组件可能会有一段延时，此时单指正在左右滑动，但焦点位置未发生变化）
2. 切换选项时，选项发生变化，但焦点依旧停留在列的第一个选项上，点击“确认”选中的视觉上“已选中”的选项，但对视障用户来说听到的依旧是列的第一个选项（而非被选中的选项）
   https://user-images.githubusercontent.com/4988284/226614545-e167f555-c690-445b-8b78-63f562387f15.MP4

Android

1. 存在焦点穿透问题
2. 选项变化时无实时播报（停止手动之后右滑一次会读出当前选中的选项，但视障用户难以理解这是已选中的选项，毕竟右滑了一次，容易理解为下一个选项）
3. 每一列存在2个焦点（最外层的容器有一个焦点，读为“列表框”；被选中的元素有一个焦点），这2个焦点均可按住拖动，前者拖动过程中焦点位置保持不变，后置焦点位置跟随选择器打开时的选项

103_1679402376.mp4

127_1679402318.mp4

通用问题

“取消”“确认”按钮在视觉表现上位于最顶部的位置，目前是属于选择器中第三个获取焦点的元素，用户在选完每一列的选项之后只能将焦点往回滑才能点击“确认”按钮；建议可以考虑调整“取消”“确认”按钮的代码顺序，放在选择区域之后，朗读顺序可以依次为：
1、 蒙层，读为“关闭，按钮”
2、picker选择器的标题
3、选择器主体
4、取消、确认

[zhangpaopao0609]

IOS

1. 焦点自动定位：暂不知如何解决，因为小程序没有 focus()
2. 左右滑动焦点位置也保持不动：暂不知如何解决
3. 切换后仍然停留在第一个：其实已经对此做了处理，即滑动的同时修改每一项的 hidden，仅当前项为 false，其它为 true，从 IDE 中可以看到，代码是生效了的

Android

1. 焦点穿透：这个底层用的 popup，popup 又使用的 overlay，得由此解决
2. 不播报：这个咋处理哇
3. 2 个焦点：这个应该是 role=listbox 的行为了

通用问题

这个确实是合理的，不过要修改的话恐怕得要重新写结构了（布局得改了）

[syxysszyw]

@LeeJim 帮忙关注下评论提到的“通用问题”

[zhangpaopao0609]

预览

[github-actions]

[syxysszyw]

预览2

[github-actions]

[byq1213]

预览

[anlyyao]

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