jestjs/jest

[Feature]: Pass jest-diff options through jest-config to fix A11Y issues

Open

#12576 opened on Mar 14, 2022

View on GitHub
 (9 comments) (24 reactions) (0 assignees)TypeScript (45,361 stars) (6,653 forks)batch import
:rocket: Feature RequestHelp WantedPinned

Description

🚀 Feature Proposal

jest-diff has options for the colors in a terminal/command-prompt (among other things):

These options should be exposed to the jest-config, so end users can control these values in their project.

Motivation

Currently, the colors in every version of Jest are either broken for people with visual impairments (24.9.0 and below) or with cognitive impairments (25.0.0+). Also in 25+ there are issues on specific systems default terminals that cause issues (Windows CMD/Powershell, ZSH, GitLab CI, IntelliJ, etc).

People should be able to set their own color choices, and not be forced into a set that is incompatible with them as a human, or with their preferences via terminal, shell, theme, or tooling.

Example

jest.config.js

const chalk = require('chalk');

module.exports = {
  diff: {
    // The following is copied directly from https://github.com/facebook/jest/tree/main/packages/jest-diff#options
    aAnnotation: 'Expected',
    aColor: chalk.green,
    aIndicator: '-',
    bAnnotation: 'Received',
    bColor: chalk.red,
    bIndicator: '+',
    changeColor: chalk.inverse,
    changeLineTrailingSpaceColor: string => string,
    commonColor: chalk.dim,
    commonIndicator: ' ',
    commonLineTrailingSpaceColor: string => string,
    compareKeys: undefined,
    contextLines: 5,
    emptyFirstOrLastLinePlaceholder: '',
    expand: true,
    includeChangeCounts: false,
    omitAnnotationLines: false,
    patchColor: chalk.yellow
  }
};

By exposing all options, it empowers communities to create their own commonly recommended settings, like so:

const diff = require('jest-deuteranopia-diffs');
module.exports = { diff };
const diff = require('jest-cognitive-diffs');
module.exports = { diff };
const diff = require('jest-win-cmd-diffs');
module.exports = { diff };

etc. There could even be an awesome-jest-diffs with screenshots of each library, so users can more easily choose what works best for them or their teams. This could all be community-lead, but we need Jest to allow for this.

Pitch

Because humans are not all the same.

Because this software is made for humans.

Contributor guide