component-driven / component-driven/cypress-axe

Exclude color-contrast for disabled fields using disabled attribute.

Open
#168 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
641
Forks
90
Avg merge
6h 8m
Merged PRs (30d)
1

Description

Hi, I am trying to disable/exclude color-contrast only on disabled fields in cypress-axe. Is it possible?

const off = [
    'html-has-lang',
    'landmark-one-main',
    'page-has-heading-one',
    'region',
];

// config: https://github.com/component-driven/cypress-axe#cyconfigureaxe
// context, options: https://github.com/component-driven/cypress-axe#cychecka11y
export default (
    node = null,
    config = {rules: []},
    {context = null, options = null} = {
        context: null,
        options: null,
    },
    delay = 0
) => {
    init({
        ...config,
        rules: off
            .map(id => ({
                id,
                enabled: false,
            }))
            .concat(config.rules),
    });

    // add a .wait to make sure a render cycle is run before checkA11y so that
    // the styles for the element(s) can be applied before a11y tests are executed
    return mount(node).wait(delay).checkA11y(context, options, terminalLog);
};

Contributor guide

No contributing guide indexed for this repository

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.

Research direction

Start with the cypress-axe configuration documented for cy.configureAxe and cy.checkA11y, then trace how init, mount, and checkA11y pass axe options and context. Determine whether the color-contrast rule can target only elements with the disabled attribute; done should be a documented or supported way to exclude those fields without disabling the rule globally.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, testing-qa
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.