This could be simplified, for example instead of using events, you can just call a function to re-update the nav bar.

Alternative we could use an additional init with deduplicate: false on both features that looks like:

function init () {
	if (shouldBugsTabHaveFocus) {
		// Remove focus from other tab
	}

	// Ensure that the bugs tab is consistent whether it needs it or not
	bugsTab.classList.toggle('current', shouldBugsTabHaveFocus);
	bugsTab.attributes.toggle('aria-current', shouldBugsTabHaveFocus); // Or whatever
}

shouldBugsTabHaveFocus would be calculated every time init is run and/or it could be memoized via mem to allow it to be called from the other init as well without doing calculations twice.

const shouldBugsTabHaveFocus = mem((url: string) => {
	///logic
})

Alternative we could use an additional init with deduplicate: false on both features

That's already the case, the problem is ensuring that the bugsTab element has actually been added by the "main" init before trying to (un)highlight it.

A simpler solution could be to have a single un-deduplicated init that would:

1. Check if the Bugs/Releases tab already exists, if not add it
2. Then update its highlight

the problem is ensuring that the bugsTab element has actually been added by the "main" init before trying to (un)highlight it.

append(bugsTab);
secondInit() // Call it manually, even if it's duplicate right now

A simpler solution could be to have a single un-deduplicated init that would:

That'd also work. As long as the pattern is preserved for releases-tab

Up to you

Just merge after 21.11.1

@refined-github/maintainers can someone else test this too, ideally in a browser other than Firefox? Thanks!