Repository navigation
feat: support description text in tree items - #10710
minwookshin wants to merge 4 commits into
Conversation
Developed and tested with assistance from OpenAI Codex.
snowystinger
left a comment
snowystinger
left a comment
There was a problem hiding this comment.
In #10665 you asked
Would you prefer aria-describedby here, rather than GridList's combined aria-labelledby behavior?
Did you test both with various combinations of screen readers/OS/browser? If so, do you have the data that informed your decision?
|
I checked the browser accessibility tree, but I haven't compared both approaches with screen readers yet. |
|
Let's match how |
| // TODO: should it return a state specifically for isExpanded? Or is aria attribute sufficient? | ||
| return { | ||
| ...gridListAria, | ||
| rowProps: { |
There was a problem hiding this comment.
I assume you don't need this override. We can just inherit the behavior from useGridListItem?
| let {onAction, linkBehavior, keyboardNavigationBehavior, shouldSelectOnPressUp} = | ||
| listMap.get(state)!; | ||
| let descriptionId = useSlotId(); | ||
| let descriptionId = useSlotId([node]); |
There was a problem hiding this comment.
I assume this is related to this test?:
updates the description relationship when the slot is removed and added
If so, was this an existing bug in GridList? and can you add a test specifically for GridList. It can be basically the same as the Tree one. That way we can verify before and after
There was a problem hiding this comment.
Would node.key (or id? i'm going off memory for this comment) be better?
There was a problem hiding this comment.
don't forget to answer in comment thread
There was a problem hiding this comment.
Yes, GridList had the same stale aria-labelledby reference; the new test covers removing and re-adding a description with an explicit ID. node.key still fails because the item's key stays the same when the description changes.
3 participants
Closes #10665
Tree items need a description slot that follows the existing GridList accessibility behavior.
Text slot="description"now uses the inheritedaria-labelledbyrelationship, so the row name includes its description. The Tree-specific override is removed, and the shared slot ID refreshes when collection content changes so removed descriptions do not leave dangling references.Implemented with OpenAI Codex.
✅ Pull Request Checklist:
📝 Test Instructions:
Open React Aria Components → Tree → With Descriptions. The parent row should be named “Projects Shared project files”; expanding it reveals “Report Last updated today”. Check keyboard selection, expansion/collapse and pointer activation. Regressions also cover explicit labels, custom description IDs, and removing/reinserting description content.
Full
yarn testpassed (8,442 tests). The first SSR run had a local ECONNRESET in useViewportSize; a second fullyarn test:ssrrun passed all 74 tests without code changes. The runtime code is unchanged by this follow-up; the October 13 serial browser run passed (423 tests, 63 skipped). Formatting, type checking, lint, package checks and constraints passed. The first full browser run had a Firefox TokenField selection failure and a WebKit DateRangePicker failure; both passed individually on the original and modified code, and the full serial run then passed without further code changes.The story passed keyboard/pointer checks in Chromium, Firefox and WebKit with English/light/wide and Arabic/dark/narrow layouts. Chromium's accessibility tree and native Safari both expose the combined row name. VoiceOver speech remains unverified because the local caption-window inspection timed out; its settings were restored. Touch and high-contrast mode were not checked.
Storybook used the standard Parcel server with a local Unix-socket path-length workaround. Neither the workaround nor test fixtures change repository files.
🧢 Your Project:
Open-source contribution.