mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-07-20 04:45:11 -05:00
[PR #1820] [MERGED] fix(staffml): drop misleading role=button from MetaTooltip and stop nesting it inside a real button #33380
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: github-starred/cs249r_book#33380
Reference in New Issue
Block a user
📋 Pull Request Information
Original PR: https://github.com/harvard-edge/cs249r_book/pull/1820
Author: @farhan523
Created: 5/29/2026
Status: ✅ Merged
Merged: 6/2/2026
Merged by: @profvjreddi
Base:
dev← Head:fix/metatooltip-role-button-and-nested📝 Commits (1)
4b56e5bfix(staffml): drop misleading role=button from MetaTooltip and stop nesting it inside a real button📊 Changes
3 files changed (+77 additions, -4 deletions)
View changed files
➕
interviews/staffml/src/__tests__/meta-tooltip.test.tsx(+67 -0)📝
interviews/staffml/src/components/MetaTooltip.tsx(+9 -3)📝
interviews/staffml/src/components/vault/TopicDetail.tsx(+1 -1)📄 Description
Summary
Two related a11y issues in
MetaTooltip/LevelBadge:role=\"button\"with no handler.MetaTooltip's trigger declaredrole=\"button\"with noonClick/onKeyDown— screen readers announced "button" but Enter/Space did nothing.LevelBadgewraps its badge inMetaTooltipby default, andvault/TopicDetailrendersLevelBadgeinside a real<button>for the drill-by-difficulty rows. The result was<button><span role=\"button\" tabIndex={0}>…</span></button>— invalid HTML and a double tab stop for one logical control.Changes
MetaTooltip.tsx: droprole=\"button\". KeeptabIndex={0}so keyboard users can still focus the trigger and the tooltip appears viagroup-focus-within. Keeparia-describedbylinking to therole=\"tooltip\"body.vault/TopicDetail.tsx: passwithTooltip={false}on the nestedLevelBadge(thewithTooltipprop already exists onLevelBadgefor exactly this case).role=\"button\", trigger stays focusable,aria-describedbystill resolves to arole=\"tooltip\"body, andLevelBadgewithwithTooltip={false}skips the wrapper.Test plan
npx vitest run→ 42/42 passing (was 37/37 on dev — the 5 new tests cover the above)npx tsc --noEmit→ clean/?topic=...— each row should be one tab stop (the parent<button>), not twoLevelBadgeoutside any button (e.g. on the practice page header) — tooltip still appears; screen reader announces the tooltip text viaaria-describedbyinstead of "button"🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.