Git Product home page Git Product logo

Comments (5)

certainlyakey avatar certainlyakey commented on June 18, 2024 1

Thanks, i updated and it worked! I checked color-contrast and valid-lang. I might be mistaken, but it seems that to work consistently one needs to copy all of a check object without omitting any property. I used this code as an testing sample in parameters, both in preview.ts and in a story:

axe: {
      timeout: 5000,
      waitForSelector: '.hydrated',
      config: {
        checks: [
          {
            "id": "valid-lang",
            "evaluate": "valid-lang-evaluate",
            "options": {
              "attributes": ["lang", "xml:lang", "vue-lang"]
            },
            "metadata": {
              "impact": "serious",
              "messages": {
                "pass": "Value of lang attribute is included in the list of valid languages",
                "fail": "Woot?"
              }
            }
          },
          {
            "id": "color-contrast",
            "evaluate": "color-contrast-evaluate",
            "options": {
              "ignoreUnicode": true,
              "ignoreLength": false,
              "ignorePseudo": true,
              "boldValue": 700,
              "boldTextPt": 14,
              "largeTextPt": 18,
              "contrastRatio": {
                "normal": {
                  "expected": 3.5
                },
                "large": {
                  "expected": 2
                }
              },
              "pseudoSizeThreshold": 0.25,
              "shadowOutlineEmMax": 0.2,
              "textStrokeEmMin": 0.03
            },
            "metadata": {
              "impact": "serious",
              "messages": {
                "pass": {
                  "default": "Element has sufficient color contrast of ${data.contrastRatio}",
                  "hidden": "Element is hidden"
                },
                "fail": {
                  "default": "Element has insufficient color contrast of ${data.contrastRatio} (foreground color: ${data.fgColor}, background color: ${data.bgColor}, font size: ${data.fontSize}, font weight: ${data.fontWeight}). Expected contrast ratio of ${data.expectedContrastRatio}",
                  "fgOnShadowColor": "Element has insufficient color contrast of ${data.contrastRatio} between the foreground and shadow color (foreground color: ${data.fgColor}, text-shadow color: ${data.shadowColor}, font size: ${data.fontSize}, font weight: ${data.fontWeight}). Expected contrast ratio of ${data.expectedContrastRatio}",
                  "shadowOnBgColor": "Element has insufficient color contrast of ${data.contrastRatio} between the shadow color and background color (text-shadow color: ${data.shadowColor}, background color: ${data.bgColor}, font size: ${data.fontSize}, font weight: ${data.fontWeight}). Expected contrast ratio of ${data.expectedContrastRatio}"
                },
                "incomplete": {
                  "default": "Unable to determine contrast ratio",
                  "bgImage": "Element's background color could not be determined due to a background image",
                  "bgGradient": "Element's background color could not be determined due to a background gradient",
                  "imgNode": "Element's background color could not be determined because element contains an image node",
                  "bgOverlap": "Element's background color could not be determined because it is overlapped by another element",
                  "complexTextShadows": "Element's contrast could not be determined because it uses complex text shadows",
                  "fgAlpha": "Element's foreground color could not be determined because of alpha transparency",
                  "elmPartiallyObscured": "Element's background color could not be determined because it's partially obscured by another element",
                  "elmPartiallyObscuring": "Element's background color could not be determined because it partially overlaps other elements",
                  "outsideViewport": "Element's background color could not be determined because it's outside the viewport",
                  "equalRatio": "Element has a 1:1 contrast ratio with the background",
                  "shortTextContent": "Element content is too short to determine if it is actual text content",
                  "nonBmp": "Element content contains only non-text characters",
                  "pseudoContent": "Element's background color could not be determined due to a pseudo element"
                }
              }
            }
          }
        ],
      },
    },

In the end, the issue for me wasn't solved by ignorePseudo, but it was the fact that i had set a different browser to run the tests (Firefox) with which didn't support a CSS feature the contrast relied on.

I am pretty sure however this addition is very valuable and we will use it in future.

from axe-storybook-testing.

ahuth avatar ahuth commented on June 18, 2024

Hi, thanks for raising this issue. You're right - there's no way right now to pass anything to axe.configure, unfortunately 😞.

I'll work on adding the ability to pass config to axe.configure today.

from axe-storybook-testing.

ahuth avatar ahuth commented on June 18, 2024

@certainlyakey can you give me more specifics about the color contrast issue you're running into, and which version of axe-core you're using?

I'm trying to come up with a way to test out a solution, but can't reproduce the issues from dequelabs/axe-core#2781 (which seem to be mostly ::after content that doesn't overlap any text).

nvm, I'll use the branding config to test this.

from axe-storybook-testing.

ahuth avatar ahuth commented on June 18, 2024

This should be fixed in v7.2.0.

@certainlyakey can you try it out, please, and let me know if there's still an issue?

You can now pass a config parameter (to either the story, component, or globally) with anything you want to pass to axe.configure:

parameters: {
  axe: {
    config: {
      checks: [ ... ]
    }
  }
}

from axe-storybook-testing.

ahuth avatar ahuth commented on June 18, 2024

it seems that to work consistently one needs to copy all of a check object without omitting any property

Ah, I didn't know that. Maybe there's a way to make that easier.

In any case, I agree this is valuable. Thanks for the request!

from axe-storybook-testing.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.