Minor CSS fix on ".nav-tab-wrapper" class

[ramiy]

When a plugin author want to create navigation menu with tabs in the plugin settings page, he uses:

<div class="wrap">

	<h1><?php esc_html_e( 'Plugin Name', 'textdomain' ); ?></h1>

	<h2 class="nav-tab-wrapper">
		<a href="?page=plugin_slug&tab=general"  class="nav-tab <?php echo $active_tab == 'general'  ? 'nav-tab-active' : ''; ?>"><?php esc_html_e( 'General',  'textdomain' ); ?></a>
		<a href="?page=plugin_slug&tab=settings" class="nav-tab <?php echo $active_tab == 'settings' ? 'nav-tab-active' : ''; ?>"><?php esc_html_e( 'Settings', 'textdomain' ); ?></a>
		<a href="?page=plugin_slug&tab=addons"   class="nav-tab <?php echo $active_tab == 'addons'   ? 'nav-tab-active' : ''; ?>"><?php esc_html_e( 'Addons',   'textdomain' ); ?></a>
	</h2>

The Problem

When using .nav-tab-wrapper css class, we have to use it only with <h1>, <h2> and <h3> tags.

We can't use <nav>, <div> or any other HTML tag. Because the class applied only h1-h3 tags.

This is why external plugins like WooCommerce (and many others) use <nav> tags and add extra CSS.

The Solution

To fix this and apply .nav-tab-wrapper to all the HTML tags we need to edit the wp-admin/css/common.css and replace this code:

h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */
.wrap h2.nav-tab-wrapper, /* higher specificity to override .wrap > h2:first-child */
h3.nav-tab-wrapper {
	...
	...
}

with this code:

.wrap .nav-tab-wrapper,
.nav-tab-wrapper {
	...
	...
}

[ramiy]

The attached patch fixes the issue. It was tested on plugins, and on the About Page, verifying this issue on ticket #33559 won't happen again.

[afercia]

Replying to ramiy:

The attached patch fixes the issue. It was tested on plugins, and on the About Page, verifying this issue on ticket #33559 won't happen again.

While I agree that it would be nice to don't use type selectors (h1, h2...), my concern is about backwards compatibility. There's the need of selectors with higher specificity to override .wrap > h2:first-child because there are still plugins that use the "navigation tabs" as a .wrap first-child H2 heading and in this case, as far as I see, the issue on ticket #33559 still happens. Maybe trying to use just .nav-tab-wrapper and keep .wrap h2.nav-tab-wrapper could work? (would need some testing with various plugins)

[ramiy]

I added another patch under a different username... sorry.

[ramiy]

Replying to afercia:

While I agree that it would be nice to don't use type selectors (h1, h2...), my concern is about backwards compatibility. There's the need of selectors with higher specificity to override .wrap > h2:first-child because there are still plugins that use the "navigation tabs" as a .wrap first-child H2 heading and in this case, as far as I see, the issue on ticket #33559 still happens. Maybe trying to use just .nav-tab-wrapper and keep .wrap h2.nav-tab-wrapper could work? (would need some testing with various plugins)

Thanks @afercia!
Good feedback.
My second patch is fixing this and maintaining backwards compatibility.

[afercia]

Thanks @ramiy. We're in beta though, not sure this can make it for 4.6. Also, worth noting that we've discussed the "navigation tabs" in the accessibility team and agreed in the future we should try to change them:

• when they're just links to other screens, they should probably be inside a <nav> element because in this case they're just a sub-menu
• when they're used as real tabs to toggle the visibility of in-page content, they should be an ARIA tabbed interface

Your patch makes sense to me, allowing the nav-tab-wrapper CSS class to be used on any element it's a good start for future improvements.

[afercia]

Simpler selectors

[afercia]

Refresehd patch, probably can be as simple as this. Haven't found in core cases where .nav-tab-wrapper is used on a h3 element and if plugins are using it on a h3 it should still work.

[ramiy]

Replying to afercia:

Thanks @ramiy. We're in beta though, not sure this can make it for 4.6.

That's ok, I can wait for 4.7.

Your patch makes sense to me, allowing the nav-tab-wrapper CSS class to be used on any element

Excellent.

it's a good start for future improvements.

Not only future improvements, we need to write documentation for developers to show them how to implement this in current plugins/themes.

Refresehd patch, probably can be as simple as this. Haven't found in core cases where .nav-tab-wrapper is used on a h3 element and if plugins are using it on a h3 it should still work.

The third patch is much simpler and elegant solution.

[afercia]

We forgot to update the rule related to nav-tab-wrapper within the max-width: 600px media query. Other than that, allowing to use any element for the tabs wrapper makes sense to me, it's a small improvement that would be nice to see in 4.7.

[ramiy]

with the media query

[ramiy]

Nice catch @afercia! I've updated the patch.

[SergeyBiryukov]

In 38306:

Common CSS: Allow for .nav-tab-wrapper class to be used on elements other than h3 to increase flexibility for custom settings pages.

Props ramiy, afercia.
Fixes #37257.