Accessibility keyboard shortcuts not working on mat-tab-nav-bar

[BasyaLipman]

Bug, feature request, or proposal:

Question

What is the expected behavior?

Right arrow, left arrow, Enter and Space keyboard shortcuts should work on mat-tab-nav-bar

What is the current behavior?

None of the above seems to work in my implementation. (The Tab key does navigate between the tabs.)

I do not see an example for mat-tab-nav-bar on the Examples page on the material website here. It would help to have such an example.

What are the steps to reproduce?

html:

<nav mat-tab-nav-bar role="tablist" aria-label="my tabs">
    <a mat-tab-link (click)="select(0)" [active]="activeRoute">My Tab 1</a>
    <a mat-tab-link (click)="select(1)" [active]="activeRoute">My Tab 2</a>
    <a mat-tab-link (click)="select(2)" [active]="activeRoute">My Tab 3</a>
</nav>
<router-outlet class="content-background"></router-outlet>

and the TS function:

 select(tab: number) {
        if (tab === this.selectedTab){
           return;
        }
        this.selectedTab = tab;
        this.activeRoute=this.routes[tab];
        this.router.navigate([this.routes[tab]]);
    }

What is the use-case or motivation for changing an existing behavior?

On the site here there is a list of keyboard shortcuts that should work for Accessibility.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Tested on Chrome Version 68.0.3440.106 (Official Build) (64-bit).
Here are the app dependencies:

  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "~6.2.1",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/flex-layout": "6.0.0-beta.15",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "~6.2.1",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@types/crypto-js": "^3.1.40",
    "angular-logger": "^0.1.8",
    "basscss": "^8.0.2",
    "core-js": "^2.5.4",
    "crypto-js": "^3.1.9-1",
    "ngx-img-cropper": "^0.10.4",
    "rxjs": "6.2.0",
    "rxjs-compat": "^6.2.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular-devkit/core": "~0.7.0",
    "@angular/cli": "~6.1.2",
    "@angular/compiler-cli": "^6.1.0",
    "@types/jasmine": "^2.8.7",
    "@types/node": "^6.0.112",
    "autoprefixer": "^7.2.3",
    "circular-dependency-plugin": "^5.0.0",
    "codelyzer": "~4.3.0",
    "copy-webpack-plugin": "~4.5.0",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^3.2.0",
    "istanbul-instrumenter-loader": "^3.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "less-loader": "^4.0.5",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.10",
    "postcss-url": "^7.1.2",
    "protractor": "~5.1.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "stylus-loader": "^3.0.1",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.9.2",
    "uglifyjs-webpack-plugin": "^1.1.8",
    "url-loader": "^0.6.2",
    "webpack": "^4.11.0",
    "webpack-cli": "^3.0.2",
    "webpack-dev-server": "^3.1.0"
  }

[jelbourn]

This is working as intended. As you can see in the template, the nav tabs present themselves as a <nav> element with anchors instead of using the tab-related ARIA roles. This keeps the experience accessible since it aligns with expectations that any interactions that update the URL are done via <a> element.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}