question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

axe extension in chrome causing disruptive behavior for syntax highlighting with eleventy-plugin-syntaxhighlight

See original GitHub issue

Hello dequelabs team!

This issue is in reference to Major issue with syntax-highlight plugin for multi-line code blocks within eleventy-plugin-syntaxhighlight.

I wanted to inform you that when I have the chrome extension axe - Web Accessibility Testing enabled, it causes disruptive behavior to eleventy-plugin-syntaxhighlight for highlighting fenced code blocks with Prism.

It causes multi-line fenced code blocks to become single line and disregards the white-space: pre style in the Prism stylesheet. It looks like its causing white-space: pre to be white-space: nowrap where everything is in a single line. (Not sure if this is the exact cause but thats what it looks like)

Expectation: Expect the accessibility testing extension not to cause disruptive behavior to the syntax highlighting that is handled by Prism.js within eleventy-plugin-syntaxhighlight.

Actual: Having the axe - Web Accessibility Testing extension enabled with access to “all sites” causes multi-line code blocks that are highlighted with eleventy-plugin-syntaxhighlight to have their styling messed up causing everything to be in a single line ignoring the CSS that should create line breaks.

Screenshot of a multi-line code block that is forced to be single line when the accessibility extension is enabled with “site access: all sites”

Screen Shot 2020-12-21 at 4 15 03 PM

Screenshot of axe extension site access details

Screen Shot 2020-12-21 at 4 02 20 PM

Motivation: I want the behavior to be changed so I can continue to use the axe - Web Accessibility Testing extension alongside eleventy-plugin-syntaxhighlight without having to configure any non-default behavior.

Currently as a workaround, @5t3ph pointed out that having the extension enabled with site access: on click is one way to avoid the issue I’ve stated above.

Screen Shot 2020-12-21 at 4 09 18 PM

axe-core version: 4.6.2

Browser and Assistive Technology versions

For Tooling issues:
- Node version: v11.0.0
- Platform:  MacOS

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
scurkercommented, Jan 15, 2021

Closing this issue in favor of #2686. Please continue discussion there.

1reaction
darekkaycommented, Jan 9, 2021

Same issue as in #2686

Read more comments on GitHub >

github_iconTop Results From Across the Web

axe Chrome Browser Extension for Accessibility Testing | Deque
The free axe DevTools Google Chrome extension is ideal for dev teams to test web apps to help identify & resolve common accessibility...
Read more >
axe DevTools - Web Accessibility Testing
Find and fix more accessibility issues during website development with axe DevTools. The free axe DevTools browser extension is a fast, ...
Read more >
How to get the most out of Deque's axe DevTools accessibility ...
The free axe DevTools browser extension is available in Chrome, Edge, and Firefox. Additional features can be unlocked in Chrome and Edge by ......
Read more >
Easy Accessibility Testing with aXe - YouTube
In the Chrome extension, it'll say aXe rather than accessibility. ... the code inspector and highlights the piece of code that's causing the ......
Read more >
Deque axe Browser Extension Testing
Deque's axe browser extension is a free automated testing tool. ... Elements tab will display, and the HTML code that caused the defect...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found