fix(dropdown): set tabIndex to -1 on disabled dropdown items

This makes sure that disabled dropdown items using links are not tab-traversable.

fix #4301

src/dropdown/dropdown.spec.ts

@@ -300,22 +300,37 @@ describe('ngb-dropdown', () => {
   });
 
   it('should disable a button dropdown item', () => {
-    const html = `<button ngbDropdownItem [disabled]="true">dropDown item</button>`;
+    const html = `<button ngbDropdownItem [disabled]="disabled">dropDown item</button>`;
 
     const fixture = createTestComponent(html);
     const itemEl = fixture.nativeElement.querySelector('button');
 
+    expect(itemEl).not.toHaveCssClass('disabled');
+    expect(itemEl.disabled).toBeFalse();
+    expect(itemEl.tabIndex).toBe(0);
+
+    fixture.componentInstance.disabled = true;
+    fixture.detectChanges();
+
     expect(itemEl).toHaveCssClass('disabled');
-    expect(itemEl.disabled).toBe(true);
+    expect(itemEl.disabled).toBeTrue();
+    expect(itemEl.tabIndex).toBe(-1);
   });
 
   it('should disable a link dropdown item', () => {
-    const html = `<a ngbDropdownItem [disabled]="true">dropDown item</a>`;
+    const html = `<a ngbDropdownItem [disabled]="disabled">dropDown item</a>`;
 
     const fixture = createTestComponent(html);
     const itemEl = fixture.nativeElement.querySelector('a');
 
+    expect(itemEl).not.toHaveCssClass('disabled');
+    expect(itemEl.tabIndex).toBe(0);
+
+    fixture.componentInstance.disabled = true;
+    fixture.detectChanges();
+
     expect(itemEl).toHaveCssClass('disabled');
+    expect(itemEl.tabIndex).toBe(-1);
   });
 });
 
@@ -543,6 +558,7 @@ class TestComponent {
   isOpen = false;
   stateChanges: boolean[] = [];
   dropdownClass = 'custom-class';
+  disabled = false;
 
   recordStateChange($event) {
     this.stateChanges.push($event);

src/dropdown/dropdown.ts

@@ -40,7 +40,10 @@ export class NgbNavbar {
  *
  * @since 4.1.0
  */
-@Directive({selector: '[ngbDropdownItem]', host: {'class': 'dropdown-item', '[class.disabled]': 'disabled'}})
+@Directive({
+  selector: '[ngbDropdownItem]',
+  host: {'class': 'dropdown-item', '[class.disabled]': 'disabled', '[tabIndex]': 'disabled ? -1 : 0'}
+})
 export class NgbDropdownItem {
   static ngAcceptInputType_disabled: boolean | '';
 
@@ -49,6 +52,9 @@ export class NgbDropdownItem {
   @Input()
   set disabled(value: boolean) {
     this._disabled = <any>value === '' || value === true;  // accept an empty attribute as true
+    // note: we don't use a host binding for disabled because when used on links, it fails because links don't have a
+    // disabled property
+    // setting the property using the renderer, OTOH, works fine in both cases.
     this._renderer.setProperty(this.elementRef.nativeElement, 'disabled', this._disabled);
   }