ngx-bootstrap icon indicating copy to clipboard operation
ngx-bootstrap copied to clipboard

WAVE Accessibility Warning: Redundant Link in Tabs

Open queejie opened this issue 1 year ago • 1 comments

Is your feature request related to a problem? Please describe. For accessibility, a warning is issued for the link with the javascript:void(0); link in tabs.

A clear and concise description of what the problem is. We are trying to create a site with clear accessibility.

Describe the solution you'd like I have a current solution, but I am not certain it is the best one.

A clear and concise description of what you want to happen. Possibly remove the link, and handle the click on the list item element alone.

Describe alternatives you've considered Currently, replacing the javascript:void(0); with a hash (#) is a workaround.

A clear and concise description of any alternative solutions or features you've considered.

import {Injectable} from '@angular/core';
declare let jQuery: any;

@Injectable()
export class AccessibilityService {

	/**
	 * This fixes the ngx-bootstrap tabs "redundant link" issue reported by WAVE Evaluation plugin.
	 */
	public fixTabs() {
		jQuery('.nav-tabs a').attr('href', (n: any, old: any) => {
			if (old === 'javascript:void(0);') {
				return '#';
			}
		});
	}
}

Additional context

Add any other context or screenshots about the feature request here. Result after workaround: image

queejie avatar May 26 '23 20:05 queejie

Perhaps using a button instead of an anchor would remove the issue?

queejie avatar May 26 '23 20:05 queejie