fix(avatar): 无障碍朗读支持. (#1028)

[byq1213]

🤔 这个 PR 的性质是？

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

🔗 相关 Issue

fix #1028

💡 需求背景和解决方案

📝 更新日志

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

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

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

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

IOS演示录屏

https://share.weiyun.com/dbS36qaT
已知问题:

• 最后的icon读取多读了个 "Do",可能是icon的字体库问题

[syxysszyw]

这里建议视情况而定，这种头像在页面里面可能有2种形式

1. 只展示【头像】，此时头像应该声明替代文本。在截图这个场景下，直接朗读为“头像”也可以，因为这主要是用户没有设置图像之后做的个性化处理，现在朗读为“字符A为名称”一方面比较长，另一方面有些费解，如果期望针对“不同字符的头像”做特殊处理，建议优化下这里的文案；
2. 【头像+昵称】，支持同时朗读出【头像】的替代文本和【昵称】的文本是OK的，但如果【头像】和【昵称】播报的内容完全一样，则建立要么整体做聚合处理，要么将其中一个内容对读屏内容隐藏。所以这里建议 Avatar 组件能支持设置 aria-hidden 属性

下图这里本质上是一个图标按钮，将 aria-role 声明为 button，同时定义 aria-label 是不是更符合语义？

[byq1213]

修复后演示:
https://share.weiyun.com/dbS36qaT

[syxysszyw]

1. 这里的label是否可以定义为类似“省略显示了5个头像”或”5个头像未显示“ 含义的文案（大概是这个意思，但暂时还想不到更好的表达）

现在统一播报为“头像”，与实际看到的对应不上；并且后面好像有一个焦点是“加号”？

2. “点击添加”可以简化为“添加”（“按钮”的语义已经具备必要的指示性，因为可删掉”点击“）