Border color wasn’t using a global variable, and the active tab color wasn’t meeting accessibility requirements.

The bottom border of the active tab would stay visible whenever secondary tabs were present. This commit elevates the active tab’s z-index to make sure that its new bottom border overlaps the secondary’s appropriately, making them look connected.

Scroll button padding variables weren’t being used. The buttons are the same height as the tab container and a width variable is implemented instead.

Border width is now controlled by a variable.

Border color of scroll buttons is now set to its own variable.

Adds a z-index to the scroll buttons to make sure the active tab does not overlap when scrolled below them.

To align with logical rather than physical values.

If a current tab scrolls past a scroll button, the scroll button should be given a similar visual treatment to indicate that the current tab is “over there”. This is done with an additional modifier on .pf-c-tabs.

Border color changed. Hover state border/box-shadow changed. Secondary tab hover color changed. Scroll buttons now include the same hover state.

Until we figure out a keyboard focus management strategy.

Sticking with browser defaults until we implement our own system-wide focus state in the future.

This new background color should theoretically change based on the theme.

To ensure that they aren’t read by screen readers.

The first tab being active/current is the more typical default case.

To be consistent with other components.

Clarified that the primary tabs example includes sections.

Needs a -m because it’s a modifier class.

The new variable is close enough.

Also moved the ID to the the button element itself rather than the li parent.

And updated every example to make use of it.

Box-shadow doesn’t appear in Windows’ high contrast mode, so this switches Tabs to use borders on ::before and ::after pseudo elements to achieve the same result.

This change required significant restructuring of the SCSS file.

Setting display: none; and visibility: hidden; has proven to be an effective way to hide scroll buttons from screen readers, so the hidden attribute is no longer necessary.

Removed outdated parts, updated accessibility and usage sections to reflect the latest structure.

Forgot to move the modifier, and adjusted the CSS

Since we’re keeping sections to the primary example only, including aria-controls in other examples without corresponding sections was invalid.

To keep primary and secondary tabs consistent, primary tabs now use flex rather than inline-flex as well. Also removed some redundant declarations.

Just in case the secondary tabs themselves are not directly adjacent to the primary, they can be contained so long as the modifier is present.