Comments (5)
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.
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.
@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.
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.
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)
- Option to only fail on certain impact levels HOT 4
- Conver to use ES modules?
- Global disabledRules config option HOT 3
- Tests automatically fail when there are a lot of Stories to test HOT 6
- Running same axe-storybook command produces inconsistent results HOT 17
- Color Contrast discrepancy HOT 8
- Axe-storybook misidentifying background color HOT 4
- Storybook 6.4 support HOT 3
- Unexpected token error when running axe-storybook as part of CI HOT 4
- Script always fails with error "Storybook object not found on window. Open your storybook and check the console for errors." HOT 13
- Add option to pass axe options as a story parameter HOT 1
- Error with Storybook 6.5.0-alpha.64 HOT 5
- Support selectors for disabledRule HOT 5
- Allow timeout to be specified on individual stories
- reporter options markdown and doc fail to run tests HOT 2
- Github actions - Error when run axe-storybook with chromatic HOT 3
- Feature request: warn vs error mode HOT 7
- browserType.launch: Executable doesn't exist at /home/runner/.cache/ms-playwright/chromium-1084/chrome-linux/chrome HOT 5
- Flaky accessibility test build HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from axe-storybook-testing.