Make WordPress Core

Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#35960 closed defect (bug) (fixed)

Remove excess padding from .nav-tab-wrapper

Reported by: ericdaams's profile ericdaams Owned by: ocean90's profile ocean90
Milestone: 4.5 Priority: normal
Severity: normal Version: 4.6
Component: Administration Keywords: has-patch has-screenshots
Focuses: ui, administration Cc:

Description (last modified by ocean90)

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

Attachments (3)

Charitable Settings H1 UI bug.png (61.5 KB) - added by ericdaams 8 years ago.
Excess padding in Charitable settings
Easy Digital Downloads Settings H1 UI bug.png (76.4 KB) - added by ericdaams 8 years ago.
Excess padding in Easy Digital Downloads settings
35960.1.diff (380 bytes) - added by ericdaams 8 years ago.

Download all attachments as: .zip

Change History (14)

8 years ago

Excess padding in Charitable settings

8 years ago

Excess padding in Easy Digital Downloads settings

8 years ago

#1 in reply to: ↑ description @ericdaams
8 years ago

  • Keywords has-patch added

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.

#2 @ericdaams
8 years ago

  • Summary changed from Remove excess padding from h1.nav-tab-wrapper to Remove excess padding from .nav-tab-wrapper

#3 @WPCharitable
8 years ago

  • Keywords has-screenshots added

#4 @ocean90
8 years ago

  • Focuses accessibility removed
  • Milestone changed from Awaiting Review to 4.5
  • Owner set to ocean90
  • Status changed from new to accepted

#5 @ocean90
8 years ago

  • Description modified (diff)

#6 @ocean90
8 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 37073:

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

Props ericdaams.
Fixes #35960.

#7 @afercia
8 years ago

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 :)

#8 @ericdaams
8 years ago

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.

#9 @afercia
8 years ago

@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 :)

#10 @ericdaams
8 years ago

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

#11 @ramiy
8 years ago

Related: #37257

Note: See TracTickets for help on using tickets.