Fix: allow anchors with role none, presentation or slider

An <a> with role="none" or role="presentation" is removed from the
accessibility tree, and an <a> with role="slider" is exposed as a
slider. Neither is a link, so neither should be reported as improper
link usage. role="slider" joins the existing button and tab allowlist,
which stays unconditional: none of those roles is exposed as a link, so
the anchor is not being used improperly however it is focused.

The presentational roles get a narrower exemption, per the presentational
roles conflict resolution: the role is ignored, and the element still
exposed, when the anchor is focusable or carries a global ARIA state or
property. So <a href="#" role="none"> continues to fail.

The global ARIA half is approximated as any aria-* attribute, which errs
toward reporting. aria-hidden is excluded because it removes the element
from the tree outright, making the role moot, matching how
linked-image-alt-present handles it.

Update how_to_fix and the rule help text to name the presentational
roles the scanner now accepts, following ac471ce.

Fixes #1748

Author: mjoslyn

includes/classes/Rules/Rule/LinkImproperRule.php

@@ -41,10 +41,12 @@ public static function get_rule(): array {
 			),
 			'why_it_matters'        => esc_html__( 'Anchor tags (a.k.a. links) are intended for navigation to a new page or a different place on the same page. When they are used to trigger actions (such as expanding accordions or opening modals) without the correct roles or behavior, they confuse users, particularly those using screen readers or keyboards, who expect links to navigate rather than perform actions. They also are likely not to function with the space bar, which is an expectation of a button.', 'accessibility-checker' ),
 			'how_to_fix'            => sprintf(
-			// translators: %1$s is <code>&lt;button&gt;</code>, %2$s is <code>role="button"</code>.
-				esc_html__( 'If the element is used to trigger an action, replace the anchor tag with a %1$s. If you cannot replace it, ensure that %2$s is added to the link, along with JavaScript that adds support for triggering it with the space bar key, and that appropriate ARIA attributes are used for toggle states or other functionality.', 'accessibility-checker' ),
+			// translators: %1$s is <code>&lt;button&gt;</code>, %2$s is <code>role="button"</code>, %3$s is <code>role="none"</code>, %4$s is <code>role="presentation"</code>.
+				esc_html__( 'If the element is used to trigger an action, replace the anchor tag with a %1$s. If you cannot replace it, ensure that %2$s is added to the link, along with JavaScript that adds support for triggering it with the space bar key, and that appropriate ARIA attributes are used for toggle states or other functionality. If the anchor is purely decorative and cannot be focused, %3$s or %4$s marks it as presentational so it is not reported.', 'accessibility-checker' ),
 				'<code>&lt;button&gt;</code>',
-				'<code>role="button"</code>'
+				'<code>role="button"</code>',
+				'<code>role="none"</code>',
+				'<code>role="presentation"</code>'
 			),
 			'references'            => [
 				[

src/pageScanner/checks/link-has-valid-href-or-role.js

@@ -18,8 +18,8 @@ export default {
 		// Parse roles once for efficiency (DRY principle)
 		const roles = role.toLowerCase().split( /\s+/ );
 
-		// Allow roles of button or tab
-		if ( roles.some( ( r ) => [ 'button', 'tab' ].includes( r ) ) ) {
+		// Allow roles of button, tab or slider
+		if ( roles.some( ( r ) => [ 'button', 'tab', 'slider' ].includes( r ) ) ) {
 			return true;
 		}
 
@@ -30,6 +30,24 @@ export default {
 			return true;
 		}
 
+		// Allow role="none"/"presentation", which removes the element from the accessibility
+		// tree so it is never exposed as a link. Unlike the named-anchor exemption below,
+		// content is permitted here: the role applies regardless of what the anchor wraps.
+		// Per the presentational roles conflict resolution the role is ignored on an element
+		// that is focusable or carries global ARIA states or properties, so neither may apply.
+		const isFocusable = node.hasAttribute( 'href' ) || node.hasAttribute( 'tabindex' );
+		if ( ! isFocusable && ( roles.includes( 'none' ) || roles.includes( 'presentation' ) ) ) {
+			// Approximated as any aria-* attribute, which errs toward reporting. aria-hidden is
+			// excluded because it removes the element from the tree outright, making the role moot.
+			const hasGlobalAria = Array.from( node.attributes ).some(
+				( attr ) => attr.name.startsWith( 'aria-' ) && attr.name !== 'aria-hidden'
+			);
+
+			if ( ! hasGlobalAria ) {
+				return true;
+			}
+		}
+
 		// Allow named anchors used as jump targets: no href, has id/name, no visible content,
 		// and not keyboard-focusable.
 		// Per the HTML spec, <a> without href has role="generic" and is not keyboard focusable,

src/pageScanner/rules/link-improper.js

@@ -13,7 +13,7 @@ export default {
 	],
 	metadata: {
 		description: 'Links must have a meaningful href or an appropriate role if used as buttons.',
-		help: 'Avoid using <a> tags without href or with href="#" unless role="button" is used.',
+		help: 'Avoid using <a> tags without href or with href="#" unless a widget role such as role="button" is used, or the anchor is non-focusable and marked role="none".',
 		impact: 'serious',
 	},
 	all: [],

tests/jest/rules/linkImproper.test.js

@@ -202,6 +202,74 @@ describe( 'Link Improper Rule', () => {
 			html: '<a id="meet-the-team" tabindex="-1"></a>',
 			shouldPass: true,
 		},
+
+		// Presentational role cases. See https://github.com/equalizedigital/accessibility-checker/issues/1748
+		{
+			name: 'Passes with role="none" on a non-focusable dropdown wrapper',
+			html: '<a role="none"><span class="nav-drop-title-wrap">eBranch<span class="dropdown-nav-toggle"><span class="kadence-svg-iconset svg-baseline"><svg aria-hidden="true" class="kadence-svg-icon" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Expand</title><path d="M5.293 9.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6z"></path> </svg></span></span></span></a>',
+			shouldPass: true,
+		},
+		{
+			name: 'Passes with role="presentation" and no href',
+			html: '<a role="presentation"><span>Menu</span></a>',
+			shouldPass: true,
+		},
+		{
+			name: 'Passes with multiple roles including none and no href',
+			html: '<a role="foo none bar"><span>Menu</span></a>',
+			shouldPass: true,
+		},
+		{
+			name: 'Fails with role="none" when focusable via href="#"',
+			html: '<a href="#" role="none">Click</a>',
+			shouldPass: false,
+		},
+		{
+			name: 'Fails with role="none" when focusable via tabindex',
+			html: '<a role="none" tabindex="0">Click</a>',
+			shouldPass: false,
+		},
+		{
+			// tabindex="-1" is focusable programmatically and by click, so the presentational
+			// role is ignored per the conflict resolution.
+			name: 'Fails with role="none" and tabindex of -1',
+			html: '<a role="none" tabindex="-1">Click</a>',
+			shouldPass: false,
+		},
+		{
+			name: 'Fails with role="none" and a global aria attribute',
+			html: '<a role="none" aria-label="Open menu"><span>Menu</span></a>',
+			shouldPass: false,
+		},
+		{
+			name: 'Passes with role="none" and aria-hidden="true"',
+			html: '<a role="none" aria-hidden="true"><span>Menu</span></a>',
+			shouldPass: true,
+		},
+
+		// Slider role cases. See https://github.com/equalizedigital/accessibility-checker/issues/1748
+		{
+			name: 'Passes with role="slider" on a media player volume control',
+			html: '<a class="mejs-horizontal-volume-slider" href="javascript:void(0);" aria-label="Volume Slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" role="slider"><span class="mejs-offscreen">Use Up/Down Arrow keys to increase or decrease volume.</span><div class="mejs-horizontal-volume-total"><div class="mejs-horizontal-volume-current"></div><div class="mejs-horizontal-volume-handle"></div></div></a>',
+			shouldPass: true,
+		},
+		{
+			name: 'Passes with role="slider" and href="#"',
+			html: '<a href="#" role="slider" aria-valuenow="50">Volume</a>',
+			shouldPass: true,
+		},
+		{
+			name: 'Passes with role="slider" and no href',
+			html: '<a role="slider" tabindex="0" aria-valuenow="50">Volume</a>',
+			shouldPass: true,
+		},
+		{
+			// An inactive tab in a roving tabindex tablist is correct markup, so the widget
+			// role exemption must not depend on the anchor being in the tab order.
+			name: 'Passes with role="tab" and tabindex of -1',
+			html: '<a role="tab" tabindex="-1" id="tab-2" aria-controls="panel-2">Tab 2</a>',
+			shouldPass: true,
+		},
 	] )( '$name', async ( { html, shouldPass, setup } ) => {
 		document.body.innerHTML = html;