Make WordPress Core

Opened 8 years ago

Closed 8 years ago

#34953 closed defect (bug) (fixed)

Focus style: Names in credit section

Reported by: walbo's profile walbo Owned by: afercia's profile afercia
Milestone: 4.5 Priority: normal
Severity: normal Version: 4.4
Component: Administration Keywords: has-patch has-screenshots commit
Focuses: ui, accessibility Cc:

Description

Focus style on names in credit section are broken. See screenshot.

Attachments (4)

Skjermbilde 2015-12-10 kl. 00.33.40.png (58.0 KB) - added by walbo 8 years ago.
34953.diff (1.4 KB) - added by walbo 8 years ago.
34953.2.diff (3.5 KB) - added by afercia 8 years ago.
34953.3.diff (3.4 KB) - added by walbo 8 years ago.

Download all attachments as: .zip

Change History (11)

@walbo
8 years ago

#1 @walbo
8 years ago

  • Keywords has-patch added

#2 @afercia
8 years ago

  • Version changed from trunk to 4.4

@walbo nice catch. Would be great to take this opportunity to improve the markup too. A nice improvement would be removing redundant links and have just one link that wraps both the image and the name. See http://www.w3.org/TR/WCAG20-TECHS/H2.html and discussion on #32254 and #32509.
Basically:

  • just one link
  • image with an empty alt (no need to repeat the same info that's already in the name)
  • style the focus in a similar way to the one on the Media Library attachements

Something like this:

https://cldup.com/vA0wzV4CSP.png

@afercia
8 years ago

#3 @afercia
8 years ago

  • Keywords has-screenshots commit added
  • Milestone changed from Awaiting Review to 4.5
  • Owner set to afercia
  • Status changed from new to assigned

The refreshed patch tries to simplify a bit the markup. There's no need to have two separate links, they can be combined in just one link for better semantics and accessibility as suggested in https://www.w3.org/TR/WCAG20-TECHS/H2.html

This would be consistent with what was already done on the Media Library screen, also for the focus style. See screenshot below:

  1. currently, both the gravatar and the name are links
  2. combined in just one link with the new focus style
  3. consistent with the focus style in the Media Library

https://cldup.com/QPe1Aisl5H.png

@walbo
8 years ago

#4 @walbo
8 years ago

Added an empty alt attribute to 34953.2.diff. The alt attribute should be left empty and not deleted.

Version 0, edited 8 years ago by walbo (next)

#5 @afercia
8 years ago

Uops :) thanks @walbo, missed that.

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


8 years ago

#7 @afercia
8 years ago

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

In 36406:

Accessibility: Improve the focus style on the Credits screen.

Leads and contributing developers will now look nicer when focused.
Also, combines adjacent image and text links for the same resource thus
simplifying markup and reducing noise for screen reader users.

Props walbo, afercia.
Fixes #34953.

Note: See TracTickets for help on using tickets.