WordPress.org

Make WordPress Core

Opened 3 months ago

Last modified 2 months ago

#43398 new enhancement

Avoid using visual tabs when it's irrelevant: menu screen, about.php and in edit-site screen (multisite)

Reported by: audrasjb Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Administration Keywords: needs-design has-screenshots
Focuses: ui, accessibility Cc:

Description (last modified by audrasjb)

Related: #40678

In several part of WordPress admin, visual tabs are used for simple links. The issue appears in:

  • Menu screen
  • About.php screen
  • Edit site screen (in multisites)

The issue with "fake tabs" is multiple:

  • A real tab system is supposed toggle the visibility of content that is already in the page.
  • The markup is not relevant (see example bellow)

Example of fake tabs used in Menu screen:

<h2 class="nav-tab-wrapper wp-clearfix">
	<a href="/wp-admin/nav-menus.php" class="nav-tab nav-tab-active">Edit Menus</a>
	<a href="/wp-admin/nav-menus.php?action=locations" class="nav-tab">Manage Locations</a>
</h2>

This ticket is a part of a bigger one: #40678. During the last accessibility team meeting, we suggested to separate the different tasks of 40678 in separate tickets to make it easier to commit.

Please note this ticket concerns also the design of these "tabs". We'll need some design feedback because if they’re not tabs, they probably should not look like tabs.

Attachments (3)

43398.diff (1.6 KB) - added by audrasjb 3 months ago.
First idea: keep the current design but use a valid markup (this example is only applied to menu screen)
Capture d’écran 2018-03-19 à 08.12.29.png (50.5 KB) - added by audrasjb 2 months ago.
Visual tabs in about.php screen
Capture d’écran 2018-03-19 à 08.11.34.png (28.3 KB) - added by audrasjb 2 months ago.
Visual tabs in nav-menus.php screen

Download all attachments as: .zip

Change History (10)

@audrasjb
3 months ago

First idea: keep the current design but use a valid markup (this example is only applied to menu screen)

#1 @audrasjb
3 months ago

  • Keywords ui-feedback ux-feedback added

#2 @audrasjb
3 months ago

  • Keywords needs-design added; ui-feedback ux-feedback removed

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 months ago

#4 @audrasjb
3 months ago

  • Description modified (diff)

#5 @afercia
3 months ago

  • Focuses administration removed
  • Milestone changed from Awaiting Review to Future Release

Moving to future release, pending design feedback.

#6 @melchoyce
2 months ago

  • Keywords needs-screenshots added

@audrasjb
2 months ago

Visual tabs in about.php screen

@audrasjb
2 months ago

Visual tabs in nav-menus.php screen

#7 @audrasjb
2 months ago

  • Keywords has-screenshots added; needs-screenshots removed
Note: See TracTickets for help on using tickets.