How to manually create links to change focus on horizontal tab items?
There is a css trick that can achieve this.

Firstly, reset the default positioning on the a element:

.horizontal-tabs &gt; ul.horizontal-tabs-list li a {
  position: static;
}


Secondly, apply an ::after pseudo-element to the link for the horizontal tab AFTER the selected/active one:

.horizontal-tabs &gt; ul.horizontal-tabs-list li.horizontal-tab-button.selected + li a::after {
  content: "next";
  display: block;
}


Given we reset the positioning on the parent li (and the ul is relatively positioned by default) we can now position our pseudo-element relative to the ul, which spans the whole content block. So if you wanted to put your "next" link top right, do something like this.

.horizontal-tabs &gt; ul.horizontal-tabs-list li.horizontal-tab-button.selected + li a::after { 
  content: "next";
  display: block;
  position: absolute;
  right: 0;
  top: 30px;
}


This example assumes that our ul has a height of 30px. Given that the last li element (ie the final tab) does not have an immediate sibling, the "+" selector does not match on the last li, which automatically excludes the "next" link on the final tab.