Repository: raunofreiberg/axe-mode
Branch: master
Commit: 6305ac415ff4
Files: 19
Total size: 22.7 KB
Directory structure:
gitextract_xzzs6w27/
├── .gitignore
├── LICENSE
├── README.md
├── example/
│ ├── .gitignore
│ ├── .npmignore
│ ├── index.html
│ ├── index.tsx
│ ├── package.json
│ ├── styles.css
│ └── tsconfig.json
├── package.json
├── src/
│ ├── axe-mode.tsx
│ ├── icons.tsx
│ ├── index.tsx
│ └── styles.css
├── test/
│ └── blah.test.tsx
├── tsconfig.json
├── tsdx.config.js
└── types/
└── index.d.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
*.log
.DS_Store
node_modules
.cache
dist
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2020 raunofreiberg
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# axe-mode
> WIP
This project is an attempt to leverage [`axe-core`](https://github.com/dequelabs/axe-core) in a component to find accessibility violations and provide information on how to resolve them.
Currently, this only works for React.
[See it in action on CodeSandbox.](https://codesandbox.io/s/youthful-pare-oxtcc)
## Usage
Install the library:
```bash
yarn add axe-mode -D
```
or
```bash
npm install axe-mode --save-dev
```
Import the component and wrap it around your application or any other component tree you would like to validate:
```tsx
import AxeMode from 'axe-mode';
function App() {
return (
<AxeMode disabled={process.env.NODE_ENV !== 'development'}>
<h1 aria-expanded="123">Hello world!</h1>
</AxeMode>
);
}
```
Launch your application as usual. Any violations of accessibility will show up as an overlay. If you wish to interact with your application, overlays can be toggled on/off with <kbd>Ctrl + I</kbd>.
You can safely leave the component around your application since [this whole library and its dependencies will be dropped in production.](https://github.com/raunofreiberg/axe-mode/blob/master/src/index.tsx#L7)
**Note**: Make sure to only run in production by using the `disabled` prop with your environment variable.
================================================
FILE: example/.gitignore
================================================
.now
================================================
FILE: example/.npmignore
================================================
node_modules
.cache
dist
================================================
FILE: example/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Playground</title>
</head>
<body>
<div id="root"></div>
<script src="./index.tsx"></script>
</body>
</html>
================================================
FILE: example/index.tsx
================================================
import 'react-app-polyfill/ie11';
import './styles.css';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import AxeMode from '../src/index';
function Subtitle() {
return <h6>Accessibility testing componentized</h6>;
}
function Image() {
const ref = React.useRef<HTMLImageElement | null>(null);
React.useEffect(() => {
// For testing whether violations from
// DOM mutations are displayed.
const id = setTimeout(() => {
ref?.current?.setAttribute('alt', 'Avatar');
}, 3000);
return () => clearTimeout(id);
}, [ref]);
return (
<img
ref={ref}
src="https://avatars1.githubusercontent.com/u/23662329?v=4"
width="40"
height="40"
/>
);
}
const App = () => {
return (
<AxeMode>
<header>
<a href="#" className="iconLink" id="hey">
<svg width="24" height="24" viewBox="0 0 24 24">
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
fill="currentColor"
/>
</svg>
</a>
<Image />
</header>
<main>
<div className="login">
<h1>Axe Mode</h1>
<Subtitle />
<input placeholder="Username" />
<input placeholder="Password" />
<button
aria-expanded={'foo' as any}
onClick={() => console.log('yo')}
>
Label
</button>
</div>
</main>
</AxeMode>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
================================================
FILE: example/package.json
================================================
{
"name": "example",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"dependencies": {
"react-app-polyfill": "^1.0.0"
},
"alias": {
"react": "../node_modules/react",
"react-dom": "../node_modules/react-dom/profiling",
"scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
},
"devDependencies": {
"@types/react": "^16.9.11",
"@types/react-dom": "^16.8.4",
"parcel": "^1.12.3",
"typescript": "^3.4.5"
}
}
================================================
FILE: example/styles.css
================================================
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 200vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.iconLink {
display: inline-block;
width: 24px;
height: 24px;
color: #222328;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background: white;
height: 64px;
padding: 0 32px;
box-shadow: inset 0 -1px 0 0 #e6ebf4, 0 4px 8px 0 rgba(189, 192, 207, .08);
}
header img {
border-radius: 50%;
}
input {
height: 40px;
padding: 8px 16px;
margin: 0;
border-radius: 4px;
border: 1px solid #E6EBF4;
appearance: none;
font-size: 14px;
background-color: #FAFAFC;
color: #222328;
}
.login button {
padding: 0 16px;
background: #222328;
height: 40px;
margin: 0;
border: 0;
border-radius: 4px;
color: white;
font-weight: 500;
text-transform: uppercase;
font-size: 14px;
cursor: pointer;
width: 100%;
}
main {
height: calc(100vh - 64px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.login {
display: grid;
grid-gap: 16px;
width: 300px;
}
.login h1, .login h6 {
text-align: center;
}
.login h1, h6 {
margin: 0;
}
h6 {
color: #505366;
line-height: 24px;
}
================================================
FILE: example/tsconfig.json
================================================
{
"compilerOptions": {
"allowSyntheticDefaultImports": false,
"target": "es5",
"module": "commonjs",
"jsx": "react",
"moduleResolution": "node",
"noImplicitAny": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"removeComments": true,
"strictNullChecks": true,
"preserveConstEnums": true,
"sourceMap": true,
"lib": ["es2015", "es2016", "dom"],
"baseUrl": ".",
"types": ["node"]
}
}
================================================
FILE: package.json
================================================
{
"version": "0.0.1-alpha.2",
"license": "MIT",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
"files": [
"dist",
"src"
],
"engines": {
"node": ">=10"
},
"scripts": {
"start": "tsdx watch",
"build": "tsdx build",
"test": "tsdx test --passWithNoTests",
"lint": "tsdx lint",
"prepare": "tsdx build"
},
"peerDependencies": {
"react": ">=16"
},
"husky": {
"hooks": {
"pre-commit": "tsdx lint"
}
},
"prettier": {
"printWidth": 80,
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
},
"name": "axe-mode",
"author": "raunofreiberg",
"module": "dist/axe-mode.esm.js",
"devDependencies": {
"@types/react": "^16.9.34",
"@types/react-dom": "^16.9.7",
"husky": "^4.2.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"rollup-plugin-postcss": "^3.1.1",
"tsdx": "^0.13.2",
"tslib": "^1.11.1",
"typescript": "^3.8.3"
},
"dependencies": {
"@reach/auto-id": "^0.10.1",
"@reach/observe-rect": "^1.1.0",
"@reach/popover": "^0.10.1",
"axe-core": "^3.5.3"
},
"eslintConfig": {
"extends": "react-app",
"overrides": [
{
"files": [
"example/*"
],
"rules": {
"jsx-a11y/alt-text": 0,
"jsx-a11y/anchor-is-valid": 0,
"jsx-a11y/accessible-emoji": 0
}
}
]
},
"eslintIgnore": ["dist"]
}
================================================
FILE: src/axe-mode.tsx
================================================
import './styles.css';
import * as React from 'react';
import axe, { ElementContext, Result } from 'axe-core';
import Popover from '@reach/popover';
import observeRect from '@reach/observe-rect';
import { IconMinor, IconModerate, IconSevere } from './icons';
type ViolationsByNode = Array<{ node: string; violations: Result[] }>;
type AxeCoreModule = typeof axe;
function getValidator(axe: AxeCoreModule) {
return (node: ElementContext): Promise<Result[]> => {
return new Promise((resolve, reject) => {
axe.run(node, { reporter: 'v2' }, (error, results) => {
if (error) reject(error);
resolve(results.violations);
});
});
};
}
// Copied from:
// https://stackoverflow.com/questions/29321742/react-getting-a-component-from-a-dom-element-for-debugging
// ¯\_(ツ)_/¯
function getComponentFromNode(node: HTMLElement): string {
const [component] = Object.keys(node)
.filter(key => key.startsWith('__reactInternalInstance$'))
.map((key: string) => {
const fiberNode = (node as any)[key];
const component = fiberNode && fiberNode._debugOwner;
return component.type.displayName || component.type.name;
});
return component;
}
function segmentViolationsByNode(violations: Result[]): ViolationsByNode {
// Find all DOM nodes affected by the violations
const nodes = violations.flatMap(violation =>
violation.nodes.flatMap(node => node.target)
);
// Based on the found nodes, find all violations that they caused
return nodes.map(node => {
const violationsByNode = violations.filter(violation =>
violation.nodes.some(n => n.target.includes(node))
);
return {
node,
violations: violationsByNode,
};
});
}
function setOverlayPosition(
overlayNode: HTMLElement,
{ width, height, x, y }: DOMRect
) {
overlayNode.style.setProperty('width', `${width}px`);
overlayNode.style.setProperty('height', `${height}px`);
overlayNode.style.setProperty('left', `${x}px`);
overlayNode.style.setProperty('top', `${y}px`);
}
function Violation({
target,
violations,
}: {
target: any;
violations: Result[];
}) {
const [open, setOpen] = React.useState(false);
const targetRef = React.useRef<HTMLElement | null>(null);
const popoverRef = React.useRef<HTMLDivElement | null>(null);
const overlayRef = React.useRef<HTMLElement | null>(null);
function toggle() {
setOpen(prevOpen => !prevOpen);
}
function close() {
setOpen(false);
}
React.useEffect(() => {
const targetNode = document.querySelector(target);
const overlayNode = document.createElement('axe-mode-overlay');
targetRef.current = targetNode;
overlayRef.current = overlayNode;
const { observe, unobserve } = observeRect(targetNode, targetRect => {
setOverlayPosition(overlayNode, targetRect);
});
const bounds = targetNode.getBoundingClientRect();
setOverlayPosition(overlayNode, bounds);
observe();
document.body.appendChild(overlayNode);
overlayNode.addEventListener('mousedown', toggle);
return () => {
unobserve();
document.body.removeChild(overlayNode);
overlayNode.removeEventListener('mousedown', toggle);
};
}, [target]);
React.useEffect(() => {
function listener(e: MouseEvent) {
const eventTarget = e.target as Node;
const isTargetInPopover =
eventTarget === overlayRef.current ||
popoverRef.current?.contains(eventTarget);
if (!isTargetInPopover) {
close();
}
}
if (open) {
document.addEventListener('mousedown', listener);
}
return () => {
document.removeEventListener('mousedown', listener);
};
}, [open, target]);
if (!open) {
return null;
}
return (
<Popover ref={popoverRef} targetRef={targetRef} className="popover">
<div className="controls">
<h2>Accessibility violation</h2>
<button className="close" aria-label="Close popover" onClick={close}>
<svg viewBox="0 0 24 24">
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
fill="currentColor"
fillRule="evenodd"
/>
</svg>
</button>
</div>
<code>
{getComponentFromNode(document.querySelector(target)) || target}
</code>
{violations.map(violation => {
const [{ any, all }] = violation.nodes.filter(node =>
node.target.includes(target)
);
return (
<article key={violation.id} className="checks">
<div className="header">
{violation.impact === 'minor' ? (
<IconMinor />
) : violation.impact === 'moderate' ? (
<IconModerate />
) : (
<IconSevere />
)}
<h3>
<a
href={violation.helpUrl}
target="_blank"
rel="noopener noreferrer"
>
{violation.help}
</a>
</h3>
</div>
{!!all.length && (
<>
<small>Fix all of the following:</small>
<ul>
{all.map(check => (
<li key={check.id}>{check.message}</li>
))}
</ul>
</>
)}
{!!any.length && (
<>
<small>Fix any of the following:</small>
<ul>
{any.map(check => (
<li key={check.id}>{check.message}</li>
))}
</ul>
</>
)}
</article>
);
})}
</Popover>
);
}
export interface AxeModeProps {
children: React.ReactElement | React.ReactElement[];
disabled?: boolean;
}
export default function AxeModeImpl({ children, disabled }: AxeModeProps) {
const [violations, setViolations] = React.useState<Result[]>([]);
const [interactive, setInteractive] = React.useState(false);
const idleId = React.useRef<number | null>(null);
const childrenRef = React.useRef<HTMLElement | null>(null);
React.useEffect(() => {
if (disabled || interactive || !childrenRef.current) {
return;
}
if (idleId.current && 'cancelIdleCallback' in window) {
window.cancelIdleCallback(idleId.current);
idleId.current = null;
}
function getViolations() {
const validateNode = getValidator(axe);
validateNode(childrenRef.current as ElementContext).then(setViolations);
}
function callback() {
// Safari does not support requestIdleCallback 😔
if ('requestIdleCallback' in window) {
idleId.current = window.requestIdleCallback(getViolations);
} else {
getViolations();
}
}
const observer = new MutationObserver(callback);
// We need to run this once so we don't wait for
// DOM mutations to display the violations.
callback();
observer.observe(childrenRef.current, {
attributes: true,
childList: true,
subtree: true,
});
return () => {
if (idleId.current && 'cancelIdleCallback' in window) {
window.cancelIdleCallback(idleId.current);
idleId.current = null;
}
observer.disconnect();
};
}, [disabled, interactive]);
React.useEffect(() => {
function listener(e: KeyboardEvent) {
if (e.ctrlKey && e.key === 'i') {
setInteractive(!interactive);
}
}
document.addEventListener('keydown', listener);
return () => {
document.removeEventListener('keydown', listener);
};
}, [interactive]);
const violationsByNode = segmentViolationsByNode(violations);
if (disabled || interactive) {
return <>{children}</>;
}
console.log(violationsByNode);
return (
<>
<span ref={childrenRef}>{children}</span>
{violationsByNode.map(({ node, violations }, index) => (
<Violation key={index} target={node} violations={violations} />
))}
</>
);
}
================================================
FILE: src/icons.tsx
================================================
import * as React from 'react';
import { useId } from '@reach/auto-id';
export const IconMinor: React.FC<Omit<
React.ComponentPropsWithoutRef<'svg'>,
'viewBox'
>> = props => {
const titleId = `minor-icon-${useId(props.id)}`;
return (
<svg
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-labelledby={titleId}
{...props}
viewBox="0 0 500 500"
>
<title id={titleId}>Minor impact</title>
<path
d="M439.8,30.73C330.44,13.58,233.42,80.12,124.31,73.18l.13-1.74a31.5,31.5,0,0,0-62.83-4.65L34.12,438.28A31.49,31.49,0,0,0,63.21,472c.79.06,1.57.09,2.36.09A31.51,31.51,0,0,0,97,442.93l6.85-92.58c109,16.51,205.76-49.64,314.59-42.6a31.22,31.22,0,0,0,33.21-29.06q7.15-107.8,14.3-215.09A31.13,31.13,0,0,0,439.8,30.73Z"
fill="#FF9800"
/>
</svg>
);
};
export const IconModerate: React.FC<Omit<
React.ComponentPropsWithoutRef<'svg'>,
'viewBox'
>> = props => {
const titleId = `moderate-icon-${useId(props.id)}`;
return (
<svg
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-labelledby={titleId}
{...props}
viewBox="0 0 500 500"
>
<title id={titleId}>Moderate impact</title>
<path
d="M250,18C121.87,18,18,121.87,18,250S121.87,482,250,482,482,378.13,482,250,378.13,18,250,18Zm-20.6,89.34h42a14.54,14.54,0,0,1,14.52,15.35l-8.33,148.79A14.54,14.54,0,0,1,263,285.21H237.4a14.53,14.53,0,0,1-14.52-13.76l-8-148.79A14.54,14.54,0,0,1,229.4,107.34Zm49.35,287.19q-10.26,10.13-28.87,10.13-19.08,0-29-10.25T211,366q0-18.39,9.78-28.52t29.1-10.13q19.32,0,29.22,10T289,366Q289,384.4,278.75,394.53Z"
fill="#FF5B5B"
/>
</svg>
);
};
export const IconSevere: React.FC<Omit<
React.ComponentPropsWithoutRef<'svg'>,
'viewBox'
>> = props => {
const titleId = `severe-icon-${useId(props.id)}`;
return (
<svg
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-labelledby={titleId}
{...props}
viewBox="0 0 500 500"
>
<title id={titleId}>Severe impact</title>
<path
d="M492.39,420,282.09,44.09C268.05,19,232,19,217.91,44.09L7.61,420c-13.71,24.51,4,54.72,32.09,54.72H460.3C488.38,474.73,506.1,444.52,492.39,420Zm-263-291.94h42a14.54,14.54,0,0,1,14.52,15.35l-8.33,148.79A14.54,14.54,0,0,1,263,305.94H237.4a14.54,14.54,0,0,1-14.52-13.76l-8-148.79A14.53,14.53,0,0,1,229.4,128.07Zm49.35,287.19q-10.26,10.13-28.87,10.13-19.08,0-29-10.25t-9.9-28.4q0-18.37,9.78-28.51t29.1-10.13q19.32,0,29.22,10t9.9,28.63Q289,405.13,278.75,415.26Z"
fill="#FFB963"
/>
</svg>
);
};
================================================
FILE: src/index.tsx
================================================
import * as React from 'react';
import { AxeModeProps } from './axe-mode';
const AxeMode = React.lazy(() => import('./axe-mode'));
export default function Loader(props: AxeModeProps) {
if (process.env.NODE_ENV === 'development') {
return (
<React.Suspense fallback={null}>
<AxeMode {...props} />
</React.Suspense>
);
}
return <React.Fragment>{props.children}</React.Fragment>;
}
export { AxeModeProps };
================================================
FILE: src/styles.css
================================================
@keyframes slideDown {
0% {
opacity: 0;
transform: translateY(-8px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
axe-mode-overlay {
position: fixed;
background: rgba(255, 91, 91, 0.2);
border: 1px solid rgb(255, 91, 91);
border-radius: 4px;
cursor: pointer;
}
.popover {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
position: absolute;
border-radius: 4px;
box-shadow: 0 2px 8px 0 rgba(189, 192, 207, 0.16);
border: 1px solid #E6EBF4;
background-color: white;
padding: 16px;
margin: 8px 0;
z-index: 1337;
animation: slideDown 0.4s cubic-bezier(.2, .8, .4, 1);
}
.popover h2 {
margin: 0;
font-size: 20px;
color: #222328;
}
.popover ul {
padding-left: 14px;
margin-top: 8px;
margin-bottom: 0;
list-style-type: '・ ';
}
.popover li {
padding: 0;
max-width: 40ch;
margin: 8px 0 0 0;
font-size: 14px;
color: #505366;
}
.popover small {
display: block;
font-size: 12px;
color: #BDC0CF;
margin: 4px 0 8px 0;
}
.popover h2 {
max-width: 40ch;
}
.popover a {
color: #6469FF;
}
.popover code {
font-size: 12px;
line-height: 20px;
padding-left: 5px;
padding-right: 5px;
background-color: rgba(100, 105, 255, 0.05);
color: #6469FF;
border-radius: 3px;
}
.popover .checks {
margin-top: 16px;
}
.popover .checks .header {
display: flex;
font-size: 1.2rem;
margin: 0.5em 0;
align-items: center;
}
.popover .checks .header svg {
width: 1em;
height: 1em;
margin-right: 0.325em;
}
.popover .checks .header h3 {
font-size: 1em;
margin: 0;
}
.controls {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.close {
width: 24px;
height: 24px;
border: 0;
background: none;
padding: 0;
margin: 0;
cursor: pointer;
}
================================================
FILE: test/blah.test.tsx
================================================
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Thing } from '../src';
describe('it', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<Thing />, div);
ReactDOM.unmountComponentAtNode(div);
});
});
================================================
FILE: tsconfig.json
================================================
{
"include": ["src", "types"],
"compilerOptions": {
"module": "esnext",
"lib": ["dom", "esnext"],
"importHelpers": true,
"declaration": true,
"sourceMap": true,
"rootDir": "./src",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"*": ["src/*", "node_modules/*"]
},
"jsx": "react",
"esModuleInterop": true
}
}
================================================
FILE: tsdx.config.js
================================================
const postcss = require('rollup-plugin-postcss');
const path = require('path');
module.exports = {
rollup(config, options) {
config.plugins = [postcss(), ...config.plugins];
// To get code splitting to work, we need to set output.dir instead of
// output.file, which is what TSDX does by default
const { file, ...output } = config.output || {};
config.output = {
...output,
dir: path.join(__dirname, 'dist'),
};
return config;
},
};
================================================
FILE: types/index.d.ts
================================================
type RequestIdleCallbackOptions = {
timeout: number;
};
type RequestIdleCallbackDeadline = {
readonly didTimeout: boolean;
timeRemaining: () => number;
};
declare global {
// tsdx supports this out of the box, can be useful for omitting unused code
// from the prod bundle.
const __DEV__: boolean;
interface Window {
requestIdleCallback: (
callback: (deadline: RequestIdleCallbackDeadline) => void,
opts?: RequestIdleCallbackOptions
) => number;
cancelIdleCallback: (handle: number) => void;
}
}
export {};
gitextract_xzzs6w27/
├── .gitignore
├── LICENSE
├── README.md
├── example/
│ ├── .gitignore
│ ├── .npmignore
│ ├── index.html
│ ├── index.tsx
│ ├── package.json
│ ├── styles.css
│ └── tsconfig.json
├── package.json
├── src/
│ ├── axe-mode.tsx
│ ├── icons.tsx
│ ├── index.tsx
│ └── styles.css
├── test/
│ └── blah.test.tsx
├── tsconfig.json
├── tsdx.config.js
└── types/
└── index.d.ts
SYMBOL INDEX (16 symbols across 5 files)
FILE: example/index.tsx
function Subtitle (line 7) | function Subtitle() {
function Image (line 11) | function Image() {
FILE: src/axe-mode.tsx
type ViolationsByNode (line 8) | type ViolationsByNode = Array<{ node: string; violations: Result[] }>;
type AxeCoreModule (line 9) | type AxeCoreModule = typeof axe;
function getValidator (line 11) | function getValidator(axe: AxeCoreModule) {
function getComponentFromNode (line 25) | function getComponentFromNode(node: HTMLElement): string {
function segmentViolationsByNode (line 36) | function segmentViolationsByNode(violations: Result[]): ViolationsByNode {
function setOverlayPosition (line 54) | function setOverlayPosition(
function Violation (line 64) | function Violation({
type AxeModeProps (line 203) | interface AxeModeProps {
function AxeModeImpl (line 208) | function AxeModeImpl({ children, disabled }: AxeModeProps) {
FILE: src/index.tsx
function Loader (line 6) | function Loader(props: AxeModeProps) {
FILE: tsdx.config.js
method rollup (line 5) | rollup(config, options) {
FILE: types/index.d.ts
type RequestIdleCallbackOptions (line 1) | type RequestIdleCallbackOptions = {
type RequestIdleCallbackDeadline (line 4) | type RequestIdleCallbackDeadline = {
type Window (line 13) | interface Window {
Condensed preview — 19 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (25K chars).
[
{
"path": ".gitignore",
"chars": 41,
"preview": "*.log\n.DS_Store\nnode_modules\n.cache\ndist\n"
},
{
"path": "LICENSE",
"chars": 1069,
"preview": "MIT License\n\nCopyright (c) 2020 raunofreiberg\n\nPermission is hereby granted, free of charge, to any person obtaining a c"
},
{
"path": "README.md",
"chars": 1412,
"preview": "# axe-mode\n\n\n\n> WIP\n\nThis project is an attempt to leverage"
},
{
"path": "example/.gitignore",
"chars": 4,
"preview": ".now"
},
{
"path": "example/.npmignore",
"chars": 24,
"preview": "node_modules\n.cache\ndist"
},
{
"path": "example/index.html",
"chars": 342,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "example/index.tsx",
"chars": 1595,
"preview": "import 'react-app-polyfill/ie11';\nimport './styles.css';\nimport * as React from 'react';\nimport * as ReactDOM from 'reac"
},
{
"path": "example/package.json",
"chars": 571,
"preview": "{\n \"name\": \"example\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"start\": \"parc"
},
{
"path": "example/styles.css",
"chars": 1325,
"preview": "* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n height: 200vh;\n font-family: -apple-system, BlinkMacSystemFont, "
},
{
"path": "example/tsconfig.json",
"chars": 458,
"preview": "{\n \"compilerOptions\": {\n \"allowSyntheticDefaultImports\": false,\n \"target\": \"es5\",\n \"module\": \"commonjs\",\n \""
},
{
"path": "package.json",
"chars": 1438,
"preview": "{\n \"version\": \"0.0.1-alpha.2\",\n \"license\": \"MIT\",\n \"main\": \"dist/index.js\",\n \"typings\": \"dist/index.d.ts\",\n \"files\""
},
{
"path": "src/axe-mode.tsx",
"chars": 8157,
"preview": "import './styles.css';\nimport * as React from 'react';\nimport axe, { ElementContext, Result } from 'axe-core';\nimport Po"
},
{
"path": "src/icons.tsx",
"chars": 2577,
"preview": "import * as React from 'react';\nimport { useId } from '@reach/auto-id';\n\nexport const IconMinor: React.FC<Omit<\n React."
},
{
"path": "src/index.tsx",
"chars": 441,
"preview": "import * as React from 'react';\nimport { AxeModeProps } from './axe-mode';\n\nconst AxeMode = React.lazy(() => import('./a"
},
{
"path": "src/styles.css",
"chars": 1892,
"preview": "@keyframes slideDown {\n 0% {\n opacity: 0;\n transform: translateY(-8px);\n }\n 100% {\n opacity: 1;\n transfor"
},
{
"path": "test/blah.test.tsx",
"chars": 304,
"preview": "import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { Thing } from '../src';\n\ndescribe('it', ("
},
{
"path": "tsconfig.json",
"chars": 528,
"preview": "{\n \"include\": [\"src\", \"types\"],\n \"compilerOptions\": {\n \"module\": \"esnext\",\n \"lib\": [\"dom\", \"esnext\"],\n \"impor"
},
{
"path": "tsdx.config.js",
"chars": 480,
"preview": "const postcss = require('rollup-plugin-postcss');\nconst path = require('path');\n\nmodule.exports = {\n rollup(config, opt"
},
{
"path": "types/index.d.ts",
"chars": 550,
"preview": "type RequestIdleCallbackOptions = {\n timeout: number;\n};\ntype RequestIdleCallbackDeadline = {\n readonly didTimeout: bo"
}
]
About this extraction
This page contains the full source code of the raunofreiberg/axe-mode GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 19 files (22.7 KB), approximately 7.3k tokens, and a symbol index with 16 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.