Prerequisites
- I have searched for duplicate or closed issues
- I have read the contributing guidelines
Describe the issue
I'm using @pierre/trees for a file tree in a browser extension I'm building, and I use renderRowDecoration to show stuff like a comment count and +12 -3 line counts on each row. I noticed none of it reaches a screen reader.
Each row's aria-label is just the file name from getFileTreeRowAriaLabel(row), and since aria-label replaces the row's contents as its accessible name, the decoration and its title never get announced. Same with the built-in git status: a modified file shows M but its name is just index.ts, and the "Contains git status items" dot on folders gets lost too.
I'd expect the decoration and git status titles to be part of the row's name, something like README.md, 12 added, 3 removed.
Steps to reproduce:
- Render a tree with gitStatus and a
renderRowDecorationthat returns a title (snippet below) - Check the
aria-labelon each[role="treeitem"]row - It's only the file name
Reproduction
My project is private at the moment, so here's a minimal snippet instead:
import { FileTree } from '@pierre/trees';
const mount = document.getElementById('mount')!;
mount.style.height = '200px';
new FileTree({
paths: ['README.md', 'src/index.ts'],
initialExpansion: 'open',
gitStatus: [{ path: 'src/index.ts', status: 'modified' }],
renderRowDecoration: ({ item }) =>
item.path === 'README.md' ? { text: '+12 -3', title: '12 added, 3 removed' } : null,
}).render({ containerWrapper: mount });The rows come out labeled src, index.ts, and README.md, even though they visibly show M and +12 -3.
I'm patching the decoration half of this locally for now. Something like this in renderStyledRow (FileTreeView.tsx) would cover both:
ariaLabel: [getFileTreeRowAriaLabel(row), customDecoration?.title, gitDecoration?.title]
.filter(Boolean)
.join(', '),What browser(s) are you seeing the problem on?
No response
What version of @pierre/diffs are you using?
Activity
0No activity yet.