Perfcompare - Mozilla

About PerfCompare

PerfCompare is Mozilla's open-source performance comparison tool, available at perf.compare. It enables Firefox engineers and contributors to compare performance metrics across different browser builds, helping the team detect and prevent performance regressions before they reach users. The project is written almost entirely in TypeScript (98.1%), built with React and Material UI, and deployed on Netlify. With 50+ stars and 90+ forks on GitHub, it serves as a critical part of Mozilla's performance testing infrastructure alongside Treeherder.

My Contributions

I contributed to PerfCompare as an open-source contributor, focusing on improving the tool's accessibility to ensure it met WCAG standards and was usable by engineers who rely on assistive technologies. Across three merged pull requests, my work addressed screen reader compatibility, ARIA compliance, and test infrastructure stability.

Accessibility Remediation — SearchResultsListItem

PR #305 · Merged Mar 2023 · 9 commits

The SearchResultsListItem component had several accessibility violations that caused automated a11y tests to fail:

• Missing aria-label attributes on checkbox inputs rendered by MUI's Checkbox component, making revision selections unidentifiable to screen readers.
• Incorrect list nesting — li elements were not direct descendants of ul, with intermediate wrapper elements breaking the semantic list structure.
• Nested interactive elements — focusable checkboxes were placed inside ListItemButton (rendered as a <button>), which screen readers cannot announce correctly.

I resolved these by passing descriptive aria-label props in the format "(commit-message) by (author)", reversing the ListItemButton / ListItem nesting order, and changing the ListItemButton role from button to group. All snapshot tests were updated to match.

Filter Accessibility — CompareResultsTable

PR #397 · Merged Apr 2023 · 2 commits

The comparison results filter buttons in CompareResultsTable had no accessible text, making them invisible to assistive technologies. I added proper aria-label attributes to the filter controls and validated the fix using the WAVE auditing tool, Windows Narrator, and NVDA screen reader for manual verification.

Test Infrastructure Fix

PR #464 · Merged May 2023 · 1 commit

After a prior refactor changed test lifecycle hooks from beforeEach to an alternative pattern, the accessibility test suite began timing out. I identified the regression, reverted the lifecycle change, and restored test suite stability so all a11y tests could run to completion.

Tools & Methodology

All accessibility work followed a rigorous manual + automated testing approach:

• Automated auditing with WAVE browser extension to surface violations
• Screen reader testing with NVDA and Windows Narrator for real-world verification
• Snapshot testing via Jest to prevent visual regressions
• CI validation through CircleCI to ensure all checks passed before merge

Impact

These contributions improved PerfCompare's accessibility compliance across its search and comparison interfaces — two of the tool's most heavily used workflows. The changes ensure that Firefox performance engineers who rely on assistive technologies can navigate revision search results, select comparisons, and filter results without barriers.