Remove excess padding from .nav-tab-wrapper

[ericdaams]

When an H1 is used for tabs with .nav-tab-wrapper, there is excess padding between the tabs & border.

Noted this issue with the Settings pages of the following plugins, but it will be the case with any other plugin that uses an H1 on the .nav-tab-wrapper:

• Easy Digital Downloads
• Charitable
• Give

If there is an accessibility/semantic reason for not using an H1 on the .nav-tab-wrapper, I will happily change this in Charitable (my plugin), but I think a small patch here wouldn't hurt to account for plugins that don't update.

Likely related to #33559

[ericdaams]

Excess padding in Charitable settings

[ericdaams]

Excess padding in Easy Digital Downloads settings

[ericdaams]

This is a broader issue actually. It also applies to h2.nav-tab-wrapper when the tabs are inside a .wrap. My patch resolves both cases.

[ocean90]

In 37073:

Common CSS: Reset bottom padding for .nav-tab-wrapper.

Props ericdaams.
Fixes #35960.

[afercia]

Not arguing about the CSS fix, I'm all for it :) Worth noting we shouldn't encourage the usage of the H1 for the navigation tabs. The main H1 is meant to give an immediate feedback and context about "what" a page is about. Not so ideal for accessibility having a series of links as H1.
We've recently discussed the navigation tabs in the accessibility team weekly meeting, hopefully we'll try to come up with a new idea and proposal. Also, sorry we've missed this ticket :)

[ericdaams]

Thanks for the feedback @afercia. In a situation where there is no primary page header above the navigation tabs, what should be the preferred element to use for the navigation tabs? Current CSS is geared towards this being an h1, h2 or h3; my understanding is that you shouldn't skip headers.

[afercia]

@ericdaams personally, I'd consider to add a h1 heading before the nav tabs :) ideally, the nav tabs should be just links in a list, like a navigation menu. Maybe with a h2 before (can also be visually hidden), something like:

<h1>My beautiful plugin settings</h1>
<h2 class="screen-reader-text">Settings sections</h2>
<ul>links list</ul>

But this would require some custom CSS. As said, we're considering to propose to change this UI component, we should also consider ARIA roles and (maybe) HTML5 semantic elements. Hopefully, we'll come up with a proposal in the next months :)

[ericdaams]

Thanks @afercia for the feedback! Really appreciate it. Look forward to seeing that proposal.

[ramiy]

Related: #37257