IgniteUI / igniteui-webcomponents / 39939470614

100%

push

github

feat(tabs): add link tabs with the igcNavigate routing event (#2497)

- tab: href, target and rel render the tab header as <a role="tab">.
  A disabled link tab keeps the anchor without a URL. The header keeps
  the focus when href is added or removed. The label, prefix and
  suffix slots take non-interactive content only
- links: a plain click, Enter or Space selects the tab and follows the
  link; Enter and Space click the header. A click with a modifier key
  or another button, and a tab whose target (or <base> target) is not
  _self, go to the browser and do not change the selection. With
  activation="auto", the arrow keys select a tab but do not follow its
  link
- igcNavigate: the tabs emit it on the tab, cancelable and not
  bubbling, before the browser follows the link. Canceling it cancels
  the click, so an app can route on the client. Clicks in the panel
  and on nested tabs do not emit it
- keyboard: only keys pressed on a tab header navigate. Tabs projected
  through another slot work with the arrow keys, Enter and Space.
  The arrow keys skip a tab that does not render
- tracking: slotchange and a mutation controller on the tabs follow
  projected tabs and changes made while detached. Changes in a panel
  no longer make the tabs measure the strip
- layout: one resize observer follows the strip and each header. The
  indicator follows a change of header size or direction, also a dir
  on an ancestor. Measurements use the strip's own CSS pixels under an
  ancestor zoom. The scroll-button arrows follow the direction. Scroll
  snap is removed
- docs: spec revision 6 with link tabs and the Vue and Angular routing
  recipes, CHANGELOG, story, public-api.json

8732 of 8828 branches covered (98.91%)

Branch coverage included in aggregate %.

446 of 446 new or added lines in 4 files covered. (100.0%)

53420 of 53551 relevant lines covered (99.76%)

3696.34 hits per line