feat(tabs): support pagination in nav bar

[crisbeto]

Adds support for pagination to mat-tab-nav-bar by moving some code around so that it can be reused from the mat-tab-group.

Fixes #2177.

Some outstanding questions:

• How should we deal with the tabindex in mat-tab-nav-bar? Currently all enabled links have tabindex="0", but now that we support keyboard navigation, we could switch to the same approach as mat-tab-group.
• With these changes the tab header styles are imported in the Sass of both mat-tab-nav-bar and mat-tab-header. This means that these styles will be included twice and I don't think there's a nice way around it. We can include the same file through styleUrls, however our style inlining won't de-duplicate the styles in that case either.

[jelbourn]

LGTM overall

[jelbourn]

Could this be optional in the abstract class?

[crisbeto]

Apparently optional abstract methods aren't supported by TS. I can mark it as optional, but it still requires it to be defined on the sub-class.

[andrewseguin]

LGTM with one request: can you add an example for the nav so that it either starts with many labels or a way to dynamically add/remove labels? Would be nice to have an example that shows pagination easily.

[crisbeto]

Reworked based on the feedback.

[andrewseguin]

Looks like we've got an issue when the nav bar's active link is not the first link. We are calling updateActiveLink a little too early and so the ink bar does not position itself at the right time. Instead, when it is called, this._items is not yet populated.

[andrewseguin]

You can replicate the issue in our demo app by setting the active link to the second or third link rather than defaulting to the first. You'll see the ink bar positioned under the first link.

[crisbeto]

Thank you @andrewseguin. I've updated it to account for updateActiveLink being called too early.

[mmalerba]

A couple tests seem to be failing a11y checks with the following error:

{
  "description": "Ensures elements with an ARIA role that require child roles contain them",
  "help": "Certain ARIA roles must contain particular children",
  "helpUrl": "https://dequeuniversity.com/rules/axe/2.5/aria-required-children?application=axeAPI",
  "nodes": [
    {
      "html": "<div class=\"mat-tab-list\" role=\"tablist\" style=\"transform: translateX(0px);\">"
    }
  ]
}

[crisbeto]

Fixed @mmalerba. Looks like a copied a little bit too much from the regular tab header template. Also do we have those a11y checks running on the CI somewhere? I had to run the Chrome extension to see the failure.

[mmalerba]

I filed #16271 for setting up axe tests, @josephperrott is going to look into it

[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.}