patternfly / patternfly/patternfly-react
JumpLinks - add aria-labelledby prop and warning for aria labels
还没有人认领这个 Issue。
- 主要语言
- TypeScript
- 星标
- 862
- 派生
- 392
- 平均合并
- 4 天 8 小时
- 30 天内合并 PR
- 9
描述
Is this a new component or an extension of an existing one?
JumpLinks
Describe the feature
Follow up to comments in https://github.com/patternfly/patternfly-org/pull/3808
Basically right now the default value of the aria-label on JumpLinks is set to the label prop if passed in, and only if label is a string. Ideally we should consider making updates so that:
-
an
aria-labelledbyprop can be passed in which can be given anidof thelabelelement or some other element that labels the jump links nav. -
if
labelis not a string andaria-labelledbyis not manually passed in, generate a randomidinternally that's applied to thelabelwrapper element (pf-v5-c-jump-links__label), with thatidpassed to an aria-labelledby attribute on the outer JumpLinksnavelement. -
We could also consider removing the default value of the
aria-labelprop, but that may need to wait for a breaking change. Rationale here is that it would make more sense to link to the visible text label viaaria-labelledbyrather than repeat the text in anaria-label; while React is automating that for the consumer, it's only when the label prop is a string and in the HTML implementation there isn't that same automation provided by us
We should also add in a console warning if neither aria-label or aria-labelledby are passed in, otherwise there's a chance that the JumpLinks internal nav has no proper accessible name.
Are there visuals for this feature? If applicable, please include examples for each state and for varying widths
Include screenshots or links to Marvel or other mockups.
Any other information?
A followup will need to be made in org to add verbiage to the a11y docs for JumpLinks
Jira Issue: PF-109
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从 JumpLinks 组件的入口点开始,查看现有的 label 和 aria-label 处理方式。跟踪 props 如何传递到 label wrapper 和 nav,然后验证对 aria-labelledby 的支持、生成的 label id 以及缺少 accessible name 时的警告是否满足 issue 的要求;PatternFly org 的无障碍文档仍作为后续事项处理。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react, typescript
- 领域
- accessibility, frontend
- Issue 类型
- 功能
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 冷清
- 描述清晰度
- 基本清楚
- 新手友好度
- 52/100