fix(slider): 无障碍支持. (#1048)

[byq1213]

🤔 这个 PR 的性质是？

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

🔗 相关 Issue

fix #1048

💡 需求背景和解决方案

📝 更新日志

• fix(Slider): 支持无障碍访问

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

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

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

演示视频:

1. 全局扫描:
   https://codesign.qq.com/s/1DWk9J7LWo0GnMm
2. 操作
   https://codesign.qq.com/s/a4Jd0NPAXJjAMkb

[syxysszyw]

预览2

[github-actions]

[syxysszyw]

预览2

[github-actions]

[syxysszyw]

iOS录屏https://codesign.qq.com/s/1JyMjolqlv9LbAV

• 视频定位00：05——滑块上面隐形的焦点是冗余的。虽然界面上看没有label，但既然焦点落在滑块上已经能读出百分比，就不需要再通过隐藏的节点来重复传达相应的信息了，现在会读2次数字，第一次不带百分号，第二次带百分号，要么省略第一次，要么将2个焦点合并成一个（如果可以的话）
• 视频定位00：16、00：18，焦点落在滑块上的时候，读的是“35，53.8%”、“65，46.2%”，后续的示例也有类似的问题，这不符合预期，需要排查下为什么会读2个不相等的数字

- 如截图所示，滑块顶部的数字示例，在读屏模式下可以隐藏（aria-hidden）

- 双游标滑块，左右2个滑块变化时，各自的 `aria-valuemax` 和 `aria-valuemin` 是否有动态跟随变化呀，参考示例 https://www.w3.org/2022/07/volunteer-translation-apg-zh/Overview.html#slidertwothumb

Android录屏

• 跟iOS类似

[byq1213]

• q1:"但既然焦点落在滑块上已经能读出百分比，就不需要再通过隐藏的节点来重复传达相应的信息了"
  隐藏节点是想实现变动值实时播报

• q2: "要么省略第一次，要么将2个焦点合并成一个（如果可以的话）"
  合并不到一个,
  slider元素上的valuenow需要必填, valuetext 可以描述更好点, 但也需要填东西, 所以这里不能省略
  省略第一个也就没了q1实时播报的意义

可以有个优化项 加入一个labelby="隐藏节点id", 达到文案一致. 试了下: tdesign 官方示例没有对填过个性label,默认false,就导致
"30, 30, 30%, 上下可滑动", 出现前两个值重复播报
如果label换成个性化的: "${value}个",就能看出来每个值的作用了: "30个, 30, 30%, 上下可滑动", (labelby的值, valuenow的值, 无法省略的百分比)

• q3: 现在双滑块场景下是动态max min, 百分比也就动态算出来了,

参考示例里的"xx百分比"也得没办法抹掉

[syxysszyw]

• “隐藏节点是想实现变动值实时播报“ 如果将这个节点设置为 aria-hidden=true，播报效果会失效吗？如果一定需要这个节点不可，那么有没有可能优化一下位置/时机，例如在页面的最后面，或动态插入之类？重复读2次的体验还是比较困惑
• “可以有个优化项 加入一个labelby="隐藏节点id", 达到文案一致”能否截代码示意图，不确定是不是描述【焦点在slider读出“35，53.8%”、“65，46.2%”】这个问题的原因，有些不太明白
• “参考示例里的"xx百分比"也得没办法抹掉” 又是指什么呀 ？

[syxysszyw]

预览1

[github-actions]

[syxysszyw]

LGTM