Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

mix-blend-mode: color; breaks Accessibility score in recent lighthouse releases #15497

Closed
2 tasks done
abhinav-saini opened this issue Sep 28, 2023 · 5 comments
Closed
2 tasks done

mix-blend-mode: color; breaks Accessibility score in recent lighthouse releases #15497

abhinav-saini opened this issue Sep 28, 2023 · 5 comments
Assignees
@connorjclark
Labels
bug P1.5 upstream-action-required

Comments

@abhinav-saini
Copy link

FAQ

URL

https://www.edsleskog.com/

What happened?

Earlier the 'accessibility' score for the mentioned domain used to return in the range of 0.9 to 0.95

But in recent releases, it is being reported as null. Shared a quick code to reproduce.

In earlier version of Lighthouse@10.0.2 it is still working fine and returning the correct value.

What did you expect?

Accessibility score should be normally returned with a value (non-null)

What have you tried?

const lighthouse = require('lighthouse/core/index.cjs');
const chromeLauncher = require('chrome-launcher');
(async()=>{
  const chrome = await chromeLauncher.launch({
    chromeFlags: [
      '--no-first-run',
      '--headless=new',
      '--no-zygote',
      '--disable-gpu',
      '--no-sandbox',
      '--disable-dev-shm-usage',
    ],
  });

  const options = {
    logLevel: 'error',
    output: 'html',
    maxWaitForLoad: 60000,
    onlyCategories: [
      'accessibility',
      'best-practices',
      'performance',
      'pwa',
      'seo',
    ],
    port: chrome.port,
    hostname: '127.0.0.1',
  };

  const result = await lighthouse('https://www.edsleskog.com/', options);
  console.log(result.lhr.categories.accessibility.score);
  process.exit(0);
})();

How were you running Lighthouse?

node

Lighthouse Version

11.1.0

Chrome Version

No response

Node Version

No response

OS

No response

Relevant log output

No response
@adamraine
Copy link
Member

adamraine commented Sep 28, 2023 •
edited
Loading

This looks like the following upstream bug in axe-core: dequelabs/axe-core#4170

Note: since we use the minified axe bundle this error appears as axe-core Error: Kp[a] is not a function instead of blendFunctions[blendMode] is not a function like the upstream error reports.

@adamraine adamraine changed the title Accessibility score returned as null in recent lighthouse releases mix-blend-mode: color; breaks Accessibility score in recent lighthouse releases Sep 28, 2023
@adamraine adamraine mentioned this issue Dec 7, 2023
Closed
2 tasks
@Alpdog14
Copy link

Alpdog14 commented Mar 7, 2024

This is still causing issues on my corporate website, does anyone know when Axe-core will be resolving this Lighthouse issue

@adamraine
Copy link
Member

This should be resolved by #15887 which will ship in the next Lighthouse release.

@BillyGalbreath
Copy link

BillyGalbreath commented Apr 10, 2024 •
edited
Loading

This doesn't seem to be fixed.

Here is a little test case to trigger the issue:

<html>
<body style="mix-blend-mode: plus-lighter">
Hmm..
</body>
</html>

Run lighthouse on that, even using axe-core v4.9.0 it still errors on accessibility with blendFunctions[blendMode] is not a function

Tested various modes, these are the ones that error: plus-lighter, luminosity, color, saturation, hue

cc: @straker

@straker
Copy link

straker commented Apr 10, 2024

@BillyGalbreath Hu, both plus-lighter and plus-darker seem to be completely different in terms of the other blend modes. All other blend-mode values are listed in the blending section of the spec, but plus-lighter and plus-darker affect the the algorithm step before blending. Please open an issue in axe-core so we can track these other values.

luminosity, color, saturation, hue should all work (tested on latest axe-core)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@connorjclark connorjclark

Labels
bug P1.5 upstream-action-required
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@BillyGalbreath @Alpdog14 @straker @connorjclark @adamraine @abhinav-saini @devtools-bot