Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Bug: Row decorations and git status aren't part of a row's accessible name

Open Beginner friendly
  • Is something wrong?
#1,187 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
accessibility, frontend

Research direction

The issue identifies FileTreeView.tsx and renderStyledRow as the entry point. Read how getFileTreeRowAriaLabel, customDecoration, and gitDecoration supply the row label, then check the tree item accessibility tests. Done means the accessible name includes decoration and git status titles while preserving the file name.

Written by the indexing model from the issue text.

Description

bug
Prerequisites
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:

  1. Render a tree with gitStatus and a renderRowDecoration that returns a title (snippet below)
  2. Check the aria-label on each [role="treeitem"] row
  3. 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?

@pierre/[email protected] (not using @pierre/diffs)

Dominant language
TypeScript
Stars
6.2k
Forks
226
Avg merge
1d 12h
Merged PRs (30d)
34

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from pierrecomputer/pierre

All issues in pierrecomputer/pierre

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.