#1187

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

Openmacintacosopened 18d ago

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/trees@1.0.0-beta.6 (not using @pierre/diffs)

Activity

0

No activity yet.