' . wp_kses_post( $simplified_summary_heading ) . '
' . wp_kses_post( $simplified_summary ) . '
12 |
13 |
38 |
--------------------------------------------------------------------------------
/partials/custom-meta-box.php:
--------------------------------------------------------------------------------
1 |
9 |
14 |
15 |
16 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
33 |
34 |
35 |
36 |
37 |
10 |
11 |
75 |
--------------------------------------------------------------------------------
/partials/pro-callout.php:
--------------------------------------------------------------------------------
1 |
9 |
12 |
54 |
60 |
67 |
74 | -
13 |
- 14 | 23 | 24 |
- 25 | 33 | 34 |
- 35 | 43 | 44 |
10 |  ); ?>assets/images/edac-emblem.png)
15 |
42 | 46 | 47 | 48 | 49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/patches/@wordpress+env+8.8.0.patch:
--------------------------------------------------------------------------------
1 | # Update to give us permission to modify port routing.
2 |
3 | diff --git a/node_modules/@wordpress/env/lib/commands/run.js b/node_modules/@wordpress/env/lib/commands/run.js
4 | index def29b6..fc127ce 100644
5 | --- a/node_modules/@wordpress/env/lib/commands/run.js
6 | +++ b/node_modules/@wordpress/env/lib/commands/run.js
7 | @@ -85,6 +85,7 @@ function spawnCommandDirectly( config, container, command, envCwd, spinner ) {
8 | envCwd,
9 | '--user',
10 | hostUser.fullUser,
11 | + '--privileged'
12 | ];
13 |
14 | if ( ! process.stdout.isTTY ) {
15 |
--------------------------------------------------------------------------------
/phpstan.neon:
--------------------------------------------------------------------------------
1 | parameters:
2 | level: 2
3 | paths:
4 | - .
5 | scanDirectories:
6 | - %currentWorkingDirectory%/vendor
7 | excludePaths:
8 | analyse:
9 | - %currentWorkingDirectory%/vendor/*
10 | - %currentWorkingDirectory%/node_modules/*
11 | - %currentWorkingDirectory%/tests/*
12 | fileExtensions:
13 | - php
14 |
--------------------------------------------------------------------------------
/phpunit.dev.xml:
--------------------------------------------------------------------------------
1 |
2 |
15 | 16 | 17 |
18 |
19 |
30 |
39 |
40 |
41 | -
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
42 | 46 | 47 | 48 | 49 |
elements with a role of "button" or elements with role="button", without href or tabindex
32 | const elementsToFocus = document.querySelectorAll(
33 | 'div[role="button"]:not([tabindex]), a[role="button"]:not([tabindex]):not([href])'
34 | );
35 |
36 | // Loop through each element and add tabindex="0" to make it focusable.
37 | elementsToFocus.forEach( ( element ) => {
38 | // Don't add tabindex 0 to elements that alaredy have -1.
39 | if ( element.hasAttribute( 'tabindex' ) && element.getAttribute( 'tabindex' ) === '-1' ) {
40 | return;
41 | }
42 | element.setAttribute( 'tabindex', '0' );
43 | element.classList.add( 'edac-focusable' );
44 | } );
45 | };
46 |
47 | export default TabindexFix;
48 |
--------------------------------------------------------------------------------
/src/frontendFixes/Fixes/underlineFix.js:
--------------------------------------------------------------------------------
1 | const ForceUnderlineFixData = window.edac_frontend_fixes?.underline || {
2 | enabled: false,
3 | };
4 |
5 | const ForceUnderlineFix = () => {
6 | if ( ! ForceUnderlineFixData.enabled ) {
7 | return;
8 | }
9 |
10 | // Apply underline to any link that is not within a `nav` element.
11 | // Using JavaScript ensures this style takes precedence over conflicting CSS rules.
12 | const targets = document.querySelectorAll( ForceUnderlineFixData.target );
13 |
14 | targets.forEach( function( target ) {
15 | // Early return if the element is inside a `nav` element or an element with role="navigation"
16 | if ( target.closest( 'nav' ) || target.closest( '[role="navigation"]' ) ) {
17 | return;
18 | }
19 |
20 | // Apply underline style
21 | target.style.textDecoration = 'underline';
22 |
23 | // Store the original styles in data-* attributes
24 | target.setAttribute( 'data-original-outline', target.style.outlineWidth );
25 | target.setAttribute( 'data-original-offset', target.style.outlineOffset );
26 | target.setAttribute( 'data-original-color', target.style.outlineColor );
27 |
28 | const textColor = target.style.color; // Capture the text color separately
29 |
30 | target.addEventListener( 'mouseenter', function() {
31 | target.style.textDecoration = 'none';
32 | } );
33 |
34 | target.addEventListener( 'mouseleave', function() {
35 | target.style.textDecoration = 'underline';
36 | } );
37 |
38 | target.addEventListener( 'focusin', function() {
39 | let newOutline = '2px';
40 | if ( target.style.outlineWidth === '2px' ) {
41 | newOutline = '4px';
42 | }
43 | // Increase outline thickness and adjust color and offset to ensure a visible focus indicator.
44 | target.style.outlineWidth = newOutline;
45 | target.style.outlineColor = textColor;
46 | target.style.outlineOffset = '2px';
47 | } );
48 |
49 | target.addEventListener( 'focusout', function() {
50 | // Restore the original styles from data-* attributes
51 | target.style.outlineWidth = target.getAttribute( 'data-original-outline' );
52 | target.style.outlineColor = target.getAttribute( 'data-original-color' );
53 | target.style.outlineOffset = target.getAttribute( 'data-original-offset' );
54 | } );
55 | } );
56 | };
57 |
58 | export default ForceUnderlineFix;
59 |
--------------------------------------------------------------------------------
/src/frontendFixes/index.js:
--------------------------------------------------------------------------------
1 | const edacFrontendFixes = window.edac_frontend_fixes || {};
2 |
3 | if ( edacFrontendFixes?.skip_link?.enabled ) {
4 | // lazy import the module
5 | import( /* webpackChunkName: "skip-link" */ './Fixes/skipLinkFix' ).then( ( skipLinkFix ) => {
6 | skipLinkFix.default();
7 | } );
8 | }
9 |
10 | if ( edacFrontendFixes?.lang_and_dir?.enabled ) {
11 | // lazy import the module
12 | import( /* webpackChunkName: "aria-hidden" */ './Fixes/langAndDirFix' ).then( ( langAndDirFix ) => {
13 | langAndDirFix.default();
14 | } );
15 | }
16 |
17 | if ( edacFrontendFixes?.tabindex?.enabled ) {
18 | // lazy import the module
19 | import( /* webpackChunkName: "tabindex" */ './Fixes/tabindexFix' ).then( ( tabindexFix ) => {
20 | tabindexFix.default();
21 | } );
22 | }
23 |
24 | if ( edacFrontendFixes?.meta_viewport_scalable?.enabled ) {
25 | // lazy import the module
26 | import( /* webpackChunkName: "meta-viewport-scalable" */ './Fixes/metaViewportScalableFix' ).then( ( metaViewportScalableFix ) => {
27 | metaViewportScalableFix.default();
28 | } );
29 | }
30 |
31 | if ( edacFrontendFixes?.remove_title_if_preferred_accessible_name?.enabled ) {
32 | // lazy import the module
33 | import( /* webpackChunkName: "remove-title-if-preferred-accessible-name" */ './Fixes/removeTitleIfPrefferedAccessibleNameFix' ).then( ( removeTitleIfPreferredAccessibleNameFix ) => {
34 | removeTitleIfPreferredAccessibleNameFix.default();
35 | } );
36 | }
37 |
38 | if ( edacFrontendFixes?.underline?.enabled ) {
39 | // lazy import the module
40 | import( /* webpackChunkName: "underline" */ './Fixes/underlineFix' ).then( ( underlineFix ) => {
41 | underlineFix.default();
42 | } );
43 | }
44 |
45 | if ( edacFrontendFixes?.meta_viewport_scalable?.enabled ) {
46 | // lazy import the module
47 | import( /* webpackChunkName: "meta-viewport-scalable" */ './Fixes/metaViewportScalableFix' ).then( ( metaViewportScalableFix ) => {
48 | metaViewportScalableFix.default();
49 | } );
50 | }
51 |
52 | if ( edacFrontendFixes?.prevent_links_opening_new_windows?.enabled ) {
53 | // lazy import the module
54 | import( /* webpackChunkName: "prevent-links-opening-in-new-window" */ './Fixes/preventLinksOpeningNewWindowFix' ).then( ( preventLinksOpeningNewWindowFix ) => {
55 | preventLinksOpeningNewWindowFix.default();
56 | } );
57 | }
58 |
59 | if ( edacFrontendFixes?.new_window_warning?.enabled ) {
60 | // lazy import the module
61 | import( /* webpackChunkName: "new-window-warning" */ './Fixes/newWindowWarning' ).then( ( newWindowWarning ) => {
62 | newWindowWarning.default();
63 | } );
64 | }
65 |
--------------------------------------------------------------------------------
/src/frontendHighlighterApp/images/edac-emblem.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/equalizedigital/accessibility-checker/9801683ac06a12ac594ff6a87ca42e5ceb409d4b/src/frontendHighlighterApp/images/edac-emblem.png
--------------------------------------------------------------------------------
/src/frontendHighlighterApp/images/highlight-icon-error.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/frontendHighlighterApp/images/highlight-icon-ignored.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/frontendHighlighterApp/images/highlight-icon-warning.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/src/frontendHighlighterApp/images/ignore-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
27 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/always-fail.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'always-fail',
3 | metadata: {
4 | impact: 'critical',
5 | messages: {
6 | pass: 'This test passed.',
7 | fail: 'This test failed.',
8 | },
9 | },
10 | evaluate() {
11 | return false;
12 | },
13 | };
14 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/anchor-exists.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check if the anchor's target exists in the DOM.
3 | *
4 | * @param {Node} node The anchor node to evaluate.
5 | * @return {boolean} True if the target element exists, false otherwise.
6 | */
7 |
8 | export default {
9 | id: 'anchor_exists',
10 | evaluate: ( node ) => {
11 | const href = node.getAttribute( 'href' );
12 |
13 | // Extract the fragment identifier (remove the # prefix)
14 | const fragment = href.slice( 1 );
15 |
16 | // Use CSS.escape() to safely handle special characters in selectors
17 | const idSelector = `#${ CSS.escape( fragment ) }`;
18 |
19 | // First try the standard CSS selector approach (finds elements with matching IDs)
20 | if ( document.querySelector( idSelector ) !== null ) {
21 | return true;
22 | }
23 |
24 | // If no ID match found, check for anchor elements with matching name attribute
25 | // Also escape the fragment for the name attribute selector
26 | const namedAnchor = document.querySelector( `a[name="${ CSS.escape( fragment ) }"]` );
27 |
28 | return namedAnchor !== null;
29 | },
30 | };
31 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/aria-describedby-not-found.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check if the aria-describedby attribute references an existing element.
3 | *
4 | * @param {Node} node The node to evaluate.
5 | * @return {boolean} True if all references exist, false otherwise.
6 | */
7 | import { checkAriaReferences } from '../utils/aria-utils';
8 |
9 | export default {
10 | id: 'aria_describedby_not_found',
11 | evaluate: ( node ) => {
12 | return checkAriaReferences( node, 'aria-describedby' );
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/aria-hidden-valid-usage.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check for valid use of aria-hidden="true"
3 | *
4 | * @param {Node} node The node to evaluate.
5 | * @return {boolean} True if the aria-hidden usage is valid, false otherwise.
6 | */
7 |
8 | // Common screen reader text classes
9 | const srClasses = [
10 | 'screen-reader-text', 'sr-only', 'show-for-sr', 'visuallyhidden',
11 | 'visually-hidden', 'hidden-visually', 'invisible',
12 | 'accessibly-hidden', 'hide', 'hidden',
13 | ];
14 |
15 | export default {
16 | id: 'aria_hidden_valid_usage',
17 | evaluate: ( node ) => {
18 | // Check if element is hidden with CSS
19 | const computedStyle = window.getComputedStyle( node );
20 | if ( computedStyle.display === 'none' || computedStyle.visibility === 'hidden' ) {
21 | return true;
22 | }
23 |
24 | // Check for valid element properties
25 | if ( node.classList.contains( 'wp-block-spacer' ) ) {
26 | return true;
27 | }
28 |
29 | const role = node.getAttribute( 'role' );
30 | if ( role?.split( /\s+/ ).includes( 'presentation' ) ) {
31 | return true;
32 | }
33 |
34 | const parentNode = node.parentElement;
35 | if ( ! parentNode ) {
36 | return false;
37 | }
38 |
39 | // Check if parent is hidden with CSS
40 | const parentStyle = window.getComputedStyle( parentNode );
41 | if ( parentStyle.display === 'none' || parentStyle.visibility === 'hidden' ) {
42 | return true;
43 | }
44 |
45 | // Check if parent is button/anchor with accessible content
46 | if ( [ 'button', 'a' ].includes( parentNode.tagName.toLowerCase() ) ) {
47 | // Parent has non-empty aria-label
48 |
49 | if (
50 | (
51 | parentNode.hasAttribute( 'aria-label' ) &&
52 | parentNode.getAttribute( 'aria-label' ).trim()
53 | ) ||
54 | (
55 | parentNode.hasAttribute( 'aria-labelledby' ) &&
56 | document.getElementById( parentNode.getAttribute( 'aria-labelledby' ) )
57 | )
58 | ) {
59 | return true;
60 | }
61 |
62 | // Check for visible text (excluding the aria-hidden element)
63 | for ( const child of parentNode.childNodes ) {
64 | if ( child !== node &&
65 | child.nodeType === Node.TEXT_NODE &&
66 | child.textContent.trim() ) {
67 | return true;
68 | }
69 | }
70 | }
71 |
72 | // Check siblings for screen reader text classes
73 | const siblings = Array.from( parentNode.children );
74 | for ( const sibling of siblings ) {
75 | if ( sibling !== node ) {
76 | for ( const srClass of srClasses ) {
77 | if ( sibling.classList.contains( srClass ) ||
78 | sibling.className.toLowerCase().includes( srClass ) ) {
79 | return true;
80 | }
81 | }
82 | }
83 | }
84 |
85 | return false;
86 | },
87 | };
88 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/aria-label-not-found.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check if the aria-labelledby attribute references an existing element.
3 | *
4 | * @param {Node} node The node to evaluate.
5 | * @return {boolean} True if all references exist, false otherwise.
6 | */
7 | import { checkAriaReferences } from '../utils/aria-utils';
8 |
9 | export default {
10 | id: 'aria_label_not_found',
11 | evaluate: ( node ) => {
12 | return checkAriaReferences( node, 'aria-labelledby' );
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/aria-owns-not-found.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check if the aria-owns attribute references an existing element.
3 | *
4 | * @param {Node} node The node to evaluate.
5 | * @return {boolean} True if all references exist, false otherwise.
6 | */
7 | import { checkAriaReferences } from '../utils/aria-utils';
8 |
9 | export default {
10 | id: 'aria_owns_not_found',
11 | evaluate: ( node ) => {
12 | return checkAriaReferences( node, 'aria-owns' );
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/element-is-u-tag.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Axe core check against nodes to determine if they are tags.
3 | *
4 | * @param {Node} node The node to evaluate.
5 | * @return {boolean} True if the node is a tag, false otherwise.
6 | */
7 |
8 | export default {
9 | id: 'element_is_u_tag',
10 | evaluate: ( node ) => {
11 | return node.tagName.toLowerCase() === 'u';
12 | },
13 | };
14 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/element-with-underline.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Axe core check for elements with underlines.
3 | *
4 | * @param {Node} node The node to evaluate.
5 | * @return {boolean} True if the node has an underline in computed styles, false otherwise.
6 | */
7 |
8 | export default {
9 | id: 'element_has_computed_underline',
10 | evaluate: ( node ) => {
11 | const style = window.getComputedStyle( node );
12 | return style.textDecorationLine.includes( 'underline' );
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/has-ambiguous-text.js:
--------------------------------------------------------------------------------
1 | import { __ } from '@wordpress/i18n';
2 |
3 | const ambiguousPhrases = [
4 | __( 'click', 'accessibility-checker' ),
5 | __( 'click here', 'accessibility-checker' ),
6 | __( 'here', 'accessibility-checker' ),
7 | __( 'go here', 'accessibility-checker' ),
8 | __( 'more', 'accessibility-checker' ),
9 | __( 'more...', 'accessibility-checker' ),
10 | __( 'more…', 'accessibility-checker' ),
11 | __( 'details', 'accessibility-checker' ),
12 | __( 'more details', 'accessibility-checker' ),
13 | __( 'link', 'accessibility-checker' ),
14 | __( 'this page', 'accessibility-checker' ),
15 | __( 'continue', 'accessibility-checker' ),
16 | __( 'continue reading', 'accessibility-checker' ),
17 | __( 'read more', 'accessibility-checker' ),
18 | __( 'open', 'accessibility-checker' ),
19 | __( 'download', 'accessibility-checker' ),
20 | __( 'button', 'accessibility-checker' ),
21 | __( 'keep reading', 'accessibility-checker' ),
22 | __( 'learn more', 'accessibility-checker' ),
23 | __( 'opens a new window', 'accessibility-checker' ),
24 | ];
25 |
26 | const checkAmbiguousPhrase = ( text ) => {
27 | if ( ! text ) {
28 | return false;
29 | }
30 | text = text.toLowerCase().replace( /[^a-z]+/g, ' ' ).trim();
31 | return ambiguousPhrases.includes( text );
32 | };
33 |
34 | export default {
35 | id: 'has_ambiguous_text',
36 | evaluate: ( node ) => {
37 | if ( node.hasAttribute( 'aria-label' ) ) {
38 | const ariaLabel = node.getAttribute( 'aria-label' );
39 | return checkAmbiguousPhrase( ariaLabel );
40 | }
41 |
42 | if ( node.hasAttribute( 'aria-labelledby' ) ) {
43 | const label = node.getAttribute( 'aria-labelledby' );
44 | const labelText = document.getElementById( label )?.textContent;
45 | return checkAmbiguousPhrase( labelText );
46 | }
47 |
48 | if ( node.textContent && node.textContent !== '' ) {
49 | return checkAmbiguousPhrase( node.textContent );
50 | }
51 |
52 | const images = node.querySelectorAll( 'img' );
53 | for ( const image of images ) {
54 | const altText = image.getAttribute( 'alt' );
55 | if ( checkAmbiguousPhrase( altText ) ) {
56 | return true;
57 | }
58 | }
59 |
60 | return false;
61 | },
62 | };
63 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/has-subheadings-if-long-content.js:
--------------------------------------------------------------------------------
1 | const LONG_CONTENT_THRESHOLD = 400;
2 |
3 | export default {
4 | id: 'has_subheadings_if_long_content',
5 | evaluate: ( node ) => {
6 | if ( node !== document.body ) {
7 | return true;
8 | }
9 |
10 | // Count words in text content (excluding scripts, styles)
11 | const text = node.textContent.replace( /\s+/g, ' ' ).trim();
12 | const wordCount = text.split( /\s+/ ).length;
13 |
14 | if ( wordCount < LONG_CONTENT_THRESHOLD ) {
15 | return true;
16 | }
17 |
18 | // Find all headings (both HTML and ARIA)
19 | const headings = [
20 | 'h2, [role="heading"][aria-level="2"]',
21 | 'h3, [role="heading"][aria-level="3"]',
22 | 'h4, [role="heading"][aria-level="4"]',
23 | 'h5, [role="heading"][aria-level="5"]',
24 | 'h6, [role="heading"][aria-level="6"]',
25 | ].map( ( selector ) => document.querySelectorAll( selector ).length )
26 | .reduce( ( sum, count ) => sum + count, 0 );
27 |
28 | return headings > 0;
29 | },
30 | };
31 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/has-text-docoration.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/equalizedigital/accessibility-checker/9801683ac06a12ac594ff6a87ca42e5ceb409d4b/src/pageScanner/checks/has-text-docoration.js
--------------------------------------------------------------------------------
/src/pageScanner/checks/heading-is-empty.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'heading_is_empty',
3 | evaluate( node ) {
4 | // Get all aria-hidden elements
5 | const hiddenElements = node.querySelectorAll( '[aria-hidden="true"]' );
6 |
7 | // Clone node to work with
8 | const clone = node.cloneNode( true );
9 |
10 | // Remove aria-hidden elements from clone
11 | hiddenElements.forEach( ( el ) => {
12 | const elementToRemove = Array.from( clone.querySelectorAll( '*' ) ).find( ( cloneEl ) =>
13 | // Find the corresponding element in the clone by comparing content and structure
14 | cloneEl.isEqualNode( el )
15 | );
16 | if ( elementToRemove ) {
17 | elementToRemove.remove();
18 | }
19 | } );
20 |
21 | // Check for visible text content (excluding just whitespace, hyphens, underscores)
22 | const headingText = clone.textContent.trim();
23 | const hasValidText = headingText && ! /^[-_\s]*$/.test( headingText );
24 |
25 | // Check for aria-label
26 | const ariaLabel = node.getAttribute( 'aria-label' );
27 | const hasAriaLabel = ariaLabel && ariaLabel.trim() !== '';
28 |
29 | // Check for images with alt text
30 | const images = node.querySelectorAll( 'img' );
31 | let hasImageWithAlt = false;
32 | for ( let i = 0; i < images.length; i++ ) {
33 | const alt = images[ i ].getAttribute( 'alt' );
34 | if ( alt && alt.trim() !== '' ) {
35 | hasImageWithAlt = true;
36 | break;
37 | }
38 | }
39 |
40 | // Check for SVG with title or aria-label
41 | const svgs = node.querySelectorAll( 'svg' );
42 | let hasSvgWithAccessibleText = false;
43 | for ( let i = 0; i < svgs.length; i++ ) {
44 | const title = svgs[ i ].querySelector( 'title' );
45 | if ( title && title.textContent.trim() !== '' ) {
46 | hasSvgWithAccessibleText = true;
47 | break;
48 | }
49 | // Also check for aria-label on SVG
50 | const svgAriaLabel = svgs[ i ].getAttribute( 'aria-label' );
51 | if ( svgAriaLabel && svgAriaLabel.trim() !== '' ) {
52 | hasSvgWithAccessibleText = true;
53 | break;
54 | }
55 | }
56 |
57 | // Check aria-labelledby
58 | const ariaLabelledby = node.getAttribute( 'aria-labelledby' );
59 | let hasAriaLabelledby = false;
60 | if ( ariaLabelledby ) {
61 | const ids = ariaLabelledby.split( /\s+/ );
62 | for ( let i = 0; i < ids.length; i++ ) {
63 | const labelElement = document.getElementById( ids[ i ] );
64 | if ( labelElement && labelElement.textContent.trim() !== '' ) {
65 | hasAriaLabelledby = true;
66 | break;
67 | }
68 | }
69 | }
70 |
71 | return hasValidText || hasAriaLabel || hasImageWithAlt || hasSvgWithAccessibleText || hasAriaLabelledby;
72 | },
73 | };
74 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/image-input-has-alt.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Axe core check against nodes to determine if they are tags.
3 | *
4 | * @param {Node} node The node to evaluate.
5 | * @return {boolean} True if the node is a tag, false otherwise.
6 | */
7 |
8 | export default {
9 | id: 'image_input_has_alt',
10 | evaluate: ( node ) => {
11 | // Not an image input, skip.
12 | if ( node.tagName.toLowerCase() === 'input' && node.type !== 'image' ) {
13 | return false;
14 | }
15 |
16 | // Non empty alt attribute.
17 | if ( node.getAttribute( 'alt' )?.trim() !== '' ) {
18 | return true;
19 | }
20 |
21 | return false;
22 | },
23 | };
24 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/img-alt-long-check.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check if image alt text exceeds the maximum allowed length.
3 | * Ported from PHP function edac_rule_img_alt_long
4 | */
5 |
6 | export default {
7 | id: 'img_alt_long_check',
8 | evaluate( node, options = {} ) {
9 | // Get alt text from the node
10 | const altText = node.getAttribute( 'alt' );
11 |
12 | // If alt text exists and is longer than max length, it fails the check
13 | if ( altText && altText.length > options.maxAltLength ) {
14 | return false;
15 | }
16 |
17 | // Otherwise it passes
18 | return true;
19 | },
20 | options: {
21 | maxAltLength: 300,
22 | },
23 | };
24 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/img-alt-redundant-check.js:
--------------------------------------------------------------------------------
1 | import { normalizeText } from '../helpers/helpers';
2 |
3 | // Global cache for alt text mapping
4 | export const altTextMap = new Map();
5 |
6 | /**
7 | * Initialize the alt text map if it's empty.
8 | * Maps normalized alt text to arrays of images with that text.
9 | */
10 | export function initializeAltTextMap() {
11 | if ( altTextMap.size === 0 ) {
12 | const allImages = document.querySelectorAll( 'img' );
13 | allImages.forEach( ( img ) => {
14 | const imgAlt = normalizeText( img.getAttribute( 'alt' ) );
15 | if ( imgAlt ) {
16 | if ( ! altTextMap.has( imgAlt ) ) {
17 | altTextMap.set( imgAlt, [] );
18 | }
19 | altTextMap.get( imgAlt ).push( img );
20 | }
21 | } );
22 | }
23 | }
24 |
25 | /**
26 | * Check if an image's alternative text is redundant.
27 | * Returns false if redundancy is detected.
28 | */
29 | export default {
30 | id: 'img_alt_redundant_check',
31 | evaluate( node ) {
32 | // Get the alt text (normalized)
33 | const alt = normalizeText( node.getAttribute( 'alt' ) );
34 | if ( ! alt ) {
35 | // If there is no alt, this check doesn't apply.
36 | return true;
37 | }
38 |
39 | // Check if alt text matches title attribute
40 | const title = normalizeText( node.getAttribute( 'title' ) );
41 | if ( title && alt === title ) {
42 | return false;
43 | }
44 |
45 | // Check image inside a link whose text equals alt text
46 | const parentLink = node.closest( 'a' );
47 | if ( parentLink ) {
48 | // Get visible text of the anchor.
49 | const linkText = normalizeText( parentLink.textContent );
50 | if ( linkText && alt === linkText ) {
51 | return false;
52 | }
53 | }
54 |
55 | // Check image inside a figure with figcaption matching alt text
56 | const figure = node.closest( 'figure' );
57 | if ( figure ) {
58 | const figcaption = figure.querySelector( 'figcaption' );
59 | if ( figcaption ) {
60 | const captionText = normalizeText( figcaption.textContent );
61 | if ( captionText && alt === captionText ) {
62 | return false;
63 | }
64 | }
65 | }
66 |
67 | // Make sure the alt text map is available and filled.
68 | initializeAltTextMap();
69 |
70 | // Check if current alt text appears in multiple images
71 | if ( altTextMap.has( alt ) && altTextMap.get( alt ).length > 1 ) {
72 | return false;
73 | }
74 |
75 | // If no redundant text found, pass.
76 | return true;
77 | },
78 | options: {},
79 | metadata: {
80 | impact: 'warning',
81 | messages: {
82 | pass: 'Image alternative text is not redundant.',
83 | fail: 'Image alternative text is redundant (matches title, link text, caption, or is duplicated).',
84 | },
85 | },
86 | };
87 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/link-has-valid-href-or-role.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check if a link is improperly used (missing href or href="#", and not a button).
3 | *
4 | * @param {Node} node The node to evaluate.
5 | * @return {boolean} True if the link is valid or semantically correct, false otherwise.
6 | */
7 |
8 | export default {
9 | id: 'link_has_valid_href_or_role',
10 | evaluate: ( node ) => {
11 | if ( node.nodeName.toLowerCase() !== 'a' ) {
12 | return true;
13 | }
14 |
15 | const href = node.getAttribute( 'href' );
16 | const role = node.getAttribute( 'role' ) || '';
17 |
18 | // Allow if it's a button role
19 | if ( role.toLowerCase().split( /\s+/ ).includes( 'button' ) ) {
20 | return true;
21 | }
22 |
23 | const trimmedHref = href ? href.trim() : '';
24 |
25 | // Fail if href is missing, just '#', or contains invalid protocols
26 | if ( ! href ||
27 | trimmedHref === '#' ||
28 | href.toLowerCase().startsWith( 'javascript:' ) ||
29 | href.toLowerCase().startsWith( 'data:' ) ||
30 | href.toLowerCase().startsWith( 'file:' )
31 | ) {
32 | return false;
33 | }
34 |
35 | // Optionally validate URL format if it's an absolute URL
36 | if ( href.includes( '://' ) ) {
37 | try {
38 | new URL( href );
39 | } catch ( e ) {
40 | return false; // Invalid URL formats
41 | }
42 | }
43 |
44 | return true;
45 | },
46 | };
47 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/link-points-to-html.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check to detect if an anchor tag links to a non-HTML document type.
3 | *
4 | * @param {Node} node The node to evaluate.
5 | * @return {boolean} True if the link is not a problematic file type, false if it should be flagged.
6 | */
7 |
8 | export const nonHtmlExtensions = [
9 | 'rtf', 'wpd', 'ods', 'odt', 'odp', 'sxw', 'sxc', 'sxd', 'sxi', 'pages', 'key',
10 | ];
11 |
12 | export default {
13 | id: 'link_points_to_html',
14 | evaluate: ( node ) => {
15 | if ( node.nodeName.toLowerCase() !== 'a' ) {
16 | return true;
17 | }
18 |
19 | const href = node.getAttribute( 'href' ) || '';
20 |
21 | try {
22 | const url = new URL( href, document.baseURI );
23 | const pathParts = url.pathname.split( '.' );
24 | const extension = pathParts.length > 1 ? pathParts.pop().toLowerCase() : '';
25 |
26 | if ( nonHtmlExtensions.includes( extension ) ) {
27 | return false; // Fail: link points to a non-HTML document type
28 | }
29 | } catch {
30 | return true; // Pass: link does not have a valid URL
31 | }
32 |
33 | return true; // Pass: link points to an HTML document type
34 | },
35 | };
36 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/link-target-blank-without-informing.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Axe core check against nodes to determine if link opens in new tab and if so has appropriate aria-label or aria-labelledby.
3 | */
4 |
5 | import { __ } from '@wordpress/i18n';
6 |
7 | const allowedPhrases = [
8 | __( 'new window', 'accessibility-checker' ),
9 | __( 'new tab', 'accessibility-checker' ),
10 | ];
11 |
12 | /**
13 | * Check for links that open in a new tab without informing the user.
14 | *
15 | * @param {HTMLElement} node The node to evaluate.
16 | * return {boolean} False if the node is a link that opens in a new tab without informing the user, true if informed.
17 | */
18 | export default {
19 | id: 'link_target_blank_without_informing',
20 | evaluate: ( node ) => {
21 | // Bail early if not a link or not target blank.
22 | if ( node.tagName.toLowerCase() !== 'a' || node.getAttribute( 'target' ) !== '_blank' ) {
23 | return false;
24 | }
25 |
26 | // Check plain text.
27 | if ( checkTextHasInfoCallout( node.textContent ) ) {
28 | return false;
29 | }
30 |
31 | // Check aria-label.
32 | if ( node.hasAttribute( 'aria-label' ) && checkTextHasInfoCallout( node.getAttribute( 'aria-label' ) ) ) {
33 | return false;
34 | }
35 |
36 | // Check aria-labelledby.
37 | if ( node.hasAttribute( 'aria-labelledby' ) ) {
38 | const labelElement = document.getElementById( node.getAttribute( 'aria-labelledby' ) );
39 | if ( labelElement && checkTextHasInfoCallout( labelElement.textContent ) ) {
40 | return false;
41 | }
42 | }
43 |
44 | // Check image alt text.
45 | const images = node.querySelectorAll( 'img' );
46 | for ( const image of images ) {
47 | if ( checkTextHasInfoCallout( image.getAttribute( 'alt' ) ) ) {
48 | return false;
49 | }
50 | }
51 |
52 | // Nothing so far has indicated that this is a new window/tab opener so this is a fail.
53 | return true;
54 | },
55 | };
56 |
57 | /**
58 | * Checks that some text contains a phrase that indicates a new window or tab opener.
59 | *
60 | * @param {string} text The text to check.
61 | * @return {boolean} True if the text contains a new window/tab phrase, false otherwise.
62 | */
63 | const checkTextHasInfoCallout = ( text ) => {
64 | if ( ! text ) {
65 | return false;
66 | }
67 | return allowedPhrases.some( ( phrase ) => text.toLowerCase().includes( phrase ) );
68 | };
69 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/linked-image-alt-not-empty.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check that linked images have non-empty alt text.
3 | *
4 | * This check evaluates whether images inside anchor tags have meaningful alternative text.
5 | * It fails if an image has an empty or whitespace-only alt attribute, unless:
6 | * - The link itself has sufficient descriptive text
7 | * - The image is hidden or decorative (role="presentation" or aria-hidden="true")
8 | * - The anchor has aria-label or title attributes
9 | */
10 |
11 | import { getVisibleImages, hasAccessibleText } from '../helpers/linkedImageUtils.js';
12 |
13 | export default {
14 | id: 'linked_image_alt_not_empty',
15 | evaluate: ( node ) => {
16 | if ( node.nodeName.toLowerCase() !== 'a' ) {
17 | return true;
18 | }
19 |
20 | if ( hasAccessibleText( node ) ) {
21 | return true;
22 | }
23 |
24 | const images = getVisibleImages( node );
25 | if ( images.length === 0 ) {
26 | return true;
27 | }
28 |
29 | // Check each visible image for non-empty alt text
30 | return images.every( ( img ) => {
31 | const alt = img.getAttribute( 'alt' );
32 | const role = img.getAttribute( 'role' );
33 | const ariaHidden = img.getAttribute( 'aria-hidden' );
34 |
35 | if ( role === 'presentation' || ariaHidden === 'true' ) {
36 | return true;
37 | }
38 |
39 | // Check for null, empty string, or whitespace-only alt text
40 | return alt !== null && alt.trim() !== '';
41 | } );
42 | },
43 | };
44 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/linked-image-alt-present.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check if the given node is an anchor tag () and validate its content.
3 | *
4 | * This function evaluates whether an anchor tag contains sufficient descriptive
5 | * content, such as text, aria-label, title, or valid alt attributes for images.
6 | *
7 | * @param {Node} node The node to evaluate.
8 | * @return {boolean} True if the anchor tag has valid descriptive content, false otherwise.
9 | */
10 |
11 | import { getVisibleImages, hasAccessibleText } from '../helpers/linkedImageUtils.js';
12 |
13 | export default {
14 | id: 'linked_image_alt_present',
15 | evaluate: ( node ) => {
16 | if ( node.nodeName.toLowerCase() !== 'a' ) {
17 | return true;
18 | }
19 |
20 | if ( hasAccessibleText( node ) ) {
21 | return true;
22 | }
23 |
24 | const images = getVisibleImages( node );
25 | if ( images.length === 0 ) {
26 | return true;
27 | }
28 |
29 | // Check each visible image for alt attribute
30 | return images.every( ( img ) => {
31 | const hasAlt = img.hasAttribute( 'alt' );
32 | const role = img.getAttribute( 'role' );
33 | const ariaHidden = img.getAttribute( 'aria-hidden' );
34 |
35 | return hasAlt || role === 'presentation' || ariaHidden === 'true';
36 | } );
37 | },
38 | };
39 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/longdesc-valid.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check if the provided node is an ![]()
tag and validate its longdesc attribute.
3 | *
4 | * @param {Node} node The node to evaluate.
5 | * @return {boolean} True if the longdesc attribute is valid or not applicable, false otherwise.
6 | */
7 |
8 | const imageExtensions = [
9 | 'apng', 'bmp', 'gif', 'ico', 'cur', 'jpg', 'jpeg', 'jfif',
10 | 'pjpeg', 'pjp', 'png', 'svg', 'tif', 'tiff', 'webp',
11 | ];
12 |
13 | export default {
14 | id: 'longdesc_valid',
15 | evaluate: ( node ) => {
16 | if ( node.nodeName.toLowerCase() !== 'img' ) {
17 | return true;
18 | }
19 |
20 | const longdesc = node.getAttribute( 'longdesc' );
21 | if ( longdesc === null ) {
22 | return true;
23 | }
24 |
25 | if ( longdesc.trim() === '' ) {
26 | return false;
27 | }
28 |
29 | // Reject malformed protocols like "ht!tp://"
30 | if ( longdesc.includes( ':' ) ) {
31 | // This regex matches valid protocols per RFC 3986: e.g., "http://", "https://", "ftp://"
32 | const protocolPattern = /^[a-zA-Z][a-zA-Z\d+\-.]*:\/\//;
33 | if ( ! protocolPattern.test( longdesc ) ) {
34 | return false;
35 | }
36 | }
37 |
38 | let url;
39 | try {
40 | url = new URL( longdesc, document.baseURI );
41 | } catch {
42 | return false; // Malformed URL (even relative)
43 | }
44 |
45 | const pathname = url.pathname;
46 | // Handle path ending with slash
47 | const filename = pathname.endsWith( '/' ) ? '' : pathname.split( '/' ).pop();
48 |
49 | // Only check extension if there's a filename
50 | if ( ! filename ) {
51 | return false;
52 | }
53 |
54 | // Extract extension, accounting for filenames with multiple dots
55 | // and query parameters or fragments
56 | const extMatch = filename.match( /\.([^.?#]+)(?:\?.*)?(?:#.*)?$/ );
57 | const ext = extMatch ? extMatch[ 1 ].toLowerCase() : '';
58 |
59 | if ( imageExtensions.includes( ext ) ) {
60 | return false;
61 | }
62 |
63 | return true;
64 | },
65 | };
66 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/paragraph-not-empty.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check that a paragraph is NOT empty.
3 | *
4 | * @param {Node} node The paragraph element to evaluate.
5 | * @return {boolean} Returns true if the paragraph has content, false if empty.
6 | */
7 |
8 | export default {
9 | id: 'paragraph_not_empty',
10 | evaluate: ( node ) => {
11 | if ( 'p' !== node.tagName.toLowerCase() ) {
12 | return true;
13 | }
14 |
15 | // If element has aria-hidden attribute with a value of true, it passes.
16 | if ( node.getAttribute( 'aria-hidden' ) && node.getAttribute( 'aria-hidden' ).toLowerCase() === 'true' ) {
17 | return true;
18 | }
19 |
20 | // Pass if there are child nodes and any child nodes are not text nodes (not Type of 3).
21 | if ( node.childNodes.length && Array.from( node.childNodes ).some( ( child ) => child.nodeType !== 3 ) ) {
22 | return true;
23 | }
24 |
25 | // If there is text content then it passes.
26 | return node.textContent.trim() !== '';
27 | },
28 | };
29 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/paragraph-styled-as-header.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check for elements with text content that is styled like a header.
3 | *
4 | * Axe-core has a built-in `p-as-heading` rule that checks for paragraphs
5 | * that are styled like headings. That rule is less robust than this check,
6 | * as it only checks for paragraphs with bold or italic text and gives back
7 | * 'incomplete' or uncertain results for some of the test data that we want
8 | * to flag for further checks.
9 | *
10 | * This check in this file takes into account the font size, length of the
11 | * text, and considers paragraphs with large font size as headers as well.
12 | *
13 | * @param {Node} node The node to evaluate.
14 | * @return {boolean} True if the node is styled like a header, false otherwise. Paragraphs with only bold or italic,
15 | * are shorter than 50 characters, or are short with large font size are considered headers.
16 | */
17 |
18 | import { fontSizeInPx } from '../helpers/helpers.js';
19 |
20 | export default {
21 | id: 'paragraph_styled_as_header',
22 | evaluate: ( node ) => {
23 | const pixelSize = fontSizeInPx( node );
24 |
25 | // If there's no text content, it's not a header.
26 | if ( ! node.textContent.trim() ) {
27 | return false;
28 | }
29 |
30 | // Long paragraphs or those with font size under 16px are unlikely to be headers.
31 | if ( node.textContent.trim().length > 50 || pixelSize < 16 ) {
32 | return false;
33 | }
34 |
35 | // Paragraphs that are 20px or more are probably headers.
36 | if ( pixelSize >= 20 ) {
37 | return true;
38 | }
39 |
40 | const style = window.getComputedStyle( node );
41 |
42 | const fontWeight = style.getPropertyValue( 'font-weight' );
43 | const isBold = [ 'bold', 'bolder', '700', '800', '900' ].includes( fontWeight );
44 |
45 | const fontStyle = style.getPropertyValue( 'font-style' );
46 | const isItalic = [ 'italic', 'oblique' ].includes( fontStyle );
47 |
48 | let wrappedByBoldOrItalicTag = false;
49 | const boldOrItalicTags = node.querySelectorAll( 'b, strong, i, em' );
50 | boldOrItalicTags.forEach( ( tag ) => {
51 | if ( tag.textContent === node.textContent ) {
52 | wrappedByBoldOrItalicTag = true;
53 | }
54 | } );
55 |
56 | if ( isBold || isItalic || wrappedByBoldOrItalicTag ) {
57 | return true;
58 | }
59 |
60 | // Didn't find anything indicating this is a possible header.
61 | return false;
62 | },
63 | };
64 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/slider-detected.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Rule to detect the presence of slider components that may require accessibility features.
3 | * This rule identifies various slider elements based on class names or specific attributes
4 | * that are commonly associated with slider implementations.
5 | */
6 |
7 | const sliderClassKeywords = [
8 | 'slider',
9 | 'carousel',
10 | 'owl-carousel',
11 | 'soliloquy-container',
12 | 'n2-section-smartslider',
13 | 'metaslider',
14 | 'master-slider',
15 | 'rev_slider',
16 | 'royalSlider',
17 | 'wonderpluginslider',
18 | 'meteor-slides',
19 | 'flexslider',
20 | 'slick-slider',
21 | 'uagb-slick-carousel',
22 | 'swiper-container',
23 | 'flickity-slider',
24 | 'spacegallery',
25 | 'blueimp-gallery',
26 | 'seq-active',
27 | 'siema',
28 | 'keen-slider',
29 | 'bxslider',
30 | 'bx-wrapper',
31 | 'glide--slider',
32 | ];
33 |
34 | const sliderDetected = {
35 | id: 'slider_detected',
36 | evaluate: ( node ) => {
37 | const className = node.getAttribute( 'class' ) || '';
38 | const classTokens = className.toLowerCase().split( /\s+/ );
39 | const matchesClass = sliderClassKeywords.some( ( keyword ) => classTokens.includes( keyword ) );
40 |
41 | const hasDataAttr = node.hasAttribute( 'data-jssor-slider' ) || node.hasAttribute( 'data-layerslider-uid' );
42 |
43 | if ( matchesClass || hasDataAttr ) {
44 | return false; // Fail check → trigger violation
45 | }
46 |
47 | return true;
48 | },
49 | };
50 | export { sliderClassKeywords };
51 | export default sliderDetected;
52 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/table-has-headers.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'table_has_headers',
3 | evaluate: ( node ) => {
4 | if ( node.nodeName.toLowerCase() !== 'table' ) {
5 | return true;
6 | }
7 |
8 | // TODO: Improve logic to account for colspan, rowspan, and complex ARIA header relationships
9 |
10 | const rows = Array.from( node.querySelectorAll( 'tr' ) );
11 |
12 | if ( rows.length === 0 ) {
13 | return true;
14 | }
15 |
16 | // Case 1: Valid row-header table (every row starts with )
17 | const isRowHeaderTable = rows.every( ( row ) => {
18 | const firstCell = row.children[ 0 ];
19 | if ( ! firstCell || firstCell.tagName.toLowerCase() !== 'th' ) {
20 | return false;
21 | }
22 |
23 | const scope = firstCell.getAttribute( 'scope' );
24 | return scope === 'row' || ! scope;
25 | } );
26 |
27 | if ( isRowHeaderTable ) {
28 | return true;
29 | }
30 |
31 | // Case 2: Classic table with header row
32 | const headerRow =
33 | node.querySelector( 'thead tr' ) ||
34 | rows.find( ( row ) => row.querySelectorAll( 'th' ).length > 0 );
35 |
36 | if ( ! headerRow ) {
37 | return false;
38 | }
39 |
40 | const thCount = headerRow.querySelectorAll( 'th' ).length;
41 | if ( thCount === 0 ) {
42 | return false;
43 | }
44 |
45 | let headerRowEncountered = false;
46 |
47 | for ( const row of rows ) {
48 | if ( ! headerRowEncountered && row === headerRow ) {
49 | headerRowEncountered = true;
50 | continue;
51 | }
52 |
53 | const tdCount = row.querySelectorAll( 'td' ).length;
54 | if ( tdCount > thCount ) {
55 | return false;
56 | }
57 | }
58 |
59 | return true;
60 | },
61 | };
62 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/table-header-is-empty.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'table_header_is_empty',
3 | evaluate( node ) {
4 | // Check if the header has aria-hidden="true"
5 | if ( node.hasAttribute( 'aria-hidden' ) && node.getAttribute( 'aria-hidden' ) === 'true' ) {
6 | return true;
7 | }
8 |
9 | // Check if the table header has text content after stripping spaces, , hyphens, emdashes, underscores
10 | const textContent = node.textContent.replace( /[\s\u00A0\-—_]/g, '' );
11 | if ( textContent !== '' ) {
12 | return false;
13 | }
14 |
15 | // Check for aria-label or title on the table header itself
16 | if ( node.hasAttribute( 'aria-label' ) && node.getAttribute( 'aria-label' )?.trim() !== '' ) {
17 | return false;
18 | }
19 |
20 | if ( node.hasAttribute( 'title' ) && node.getAttribute( 'title' )?.trim() !== '' ) {
21 | return false;
22 | }
23 |
24 | // Check aria-labelledby
25 | if ( node.hasAttribute( 'aria-labelledby' ) ) {
26 | const labelledbyIds = node.getAttribute( 'aria-labelledby' )?.split( ' ' );
27 | const labelledbyElements = labelledbyIds?.map( ( id ) => document.getElementById( id ) ).filter( Boolean );
28 | if ( labelledbyElements.some( ( el ) => el.textContent?.trim() !== '' ) ) {
29 | return false;
30 | }
31 | }
32 |
33 | // Check for images with alt text
34 | const images = node.querySelectorAll( 'img' );
35 | for ( const img of images ) {
36 | if ( img.hasAttribute( 'alt' ) && img.getAttribute( 'alt' )?.trim() !== '' ) {
37 | return false;
38 | }
39 | }
40 |
41 | // Check for icons with title or aria-label
42 | const icons = node.querySelectorAll( 'i' );
43 | for ( const icon of icons ) {
44 | if (
45 | ( icon.hasAttribute( 'title' ) && icon.getAttribute( 'title' )?.trim() !== '' ) ||
46 | ( icon.hasAttribute( 'aria-label' ) && icon.getAttribute( 'aria-label' )?.trim() !== '' )
47 | ) {
48 | return false;
49 | }
50 | }
51 |
52 | // Check for SVGs with title
53 | const svgs = node.querySelectorAll( 'svg' );
54 | for ( const svg of svgs ) {
55 | if ( svg.querySelector( 'title' ) ) {
56 | return false;
57 | }
58 | }
59 |
60 | // If we've reached here, the table header is empty
61 | return true;
62 | },
63 | };
64 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/text-is-justified.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Axe core check for elements that are aligned to justify.
3 | *
4 | * @param {Node} node The node to evaluate.
5 | * @return {boolean} True if the node is justified, false otherwise.
6 | */
7 |
8 | export default {
9 | id: 'text_is_justified',
10 | evaluate: ( node ) => {
11 | const style = window.getComputedStyle( node );
12 | return style.textAlign.toLowerCase() === 'justify';
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/src/pageScanner/checks/text-size-too-small.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Axe core check against nodes to determine if the text size is too small.
3 | *
4 | * @param {Node} node The node to evaluate.
5 | * @return {boolean} True if the text size is equal to or below the minimum size. False otherwise.
6 | */
7 |
8 | import { fontSizeInPx } from '../helpers/helpers';
9 |
10 | const SMALL_FONT_SIZE_THRESHOLD = 10;
11 |
12 | export default {
13 | id: 'text_size_too_small',
14 | evaluate: ( node ) => {
15 | // If the node has no text content then it can't have text that's too small.
16 | if ( ! node.textContent.trim().length ) {
17 | return false;
18 | }
19 |
20 | // Check if the node has any direct text nodes as children. For a node with no
21 | // children, or with TEXT_NODE children, evaluate the nodes font size. This
22 | // handles both leaf nodes and container elements with mixed content.
23 | const hasTextChild = Array.from( node.childNodes ).some( ( child ) => child.nodeType === Node.TEXT_NODE );
24 | if ( ! node.childNodes.length || hasTextChild ) {
25 | return fontSizeInPx( node ) <= SMALL_FONT_SIZE_THRESHOLD;
26 | }
27 |
28 | // No text nodes were found in direct children, and this is not a leaf node,
29 | // so we can safely ignore font size checks.
30 | return false;
31 | },
32 | };
33 |
--------------------------------------------------------------------------------
/src/pageScanner/config/exclusions.js:
--------------------------------------------------------------------------------
1 |
2 | // Define the list of exclusions for accessibility scans.
3 | export const exclusionsArray = [
4 | '#wpadminbar',
5 | '.edac-panel-container',
6 | '#query-monitor-main',
7 | '#qm-icon-container',
8 | ];
9 |
--------------------------------------------------------------------------------
/src/pageScanner/helpers/density.js:
--------------------------------------------------------------------------------
1 | import { exclusionsArray } from '../config/exclusions';
2 |
3 | /**
4 | * Calculate page density metrics
5 | * @param {HTMLElement} body - The body element to analyze
6 | * @return {[number, number]} Array containing [elementCount, contentLength]
7 | */
8 | export function getPageDensity( body = document.body ) {
9 | // If we can't get a body then return as if there was nothing.
10 | if ( ! body ) {
11 | return [ 0, 0 ];
12 | }
13 |
14 | // Remove elements we don't want to count from a clone to avoid modifying original
15 | const bodyClone = body.cloneNode( true );
16 |
17 | // Remove elements we don't want to count
18 | const selectorsToRemove = [ ...exclusionsArray, 'style', 'script' ];
19 | selectorsToRemove.forEach( ( selector ) => {
20 | bodyClone.querySelectorAll( selector ).forEach( ( el ) => el.remove() );
21 | } );
22 |
23 | // Count all elements within the clone
24 | const allElements = bodyClone.getElementsByTagName( '*' );
25 | const elementCount = allElements.length;
26 |
27 | // Get text content and count alphanumeric characters only
28 | const textContent = bodyClone.textContent || '';
29 | const contentTextLength = textContent.replace( /[^A-Za-z0-9]/g, '' ).length;
30 |
31 | return [ elementCount, contentTextLength ];
32 | }
33 |
--------------------------------------------------------------------------------
/src/pageScanner/helpers/helpers.js:
--------------------------------------------------------------------------------
1 | export const fontSizeInPx = ( node ) => {
2 | if ( ! node || node.nodeType !== Node.ELEMENT_NODE ) {
3 | return 0;
4 | }
5 |
6 | const fontSize = parseFloat( window.getComputedStyle( node ).fontSize );
7 | return typeof fontSize === 'number' ? fontSize : 0;
8 | };
9 |
10 | /**
11 | * Helper function to normalize text by trimming and replacing consecutive whitespace
12 | * @param {string} text - Text to normalize
13 | * @return {string} Normalized text
14 | */
15 | export const normalizeText = ( text ) => {
16 | return ( text || '' ).trim().toLowerCase().replace( /\s+/g, ' ' );
17 | };
18 |
19 | /**
20 | * Check if an element is visibly hidden via CSS or aria attributes
21 | * @param {HTMLElement} element The element to check
22 | * @return {boolean} True if element is hidden
23 | */
24 | export const isVisiblyHidden = ( element ) => {
25 | const style = window.getComputedStyle( element );
26 | return style.display === 'none' ||
27 | style.visibility === 'hidden' ||
28 | element.closest( '[aria-hidden="true"]' ) !== null;
29 | };
30 |
31 | /**
32 | * Check if an element is visible in the DOM
33 | *
34 | * This is a recursive function so could be inefficient for deeply nested elements.
35 | *
36 | * @param {element} element an element to check for visibility.
37 | * @return {boolean|boolean|*} A boolean indicating if the element is visible or not.
38 | */
39 | export const isElementVisible = ( element ) => {
40 | // A non-existent element can never be visible.
41 | if ( ! element ) {
42 | return false;
43 | }
44 |
45 | // Check if the element itself is hidden.
46 | const style = window.getComputedStyle( element );
47 | if ( style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0' ) {
48 | return false;
49 | }
50 |
51 | // If there is a parent then check it recursively till there is no more parents.
52 | return element.parentElement ? isElementVisible( element.parentElement ) : true;
53 | };
54 |
55 | /**
56 | * A Map that normalizes all keys to lowercase
57 | */
58 | export class NormalizedMap extends Map {
59 | set( key, value ) {
60 | return super.set( typeof key === 'string' ? key.toLowerCase() : key, value );
61 | }
62 |
63 | get( key ) {
64 | return super.get( typeof key === 'string' ? key.toLowerCase() : key );
65 | }
66 |
67 | has( key ) {
68 | return super.has( typeof key === 'string' ? key.toLowerCase() : key );
69 | }
70 |
71 | delete( key ) {
72 | return super.delete( typeof key === 'string' ? key.toLowerCase() : key );
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/src/pageScanner/helpers/linkedImageUtils.js:
--------------------------------------------------------------------------------
1 | import { isVisiblyHidden } from './helpers.js';
2 |
3 | /**
4 | * Get visible images from an anchor element
5 | * @param {HTMLElement} node Anchor element to check
6 | * @return {Array} Array of visible image elements
7 | */
8 | export const getVisibleImages = ( node ) => {
9 | const allImages = node.querySelectorAll( 'img' );
10 | return Array.from( allImages ).filter( ( img ) => ! isVisiblyHidden( img ) );
11 | };
12 |
13 | /**
14 | * Check if anchor has sufficient accessible text
15 | * @param {HTMLElement} node Anchor element to check
16 | * @return {boolean} True if anchor has accessible text
17 | */
18 | export const hasAccessibleText = ( node ) => {
19 | const textContent = ( node.textContent || '' ).trim();
20 | const hasText = textContent.length >= 5;
21 | const hasAriaLabel = node.getAttribute( 'aria-label' ) !== null && node.getAttribute( 'aria-label' ) !== '';
22 | const hasTitle = node.getAttribute( 'title' ) !== null && node.getAttribute( 'title' ) !== '';
23 |
24 | return hasText || hasAriaLabel || hasTitle;
25 | };
26 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/aria-broken-reference.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'aria_broken_reference',
3 | selector: '[aria-labelledby], [aria-describedby], [aria-owns]',
4 | excludeHidden: true,
5 | tags: [
6 |
7 | ],
8 | metadata: {
9 | description: 'Ensures ARIA attributes reference existing elements',
10 | help: 'ARIA attributes that reference other elements must point to elements that exist in the DOM',
11 | impact: 'critical',
12 | },
13 | all: [],
14 | any: [ 'aria_label_not_found', 'aria_describedby_not_found', 'aria_owns_not_found' ],
15 | none: [],
16 | };
17 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/aria-hidden-validation.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'aria_hidden_validation',
3 | selector: '[aria-hidden="true"]',
4 | excludeHidden: false,
5 | tags: [
6 | 'wcag2a',
7 | 'wcag131',
8 | 'cat.aria',
9 | 'cat.semantics',
10 | ],
11 | metadata: {
12 | description: 'Ensures elements with aria-hidden="true" are used appropriately',
13 | help: 'Elements with aria-hidden="true" should not hide important content that is unavailable elsewhere',
14 | impact: 'serious',
15 | },
16 | all: [],
17 | any: [ 'aria_hidden_valid_usage' ],
18 | none: [],
19 | };
20 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/broken-anchor-link.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Rule: Broken skip anchor link
3 | *
4 | * Description: Check if the skip anchor link is broken.
5 | */
6 |
7 | export default {
8 | id: 'broken_skip_anchor_link',
9 | selector: 'a[href^="#"]:not([href="#"]):not([role="button"])',
10 | tags: [ 'wcag2a', 'wcag131', 'wcag241', 'custom' ],
11 | metadata: {
12 | description: 'Check if the skip anchor link is broken or missing its target.',
13 | },
14 | all: [],
15 | any: [ 'anchor_exists' ],
16 | none: [],
17 | };
18 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/color-contrast-failure.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'color_contrast_failure',
3 | matches: 'color-contrast-matches',
4 | excludeHidden: false,
5 | tags: [
6 | 'cat.color',
7 | 'wcag2aa',
8 | 'wcag143',
9 | 'TTv5',
10 | 'TT13.c',
11 | 'EN-301-549',
12 | 'EN-9.1.4.3',
13 | 'ACT',
14 | ],
15 | actIds: [ 'afw4f7', '09o5cg' ],
16 | metadata: {
17 | description:
18 | 'Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds',
19 | help: 'Elements must meet minimum color contrast ratio thresholds',
20 | },
21 | all: [],
22 | any: [ 'color-contrast' ],
23 | none: [],
24 | };
25 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/custom-rule-1.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'custom-rule-1',
3 | tags: [ 'custom' ],
4 | all: [ 'always-fail' ],
5 | };
6 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/empty-button.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'empty_button',
3 | excludeHidden: false,
4 | selector: 'button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]',
5 | tags: [ 'accessibility', 'wcag2a', 'wcag2aa' ],
6 | metadata: {
7 | description: 'Ensures buttons have accessible labels or content.',
8 | help: 'Buttons must have accessible text, aria-label, or title attributes.',
9 | helpUrl: 'https://a11ychecker.com/help1960',
10 | },
11 |
12 | any: [],
13 | all: [],
14 | none: [ 'button_is_empty' ],
15 | };
16 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/empty-heading-tag.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'empty_heading_tag',
3 | selector: 'h1, h2, h3, h4, h5, h6',
4 | metadata: {
5 | description: 'Ensures headings have discernible text',
6 | help: 'Headings must have discernible text',
7 | helpUrl: 'https://a11ychecker.com/help1957',
8 | },
9 | tags: [ 'wcag2a', 'best-practice' ],
10 | all: [],
11 | any: [ 'heading_is_empty' ],
12 | none: [],
13 | };
14 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/empty-link.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'empty_link',
3 | selector: 'a[href]',
4 | tags: [ 'wcag2a', 'wcag2.4.4', 'wcag4.1.2' ],
5 | metadata: {
6 | description: 'Ensures links have discernible text',
7 | help: 'Links must have discernible text',
8 | helpUrl: 'https://a11ychecker.com/help4108',
9 | },
10 | any: [],
11 | all: [],
12 | none: [ 'link-is-empty' ],
13 | };
14 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/empty-paragraph.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'empty_paragraph_tag',
3 | selector: 'p',
4 | excludeHidden: false,
5 | tags: [
6 | 'cat.text',
7 | 'best-practices',
8 | ],
9 | impact: 'moderate',
10 | metadata: {
11 | description: 'Detects empty paragraph tags',
12 | help: 'Paragraphs should not be used for layout purposes and should never be empty',
13 | },
14 | all: [],
15 | any: [ 'paragraph_not_empty' ],
16 | none: [],
17 | };
18 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/empty-table-header.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'empty_table_header',
3 | selector: 'th, [role="columnheader"], [role="rowheader"]',
4 | excludeHidden: false,
5 | tags: [ 'wcag2a', 'wcag1.3.1', 'wcag4.1.2' ],
6 | metadata: {
7 | description: 'Ensures table headers have discernible text',
8 | help: 'Table headers must have discernible text',
9 | helpUrl: 'https://a11ychecker.com/help4109',
10 | },
11 | any: [],
12 | all: [],
13 | none: [ 'table_header_is_empty' ],
14 | };
15 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/extended/label.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This is a modified version of the original rule from axe-core library.
3 | *
4 | * The matches is changed to remove 'image' as a bail condition. A new image alt check is added. The "non-empty-placeholder" check is removed.
5 | *
6 | * original rule: https://github.com/dequelabs/axe-core/blob/develop/lib/rules/label.json
7 | */
8 |
9 | export default {
10 | id: 'label',
11 | impact: 'critical',
12 | selector: 'input, textarea',
13 | matches: ( node, virtualNode ) => {
14 | if ( virtualNode.props.nodeName !== 'input' || virtualNode.hasAttr( 'type' ) === false ) {
15 | return true;
16 | }
17 | const type2 = virtualNode.attr( 'type' ).toLowerCase();
18 | // 'image' is a removed value compared to the original `label-matches` matcher.
19 | return [ 'hidden', 'button', 'submit', 'reset' ].includes( type2 ) === false;
20 | },
21 | tags: [
22 | 'cat.forms',
23 | 'wcag2a',
24 | 'wcag412',
25 | 'section508',
26 | 'section508.22.n',
27 | 'TTv5',
28 | 'TT5.c',
29 | 'EN-301-549',
30 | 'EN-9.4.1.2',
31 | 'ACT',
32 | ],
33 | actIds: [ 'e086e5' ],
34 | metadata: {
35 | description: 'Ensure every form element has a label',
36 | help: 'Form elements must have labels',
37 | },
38 | all: [],
39 | any: [
40 | 'implicit-label',
41 | 'explicit-label',
42 | 'aria-label',
43 | 'aria-labelledby',
44 | 'non-empty-title',
45 | 'presentational-role',
46 | 'image_input_has_alt', // this is added as a custom check. "non-empty-placeholder" was removed.
47 | ],
48 | none: [ 'hidden-explicit-label' ],
49 | };
50 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/img-alt-empty.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Rule for detecting images with empty alt attributes.
3 | * Based on WCAG 1.1.1: Non-text Content (Level A)
4 | */
5 |
6 | export default {
7 | id: 'img_alt_empty',
8 | selector: 'img[alt=""], input[type="image"][alt=""]',
9 | excludeHidden: true,
10 | tags: [ 'cat.text-alternatives', 'wcag1a', 'wcag111' ],
11 | all: [],
12 | any: [ 'img_alt_empty_check' ],
13 | none: [],
14 | metadata: {
15 | description: 'Ensures images with attributes alt="" are not used when they require alternative text',
16 | help: 'Images with empty alt attributes must be decorative or already described in context',
17 | },
18 | };
19 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/img-alt-invalid.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Rule to check if images have valid alt text.
3 | * Based on WCAG 1.1.1 Non-text Content (Level A)
4 | */
5 |
6 | export default {
7 | id: 'img_alt_invalid',
8 | selector: 'img',
9 | excludeHidden: true,
10 | any: [],
11 | all: [ 'img_alt_invalid_check' ],
12 | none: [],
13 | tags: [ 'wcag1a', 'wcag111', 'cat.text-alternatives' ],
14 | metadata: {
15 | description: 'Ensures images have valid alternative text',
16 | help: 'Images must have meaningful alt text rather than filenames or generic text',
17 | helpUrl: 'https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html',
18 | },
19 | };
20 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/img-alt-long.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Rule for detecting images with alt text that is too long.
3 | * Based on WCAG 1.1.1: Non-text Content (Level A)
4 | */
5 |
6 | export default {
7 | id: 'img_alt_long',
8 | selector: 'img[alt]',
9 | excludeHidden: true,
10 | tags: [ 'cat.text-alternatives', 'wcag1a', 'wcag111' ],
11 | all: [],
12 | any: [ 'img_alt_long_check' ],
13 | none: [],
14 | metadata: {
15 | description: 'Ensures images do not have excessively long alt text',
16 | help: 'Image alt text should be concise and not exceed 300 characters',
17 | },
18 | };
19 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/img-alt-missing.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Rule to check if images have missing alt text.
3 | * Based on WCAG 1.1.1 Non-text Content (Level A)
4 | */
5 |
6 | export default {
7 | id: 'img_alt_missing',
8 | selector: 'img, input[type="image"]',
9 | excludeHidden: true,
10 | any: [],
11 | all: [],
12 | none: [ 'img_alt_missing_check' ],
13 | tags: [ 'wcag1a', 'wcag111', 'cat.text-alternatives' ],
14 | metadata: {
15 | description: 'Ensures images have alt text',
16 | help: 'Images must have an alt attribute',
17 | helpUrl: 'https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html',
18 | },
19 | };
20 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/img-alt-redundant.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'img_alt_redundant',
3 | selector: 'img, figure img',
4 | any: [ 'img_alt_redundant_check' ],
5 | none: [],
6 | tags: [ 'duplicate', 'redundant', 'accessibility' ],
7 | metadata: {
8 | description: 'Checks for redundant alternative text on images, including duplicate alt text across images; alt text matching title, link text or figcaption.',
9 | help: 'Ensure that each image has unique, meaningful alt text that does not duplicate related text (such as its title, associated link text, or accompanying caption).',
10 | helpUrl: 'https://a11ychecker.com/help1976',
11 | },
12 | };
13 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/img-animated.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Detect animated gifs and webps as well as common animated gif services.
3 | */
4 | export default {
5 | id: 'img_animated',
6 | // Selects both images and iframes that might contain animations
7 | selector: 'img[src], iframe[src]',
8 | excludeHidden: false,
9 | tags: [
10 | 'wcag2aa',
11 | 'wcag222',
12 | 'cat.sensory-and-visual-cues',
13 | 'best-practice',
14 | 'flashing',
15 | ],
16 | metadata: {
17 | description: 'Identifies animated images that may require user controls',
18 | help: 'Animated images (not static GIFs/WebPs) should be limited to less than 5 seconds or provide user controls to pause/stop',
19 | impact: 'serious',
20 | issue: {
21 | type: 'warning',
22 | message: 'Animated image content might need controls for accessibility compliance',
23 | tips: [
24 | 'Only animated images need controls, static GIFs/WebPs are fine',
25 | 'Limit animations to less than 5 seconds',
26 | 'Add controls to pause/stop animations',
27 | 'Consider using video elements with controls instead of animated GIFs',
28 | 'Avoid flashing content that could trigger seizures',
29 | ],
30 | },
31 | },
32 | all: [],
33 | any: [],
34 | none: [ 'img_animated_check' ],
35 | };
36 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/img-linked-alt-empty.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'img_linked_alt_empty',
3 | selector: 'a',
4 | tags: [
5 | 'wcag2a',
6 | 'wcag111',
7 | 'cat.text-alternatives',
8 | ],
9 | metadata: {
10 | description: 'Ensures linked images do not have empty alt text',
11 | help: 'Linked images must have meaningful alternative text describing the link purpose',
12 | impact: 'serious',
13 | },
14 | all: [],
15 | any: [ 'linked_image_alt_not_empty' ],
16 | none: [],
17 | };
18 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/img-linked-alt-missing.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Rule to detect the presence of linked images missing alternative text.
3 | * This rule ensures that linked images have meaningful alternative text
4 | * to describe the purpose of the link for accessibility.
5 | */
6 |
7 | export default {
8 | id: 'img_linked_alt_missing',
9 | selector: 'a',
10 | tags: [
11 | 'wcag2a',
12 | 'wcag111',
13 | 'cat.text-alternatives',
14 | ],
15 | metadata: {
16 | description: 'Checks that linked images have meaningful alternative text.',
17 | help: 'Linked images must have alternative text describing link purpose.',
18 | impact: 'serious',
19 | },
20 | all: [],
21 | any: [ 'linked_image_alt_present' ],
22 | none: [],
23 | };
24 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/link-ambiguous-text.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'link_ambiguous_text',
3 | enabled: true,
4 | selector: 'a',
5 | excludeHidden: false,
6 | tags: [
7 | 'cat.text',
8 | 'best-practices',
9 | ],
10 | metadata: {
11 | description: 'Detects ambiguous link text',
12 | help: 'Links should have descriptive text to help users understand their purpose.',
13 | },
14 | any: [],
15 | all: [],
16 | none: [ 'has_ambiguous_text' ],
17 | };
18 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/link-improper.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Rule to detect improper use of tags that are missing meaningful href attributes
3 | * and are not being used as buttons (via role="button").
4 | */
5 |
6 | export default {
7 | id: 'link_improper',
8 | selector: 'a',
9 | tags: [
10 | 'wcag2a',
11 | 'wcag412',
12 | 'cat.structure',
13 | ],
14 | metadata: {
15 | description: 'Links must have a meaningful href or an appropriate role if used as buttons.',
16 | help: 'Avoid using tags without href or with href="#" unless role="button" is used.',
17 | impact: 'serious',
18 | },
19 | all: [],
20 | any: [ 'link_has_valid_href_or_role' ],
21 | none: [],
22 | };
23 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/link-ms-office-file.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Detects linked MS Office files.
3 | */
4 |
5 | const msOfficeFileExtensions = [ '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.pps', '.ppsx' ];
6 |
7 | // This generates a very long list of selectors, 6 in total for each extension: extension at the end,
8 | // extension within having query vars, extension within having #anchors plus uppercase versions of the
9 | // file extension for each one of these cases. It is still quicker that iterating through all the links
10 | // on the page and checking the href in a matches.
11 | const selectorString = msOfficeFileExtensions.map( ( extension ) => `a[href$="${ extension }"], a[href$="${ extension.toUpperCase() }"], a[href*="${ extension }?"], a[href*="${ extension.toUpperCase() }?"], a[href*="${ extension }#"], a[href*="${ extension.toUpperCase() }#"]` ).join( ', ' );
12 |
13 | export default {
14 | id: 'link_ms_office_file',
15 | selector: selectorString,
16 | excludeHidden: false,
17 | tags: [
18 | 'cat.custom',
19 | ],
20 | metadata: {
21 | description: 'Links to MS Office documents typically should be checked.',
22 | },
23 | all: [],
24 | any: [ 'always-fail' ],
25 | none: [],
26 | };
27 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/link-non-html-file.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Rule to detect links pointing to non-HTML documents that may need a warning or alternate format.
3 | */
4 |
5 | export default {
6 | id: 'link_non_html_file',
7 | selector: 'a[href]',
8 | tags: [
9 | 'best-practice',
10 | 'cat.structure',
11 | ],
12 | metadata: {
13 | description: 'Links to non-HTML documents should be clearly labeled or avoided.',
14 | help: 'Avoid linking to non-HTML documents without warnings or alternatives.',
15 | impact: 'moderate',
16 | },
17 | all: [],
18 | any: [ 'link_points_to_html' ],
19 | none: [],
20 | };
21 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/link-pdf.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Detects linked PDFs.
3 | */
4 | export default {
5 | id: 'link_pdf',
6 | selector: 'a[href$=".pdf"], a[href$=".PDF"], a[href*=".pdf?"], a[href*=".PDF?"], a[href*=".pdf#"], a[href*=".PDF#"]',
7 | excludeHidden: false,
8 | tags: [
9 | 'cat.custom',
10 | ],
11 | metadata: {
12 | description: 'Links to PDFs typically should be checked.',
13 | },
14 | all: [],
15 | any: [ 'always-fail' ],
16 | none: [],
17 | };
18 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/link_target_blank.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check for links that open in a new tab without informing the user.
3 | */
4 |
5 | export default {
6 | id: 'link_blank',
7 | selector: 'a[target="_blank"]',
8 | excludeHidden: false,
9 | tags: [
10 | 'cat.custom',
11 | 'wcag2aaa',
12 | 'wcag322',
13 | 'wcag325',
14 | ],
15 | metadata: {
16 | description: 'Links that open in a new tab should inform the user.',
17 | help: 'Links that open in a new tab should inform the user. This is important for users who rely on screen readers, as they may not realize that a new tab has opened.',
18 | },
19 | all: [],
20 | any: [],
21 | none: [ 'link_target_blank_without_informing' ],
22 | };
23 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/long-description-invalid.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Rule to detect the presence of invalid longdesc attributes on images.
3 | * This rule ensures that the longdesc attribute points to a valid, non-image resource
4 | * that provides a detailed description for the image.
5 | */
6 |
7 | export default {
8 | id: 'long_description_invalid',
9 | selector: 'img[longdesc]',
10 | tags: [
11 | 'wcag2a',
12 | 'wcag131',
13 | 'cat.text-alternatives',
14 | ],
15 | metadata: {
16 | description: 'Checks that longdesc attributes are valid and do not point to images.',
17 | help: 'longdesc should link to a non-image resource with a detailed description',
18 | impact: 'moderate',
19 | },
20 | all: [],
21 | any: [ 'longdesc_valid' ],
22 | none: [],
23 | };
24 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/missing-headings.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'missing_headings',
3 | selector: 'body',
4 | tags: [ 'wcag2a', 'best-practice' ],
5 | all: [],
6 | any: [ 'has_subheadings_if_long_content' ],
7 | none: [],
8 | metadata: {
9 | description: 'Ensures long content has appropriate heading structure',
10 | help: 'Content with more than 400 words should contain headings to improve readability and structure',
11 | },
12 | };
13 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/missing-transcript.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check to detect the presence of a transcript for media elements.
3 | * Ensures that audio, video, or iframe elements are accompanied by a transcript or a link to one.
4 | *
5 | * @param {Node} node The node to evaluate.
6 | * @return {boolean} True if a transcript is present, false otherwise.
7 | */
8 |
9 | export default {
10 | id: 'missing_transcript',
11 | selector: 'audio, video, iframe, a[href]',
12 | excludeHidden: false,
13 | tags: [
14 | 'wcag2a',
15 | 'wcag122',
16 | 'cat.time-and-media',
17 | ],
18 | metadata: {
19 | description: 'Media content should be accompanied by a text transcript',
20 | help: 'Ensure audio or video content includes a nearby transcript or transcript link',
21 | impact: 'serious',
22 | },
23 | all: [],
24 | any: [ 'has_transcript' ],
25 | none: [],
26 | };
27 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/possible-heading.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'possible_heading',
3 | selector: 'p',
4 | matches: ( node ) => {
5 | // Not inside a blockquote, figcaption or table cell
6 | return ! node.closest( 'blockquote, figcaption, td' );
7 | },
8 | excludeHidden: false,
9 | tags: [
10 | 'wcag2a',
11 | 'wcag131',
12 | 'wcag241',
13 | 'cat.semantics',
14 | ],
15 | metadata: {
16 | description: 'Headings should be used to convey the structure of the page, not styled paragraphs',
17 | help: 'Paragraphs should not be styled to look like headings. Use the appropriate heading tag instead.',
18 | },
19 | all: [],
20 | any: [],
21 | none: [ 'paragraph_styled_as_header' ],
22 | };
23 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/slider-present.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check to detect the presence of slider/carousel components that may require accessibility features.
3 | * Identifies various slider types including those with specific classes, data attributes, or roles.
4 | *
5 | * @param {Node} node The node to evaluate.
6 | * @return {boolean} False if the node is a slider/carousel element (triggering violation), true otherwise (no violation).
7 | */
8 |
9 | export default {
10 | id: 'slider_present',
11 | selector: '[class], [data-jssor-slider], [data-layerslider-uid]',
12 | excludeHidden: false,
13 | tags: [ 'cat.structure' ],
14 | metadata: {
15 | description: 'Identifies presence of slider/carousel components that may require accessibility improvements',
16 | help: 'Sliders and carousels must be keyboard accessible and provide appropriate navigation controls',
17 | impact: 'moderate',
18 | },
19 | all: [],
20 | any: [ 'slider_detected' ],
21 | none: [],
22 | };
23 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/table-header-missing.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check to detect the presence of table headers.
3 | * Ensures that tables have elements or appropriate scope attributes to define headers.
4 | *
5 | * @param {Node} node The node to evaluate.
6 | * @return {boolean} True if table headers are present, false otherwise.
7 | */
8 |
9 | export default {
10 | id: 'missing_table_header',
11 | selector: 'table',
12 | excludeHidden: false,
13 | tags: [
14 | 'wcag2a',
15 | 'wcag131',
16 | 'cat.structure',
17 | ],
18 | metadata: {
19 | description: 'Tables must have header cells to convey data relationships',
20 | help: 'Ensure that tables use elements with text or appropriate scope attributes',
21 | impact: 'serious',
22 | },
23 | all: [],
24 | any: [ 'table_has_headers' ],
25 | none: [],
26 | };
27 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/text-justified.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Rule: Text Justified
3 | *
4 | * Text elements should not be justified because it interferes with readability.
5 | */
6 |
7 | const TEXT_JUSTIFIED_CHECK_THRESHOLD = 200;
8 | export default {
9 | id: 'text_justified',
10 | selector: 'p, span, small, strong, b, i, em, h1, h2, h3, h4, h5, h6, a, label, button, th, td, li, div, blockquote, address, cite, q, s, sub, sup, u, del, caption, dt, dd, figcaption, summary, data, time',
11 | matches: ( element ) => {
12 | return element.textContent.trim().length >= TEXT_JUSTIFIED_CHECK_THRESHOLD;
13 | },
14 | tags: [ 'wcag2aaa', 'wcag148', 'cat.text', 'custom' ],
15 | metadata: {
16 | description: 'Text elements inside containers should not be justified.',
17 | },
18 | all: [],
19 | any: [],
20 | none: [ 'text_is_justified' ],
21 | };
22 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/text-small.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Rule: Text small failure
3 | *
4 | * Text should have a minimum size and anything below that is a fail.
5 | */
6 |
7 | export default {
8 | id: 'text_small',
9 | impact: 'moderate',
10 | selector: 'p, span, small, strong, b, i, h1, h2, h3, h4, h5, h6, a, label, button, th, td, li, div, blockquote, address, cite, code, pre, q, s, sub, sup, u, var, abbr, acronym, del, dfn, em, ins, kbd, input, select, textarea, caption, dl, dt, dd, li, figure, figcaption, details, dialog, summary, data, time',
11 | matches: ( element ) => {
12 | // only run checks on elements with text content
13 | return element.textContent.trim().length;
14 | },
15 | tags: [ 'wcag2aaa', 'wcag144', 'wcag148', 'cat.text' ],
16 | metadata: {
17 | description: 'Text elements should not be too small.',
18 | },
19 | all: [],
20 | any: [],
21 | none: [ 'text_size_too_small' ],
22 | };
23 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/underlined-text.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Rule: Underlined text failure
3 | *
4 | * Text elements should not use the `u` and text elements should not be
5 | * underlined unless they are links.
6 | */
7 |
8 | export default {
9 | id: 'underlined_text',
10 | impact: 'moderate',
11 | selector: '*:not(a):not(html):not(head):not(body)',
12 | matches: ( element ) => {
13 | // U tags we will always check.
14 | if ( element.tagName.toLowerCase() === 'u' ) {
15 | return true;
16 | }
17 |
18 | // Traverse up the dom 3 levels and check if the element is inside an anchor.
19 | let parent = element.parentNode;
20 | let isInsideAnchor = false;
21 | for ( let i = 0; i < 3; i++ ) {
22 | // Can't go further up the dom if the parent is the html element.
23 | if ( parent.tagName.toLowerCase() === 'html' ) {
24 | break;
25 | }
26 | if ( parent && parent.tagName.toLowerCase() === 'a' ) {
27 | isInsideAnchor = true;
28 | break;
29 | }
30 | parent = parent.parentNode;
31 | }
32 |
33 | // If in an anchor, don't check underline.
34 | return ! isInsideAnchor;
35 | },
36 | tags: [ 'wcag324', 'wcag21aa', 'cat.text', 'custom' ],
37 | metadata: {
38 | description: 'Text elements should not be underlined unless they are links.',
39 | },
40 | all: [],
41 | any: [],
42 | none: [ 'element_is_u_tag', 'element_has_computed_underline' ],
43 | };
44 |
--------------------------------------------------------------------------------
/src/pageScanner/rules/video-present.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Rule to detect the presence of video content that may require accessibility features.
3 | * This rule works with the video_detected check to identify various video elements
4 | * that might need captions, audio descriptions, or other accessibility enhancements.
5 | */
6 |
7 | export default {
8 | id: 'video_present',
9 | selector: 'video, iframe, object, source, [src], [role]',
10 | excludeHidden: false,
11 | tags: [
12 | 'wcag2a',
13 | 'wcag121',
14 | 'wcag122',
15 | 'wcag123',
16 | 'cat.time-and-media',
17 | 'cat.sensory',
18 | ],
19 | metadata: {
20 | description: 'Identifies presence of video content that may require accessibility features',
21 | help: 'Video content should have appropriate alternatives like captions and audio descriptions',
22 | impact: 'serious',
23 | },
24 | all: [],
25 | any: [],
26 | none: [ 'is_video_detected' ],
27 | };
28 |
--------------------------------------------------------------------------------
/src/pageScanner/utils/aria-utils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check if ARIA attributes that reference elements by ID point to existing elements.
3 | *
4 | * @param {Node} node The node to evaluate.
5 | * @param {string} attributeName The ARIA attribute name to check (e.g., 'aria-labelledby').
6 | * @return {boolean} True if a non-empty references exist, false otherwise.
7 | */
8 | export function checkAriaReferences( node, attributeName ) {
9 | const attrValue = node.getAttribute( attributeName ) || '';
10 | if ( ! attrValue.trim() ) {
11 | return false; // Skip empty values
12 | }
13 | const ids = attrValue.split( /\s+/ ).filter( ( id ) => id.trim() );
14 | return ids.length === 0 || ids.every( ( id ) => document.getElementById( id ) !== null );
15 | }
16 |
--------------------------------------------------------------------------------
/tests/assets/animated.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/equalizedigital/accessibility-checker/9801683ac06a12ac594ff6a87ca42e5ceb409d4b/tests/assets/animated.gif
--------------------------------------------------------------------------------
/tests/assets/animated.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/equalizedigital/accessibility-checker/9801683ac06a12ac594ff6a87ca42e5ceb409d4b/tests/assets/animated.webp
--------------------------------------------------------------------------------
/tests/assets/static.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/equalizedigital/accessibility-checker/9801683ac06a12ac594ff6a87ca42e5ceb409d4b/tests/assets/static.gif
--------------------------------------------------------------------------------
/tests/assets/static.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/equalizedigital/accessibility-checker/9801683ac06a12ac594ff6a87ca42e5ceb409d4b/tests/assets/static.webp
--------------------------------------------------------------------------------
/tests/bootstrap-dev.php:
--------------------------------------------------------------------------------
1 | {
4 | let map;
5 |
6 | beforeEach( () => {
7 | map = new NormalizedMap();
8 | } );
9 |
10 | test( 'should store and retrieve keys in a case-insensitive manner', () => {
11 | map.set( 'TestKey', 'value' );
12 | expect( map.get( 'testkey' ) ).toBe( 'value' );
13 | expect( map.get( 'TESTKEY' ) ).toBe( 'value' );
14 | expect( map.get( 'TestKey' ) ).toBe( 'value' );
15 | } );
16 |
17 | test( 'should check existence of keys in a case-insensitive manner', () => {
18 | map.set( 'AnotherKey', 'value' );
19 | expect( map.has( 'anotherkey' ) ).toBe( true );
20 | expect( map.has( 'ANOTHERKEY' ) ).toBe( true );
21 | expect( map.has( 'AnotherKey' ) ).toBe( true );
22 | } );
23 |
24 | test( 'should delete keys in a case-insensitive manner', () => {
25 | map.set( 'KeyToDelete', 'value' );
26 | expect( map.has( 'keytodelete' ) ).toBe( true );
27 |
28 | map.delete( 'KEYTODELETE' );
29 | expect( map.has( 'KeyToDelete' ) ).toBe( false );
30 | } );
31 |
32 | test( 'should handle non-string keys without normalization', () => {
33 | const objKey = {};
34 | map.set( objKey, 'value' );
35 | expect( map.get( objKey ) ).toBe( 'value' );
36 | expect( map.has( objKey ) ).toBe( true );
37 |
38 | map.delete( objKey );
39 | expect( map.has( objKey ) ).toBe( false );
40 | } );
41 |
42 | test( 'should handle mixed string and non-string keys correctly', () => {
43 | map.set( 'StringKey', 'stringValue' );
44 | map.set( 123, 'numberValue' );
45 |
46 | expect( map.get( 'stringkey' ) ).toBe( 'stringValue' );
47 | expect( map.get( 123 ) ).toBe( 'numberValue' );
48 | } );
49 | } );
50 |
--------------------------------------------------------------------------------
/tests/jest/jest.config.js:
--------------------------------------------------------------------------------
1 | /* global module */
2 | module.exports = {
3 | testEnvironment: 'jsdom',
4 | transform: {
5 | '^.+\\.js$': [ 'babel-jest', { configFile: require.resolve( '../jest/babel.config.js' ) } ] },
6 | transformIgnorePatterns: [
7 | 'node_modules/(?!(axe-core)/)',
8 | ],
9 | testMatch: [
10 | '**/tests/jest/**/*.test.js',
11 | ],
12 | };
13 |
--------------------------------------------------------------------------------
/tests/jest/mock-assets/A-image.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/equalizedigital/accessibility-checker/9801683ac06a12ac594ff6a87ca42e5ceb409d4b/tests/jest/mock-assets/A-image.gif
--------------------------------------------------------------------------------
/tests/jest/mock-assets/A-image.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/equalizedigital/accessibility-checker/9801683ac06a12ac594ff6a87ca42e5ceb409d4b/tests/jest/mock-assets/A-image.webp
--------------------------------------------------------------------------------
/tests/jest/mock-assets/S-1x1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/equalizedigital/accessibility-checker/9801683ac06a12ac594ff6a87ca42e5ceb409d4b/tests/jest/mock-assets/S-1x1.gif
--------------------------------------------------------------------------------
/tests/jest/mock-assets/S-animated-in-name.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/equalizedigital/accessibility-checker/9801683ac06a12ac594ff6a87ca42e5ceb409d4b/tests/jest/mock-assets/S-animated-in-name.gif
--------------------------------------------------------------------------------
/tests/jest/mock-assets/S-animated-in-name.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/equalizedigital/accessibility-checker/9801683ac06a12ac594ff6a87ca42e5ceb409d4b/tests/jest/mock-assets/S-animated-in-name.webp
--------------------------------------------------------------------------------
/tests/jest/mock-assets/S-image.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/equalizedigital/accessibility-checker/9801683ac06a12ac594ff6a87ca42e5ceb409d4b/tests/jest/mock-assets/S-image.gif
--------------------------------------------------------------------------------
/tests/jest/mock-assets/S-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/equalizedigital/accessibility-checker/9801683ac06a12ac594ff6a87ca42e5ceb409d4b/tests/jest/mock-assets/S-image.jpg
--------------------------------------------------------------------------------
/tests/jest/mock-assets/S-image.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/equalizedigital/accessibility-checker/9801683ac06a12ac594ff6a87ca42e5ceb409d4b/tests/jest/mock-assets/S-image.webp
--------------------------------------------------------------------------------
/tests/jest/pageScanner/context.test.js:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Test for scanner context exclusions
4 | *
5 | * This test verifies that elements with the selectors in the exclude array
6 | * are properly excluded from accessibility scans, including the newly added
7 | * #qm-icon-container selector.
8 | */
9 | import axe from 'axe-core';
10 | import { exclusionsArray } from '../../../src/pageScanner/config/exclusions';
11 |
12 | describe( 'Scanner Context Exclusions', ( ) => {
13 | beforeEach( ( ) => {
14 | // Reset the DOM before each test
15 | document.body.innerHTML = '';
16 | } );
17 |
18 | test( 'should exclude configured containers from scan', async ( ) => {
19 | // Create test HTML with empty buttons (accessibility violation)
20 | // Some in regular content, others in containers that should be excluded
21 | document.body.innerHTML = `
22 |
23 |
24 |
25 |
26 | ',
39 | shouldPass: false,
40 | },
41 | {
42 | name: 'ignores case variations in class names',
43 | html: '',
44 | shouldPass: false,
45 | },
46 | {
47 | name: 'detects data-jssor-slider',
48 | html: '',
49 | shouldPass: false,
50 | },
51 | {
52 | name: 'detects data-layerslider-uid',
53 | html: '',
54 | shouldPass: false,
55 | },
56 | {
57 | name: 'ignores unrelated div with no classes',
58 | html: '',
59 | shouldPass: true,
60 | },
61 | {
62 | name: 'ignores unrelated section with text content',
63 | html: 'Just content ',
64 | shouldPass: true,
65 | },
66 | {
67 | name: 'ignores similar but unrelated class name',
68 | html: '',
69 | shouldPass: true,
70 | },
71 | {
72 | name: 'ignores [data-slider-id] which is not a match',
73 | html: '',
74 | shouldPass: true,
75 | },
76 | ] )( '$name', async ( { html, shouldPass } ) => {
77 | document.body.innerHTML = html;
78 |
79 | const results = await axe.run( document.body, {
80 | runOnly: [ 'slider_present' ],
81 | } );
82 |
83 | if ( shouldPass ) {
84 | expect( results.violations.length ).toBe( 0 );
85 | } else {
86 | expect( results.violations.length ).toBeGreaterThan( 0 );
87 | }
88 | } );
89 | } );
90 |
--------------------------------------------------------------------------------
/tests/phpunit/Admin/MetaBoxesTest.php:
--------------------------------------------------------------------------------
1 | getMockBuilder( Meta_Boxes::class )
24 | ->onlyMethods( [ 'register_meta_boxes' ] )
25 | ->getMock();
26 |
27 | $meta_boxes->expects( $this->once() )
28 | ->method( 'register_meta_boxes' );
29 |
30 | $this->invoke_admin_init( $meta_boxes );
31 | do_action( 'add_meta_boxes' );
32 | }
33 |
34 | /**
35 | * Test the init_hooks method.
36 | *
37 | * @return void
38 | */
39 | public function test_init_hooks(): void {
40 | $meta_boxes = new Meta_Boxes();
41 | $meta_boxes->init_hooks();
42 |
43 | $this->assertEquals(
44 | 10,
45 | has_action(
46 | 'add_meta_boxes',
47 | [
48 | $meta_boxes,
49 | 'register_meta_boxes',
50 | ]
51 | )
52 | );
53 | }
54 |
55 | /**
56 | * Test the render method.
57 | *
58 | * @return void
59 | */
60 | public function test_render(): void {
61 | $meta_boxes = new Meta_Boxes();
62 | $meta_boxes->render();
63 |
64 | $this->expectOutputRegex( '/^
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | `;
39 |
40 | // Define context with exclude list matching src/pageScanner/index.js
41 | const context = {
42 | exclude: exclusionsArray,
43 | };
44 |
45 | // Run axe with button-name rule to detect empty buttons
46 | const results = await axe.run( context, {
47 | runOnly: [ 'button-name' ],
48 | } );
49 |
50 | // Get all HTML from the violation nodes
51 | const violationHTML = results.violations
52 | .flatMap( ( violation ) => violation.nodes )
53 | .map( ( node ) => node.html );
54 |
55 | // Control button should appear in violations
56 | expect( violationHTML.some( ( html ) => html.includes( 'id="control-button"' ) ) ).toBe( true );
57 |
58 | // Buttons in excluded containers should not appear in violations
59 | expect( violationHTML.some( ( html ) => html.includes( 'id="qm-icon-button"' ) ) ).toBe( false );
60 | expect( violationHTML.some( ( html ) => html.includes( 'id="wpadminbar-button"' ) ) ).toBe( false );
61 | expect( violationHTML.some( ( html ) => html.includes( 'id="query-monitor-button"' ) ) ).toBe( false );
62 | expect( violationHTML.some( ( html ) => html.includes( 'id="edac-panel-button"' ) ) ).toBe( false );
63 | } );
64 | } );
65 |
--------------------------------------------------------------------------------
/tests/jest/rules/missingHeadings.test.js:
--------------------------------------------------------------------------------
1 | import axe from 'axe-core';
2 |
3 | beforeAll( async () => {
4 | const ruleModule = await import( '../../../src/pageScanner/rules/missing-headings.js' );
5 | const checkModule = await import( '../../../src/pageScanner/checks/has-subheadings-if-long-content.js' );
6 |
7 | axe.configure( {
8 | rules: [ ruleModule.default ],
9 | checks: [ checkModule.default ],
10 | } );
11 | } );
12 |
13 | describe( 'Missing Headings Rule', () => {
14 | test.each( [
15 | // ✅ Passing cases
16 | {
17 | name: 'Passes with short content (under 400 words)',
18 | html: 'Short content.
', 19 | shouldPass: true, 20 | }, 21 | { 22 | name: 'Passes with long content and h2 heading', 23 | html: `
24 |
`,
27 | shouldPass: true,
28 | },
29 | {
30 | name: 'Passes with long content and ARIA heading',
31 | html: `Section Title
25 | ${ 'Lorem ipsum '.repeat( 500 ) } 26 |
32 |
`,
35 | shouldPass: true,
36 | },
37 |
38 | // ❌ Failing cases
39 | {
40 | name: 'Fails with long content and no headings',
41 | html: `Section Title
33 | ${ 'Lorem ipsum '.repeat( 500 ) }
34 | ${ 'Lorem ipsum '.repeat( 500 ) }
`,
42 | shouldPass: false,
43 | },
44 | ] )( '$name', async ( { html, shouldPass } ) => {
45 | document.body.innerHTML = html;
46 |
47 | const results = await axe.run( document.body, {
48 | runOnly: [ 'missing_headings' ],
49 | } );
50 |
51 | if ( shouldPass ) {
52 | expect( results.violations.length ).toBe( 0 );
53 | } else {
54 | expect( results.violations.length ).toBeGreaterThan( 0 );
55 | }
56 | } );
57 | } );
58 |
--------------------------------------------------------------------------------
/tests/jest/rules/sliderPresent.test.js:
--------------------------------------------------------------------------------
1 | import axe from 'axe-core';
2 |
3 | let sliderClassKeywords = [];
4 |
5 | beforeAll( async () => {
6 | const sliderRuleModule = await import( '../../../src/pageScanner/rules/slider-present.js' );
7 | const sliderCheckModule = await import( '../../../src/pageScanner/checks/slider-detected.js' );
8 |
9 | const sliderRule = sliderRuleModule.default;
10 | const sliderCheck = sliderCheckModule.default;
11 |
12 | sliderClassKeywords = sliderCheckModule.sliderClassKeywords;
13 |
14 | axe.configure( {
15 | rules: [ sliderRule ],
16 | checks: [ sliderCheck ],
17 | } );
18 | } );
19 |
20 | beforeEach( () => {
21 | document.body.innerHTML = '';
22 | } );
23 |
24 | describe( 'Slider Detection Rule', () => {
25 | test.each( [
26 | ...sliderClassKeywords.map( ( keyword ) => ( {
27 | name: `detects slider with class "${ keyword }"`,
28 | html: ``,
29 | shouldPass: false,
30 | } ) ),
31 | {
32 | name: 'detects slider with multiple classes including a slider class',
33 | html: '',
34 | shouldPass: false,
35 | },
36 | {
37 | name: 'handles nested slider elements correctly',
38 | html: 'Nested slider
expectOutputRegex( '/role="tablist"/' );
66 | $this->expectOutputRegex( '/role="tab"/' );
67 | $this->expectOutputRegex( '/role="tabpanel"/' );
68 | }
69 |
70 | /**
71 | * Invoke the admin init method.
72 | *
73 | * @param Meta_Boxes $meta_boxes The metabox class.
74 | * @return void
75 | */
76 | private function invoke_admin_init( $meta_boxes ): void {
77 | $admin = new Admin( $meta_boxes );
78 | $admin->init();
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/tests/phpunit/RegisterRulesTest.php:
--------------------------------------------------------------------------------
1 | assertIsArray( $rules );
19 | $this->assertNotEmpty( $rules );
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/tests/phpunit/TestHelpers/DatabaseHelpers.php:
--------------------------------------------------------------------------------
1 | edac_update_database();
27 | }
28 | /**
29 | * Insert a record to the database for a given post.
30 | *
31 | * @param WP_Post $post The post to insert the record for.
32 | *
33 | * @return void
34 | */
35 | public static function insert_test_issue_to_db( WP_Post $post ): void {
36 |
37 | global $wpdb;
38 | $table_name = $wpdb->prefix . 'accessibility_checker';
39 | $wpdb->insert( // phpcs:ignore WordPress.DB -- using direct query for testing.
40 | $table_name,
41 | [
42 | 'postid' => $post->ID,
43 | 'siteid' => get_current_blog_id(),
44 | 'type' => $post->post_type,
45 | 'rule' => 'empty_paragraph_tag',
46 | 'ruletype' => 'warning',
47 | 'object' => '',
48 | 'recordcheck' => 1,
49 | 'user' => get_current_user_id(),
50 | 'ignre' => 0,
51 | 'ignre_user' => null,
52 | 'ignre_date' => null,
53 | 'ignre_comment' => null,
54 | 'ignre_global' => 0,
55 | ]
56 | );
57 | }
58 |
59 | /**
60 | * Drops the table for the plugin if it exists.
61 | *
62 | * Used for cleanup after tests.
63 | *
64 | * @return void
65 | */
66 | public static function drop_table() {
67 | global $wpdb;
68 | $table_name = $wpdb->prefix . 'accessibility_checker';
69 | $wpdb->query( 'DROP TABLE IF EXISTS ' . $table_name ); // phpcs:ignore WordPress.DB -- query for a unit test.
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/tests/phpunit/helper-functions/CompareStringsTest.php:
--------------------------------------------------------------------------------
1 | assertSame(
24 | $expected,
25 | edac_compare_strings( $string1, $string2 )
26 | );
27 | }
28 |
29 | /**
30 | * Data provider for test_edac_compare_strings.
31 | */
32 | public function edac_compare_strings_data() {
33 | return [
34 | 'mixed upper/lower letters' => [
35 | 'string1' => 'random string',
36 | 'string2' => 'RanDom StrIng',
37 | 'expected' => true,
38 | ],
39 | 'different casing with same html tags' => [
40 | 'string1' => '
random string
', 41 | 'string2' => 'RanDom StrIng
', 42 | 'expected' => true, 43 | ], 44 | 'with different html tags' => [ 45 | 'string1' => 'random string
', 46 | 'string2' => 'random string
',
47 | 'expected' => true,
48 | ],
49 | 'containing "permalink of/to" strings' => [
50 | 'string1' => 'permalink of random string',
51 | 'string2' => 'permalink to random string',
52 | 'expected' => true,
53 | ],
54 | 'containing " " strings' => [
55 | 'string1' => 'random string',
56 | 'string2' => 'random string',
57 | 'expected' => true,
58 | ],
59 | 'different strings' => [
60 | 'string1' => 'random string',
61 | 'string2' => 'different string',
62 | 'expected' => false,
63 | ],
64 | ];
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/tests/phpunit/includes/classes/SimplifiedSummaryTest.php:
--------------------------------------------------------------------------------
1 | simplified_summary = new Simplified_Summary();
35 | }
36 |
37 | /**
38 | * Tests output of simplified_summary_markup with a summary.
39 | *
40 | * Verifies that the correct HTML markup is returned when a post
41 | * has a simplified summary.
42 | *
43 | * @return void
44 | */
45 | public function test_simplified_summary_markup_with_summary() {
46 | $post_id = self::factory()->post->create();
47 | update_post_meta( $post_id, '_edac_simplified_summary', 'This is a simplified summary.' );
48 |
49 | $output = $this->simplified_summary->simplified_summary_markup( $post_id );
50 | $this->assertStringContainsString( '', $output );
51 | $this->assertStringContainsString( '
', $output );
54 | }
55 |
56 | /**
57 | * Tests output of simplified_summary_markup without a summary.
58 | *
59 | * Ensures that an empty string is returned when a post does not
60 | * have a simplified summary.
61 | *
62 | * @return void
63 | */
64 | public function test_simplified_summary_markup_without_summary() {
65 | $post_id = self::factory()->post->create();
66 |
67 | $output = $this->simplified_summary->simplified_summary_markup( $post_id );
68 | $this->assertEmpty( $output );
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/tests/phpunit/includes/classes/SummaryGeneratorTest.php:
--------------------------------------------------------------------------------
1 | post->create();
22 | update_post_meta( $post_id, '_edac_density_data', '0,0' );
23 |
24 | $simplified_summary = new Summary_Generator( $post_id );
25 |
26 | // Reflection means that the method was hard to test in isolation and
27 | // likely warrants a refactor so that the method is more testable.
28 | $method = ( new ReflectionClass( get_class( $simplified_summary ) ) )
29 | ->getMethod( 'update_issue_density' );
30 | $method->setAccessible( true );
31 |
32 | $method->invoke( $simplified_summary, [] );
33 |
34 | // We are really testing here that the method does not throw an error,
35 | // but we may as well check that the meta didn't change as well since
36 | // we are here and by this point already know the method did not fatal.
37 | $this->assertEquals(
38 | '0,0',
39 | get_post_meta( $post_id, '_edac_density_data', true )
40 | );
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/tests/phpunit/includes/classes/WPCLI/BootstrapCLITest.php:
--------------------------------------------------------------------------------
1 | get_subcommands() );
45 |
46 | $bootstrap_cli = new BootstrapCLI( new WP_CLI() );
47 | $bootstrap_cli->register();
48 |
49 | $commands = WP_CLI::get_root_command();
50 | $command_count_after = count( $commands->get_subcommands() );
51 |
52 | // check if the number of commands has increased after register is called.
53 | $this->assertGreaterThan( $command_count, $command_count_after );
54 | }
55 |
56 | /**
57 | * Test the bootstrap CLI command with a mock that throws an exception when
58 | * adding commands.
59 | */
60 | public function test_bootstrap_cli_command_with_exception() {
61 | WP_CLI::set_add_command_should_throw( true );
62 |
63 | $bootstrap_cli = new BootstrapCLI( new WP_CLI() );
64 |
65 | ob_start();
66 | $bootstrap_cli->register();
67 | $output = ob_get_clean();
68 |
69 | // check if the output contains the expected exception message.
70 | $this->assertStringStartsWith( 'Warning: Failed to register command', $output );
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/update-composer-config.php:
--------------------------------------------------------------------------------
1 | Simplified Summary
', $output ); 52 | $this->assertStringContainsString( 'This is a simplified summary.
', $output ); 53 | $this->assertStringContainsString( '