[Accessbility] ui-router doesn't work with keyboard with url-less states

[Eradev]

Hello,

navigation using a keyboard breaks with url-less states due to the uiSref directive removing an empty href. That makes the anchor not tabbable without tabindex, and also remove the ability to navigate to the state with the Enter button as it's no longer considered a link.

Was it intended to be like that? Is there a workaround?

[Eradev]

Ended up overwriting AnchorUISref.update.

import { Directive, ElementRef, Renderer2, Host } from '@angular/core';
import { AnchorUISref } from '@uirouter/angular';

// tslint:disable-next-line: directive-selector
@Directive({ selector: 'a[uiSref]' })
export class CustomUiSrefDirective {
  constructor(
    @Host() public hostAnchor: AnchorUISref,
    private renderer: Renderer2,
    private elementRef: ElementRef) {

    hostAnchor.update = (href: string) => {
      this.renderer.setProperty(this.elementRef.nativeElement, 'tabIndex', '0');

      if (href && href !== '') {
        this.renderer.setProperty(this.elementRef.nativeElement, 'href', href);
      } else {
        this.renderer.setProperty(this.elementRef.nativeElement, 'href', '');
      }
    };
  }
}

[christopherthielen]

This behavior is related to this bug report angular-ui/ui-router#3248

I've fixed this in #721, hopefully this behavior is correct now.

[Eradev]

@christopherthielen I just re-tested this. The fix enables the Enter button, but it is still ignored when navigating with Tab.