Make WordPress Core

Opened 22 months ago

Closed 22 months ago

Last modified 22 months ago

#56269 closed defect (bug) (fixed)

Twenty Twenty: Comments accessibility - links should be identifiable

Reported by: audrasjb's profile audrasjb Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots has-patch commit
Focuses: accessibility, css Cc:

Description

In Twenty Twenty, the links displayed in the Comments section are not visually identifiable. We should make them different from regular text for better accessibility.

Attachments (4)

Capture d’écran 2022-07-22 à 09.53.47.png (72.2 KB) - added by audrasjb 22 months ago.
"Logged in" and "Log out?" should be visually identifiable as links.
35cf3a412a152f5302bc746a4ac7487f.gif (115.3 KB) - added by audrasjb 22 months ago.
logged-in-as-links-with-patch.png (8.8 KB) - added by sabernhardt 22 months ago.
"Logged in as" message with the patch
logged-in-as-links-with-patch-on-hover.png (4.6 KB) - added by sabernhardt 22 months ago.
hovering cursor over "Edit your profile" link

Download all attachments as: .zip

Change History (18)

@audrasjb
22 months ago

"Logged in" and "Log out?" should be visually identifiable as links.

This ticket was mentioned in PR #3008 on WordPress/wordpress-develop by whaze.


22 months ago
#1

  • Keywords has-patch added; needs-patch removed

I made links red and with underline on hover

Trac ticket: https://core.trac.wordpress.org/ticket/56269

#2 @whaze
22 months ago

hello,

I made a PR : i changed the color of the links in red and with underline on hover.

#3 @audrasjb
22 months ago

  • Keywords changes-requested added

Thanks for the patch!
However I think it would be better for accessibility and consistency to use the same pattern as other content links: different color + underline and remove underline on hover (but keep the different color).

See screenshot below (comment’s content)

whaze commented on PR #3008:


22 months ago
#4

i made your recommanded change for accessibility

#5 @sabernhardt
22 months ago

Thanks!

I think we could remove those styles from .comment-notes links as well. Twenty Twenty itself does not add any links to that message, but a plugin or a child theme might.

#6 @mukesh27
22 months ago

Hi there!

Yes it is better to remove those CSS for .comment-notes and .logged-in-as.

.comment-respond .comment-notes a {
	color: inherit;
	text-decoration: none;
}

.comment-respond .comment-notes a:focus,
.comment-respond .comment-notes a:hover,
.comment-respond .logged-in-as a:focus,
.comment-respond .logged-in-as a:hover,
.comment-respond .comment-notes a:hover {
	text-decoration: underline;
}

whaze commented on PR #3008:


22 months ago
#7

i removed .comment-notes useless css

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


22 months ago

#9 @sabernhardt
22 months ago

  • Keywords changes-requested removed

@sabernhardt
22 months ago

"Logged in as" message with the patch

@sabernhardt
22 months ago

hovering cursor over "Edit your profile" link

#10 @sabernhardt
22 months ago

  • Focuses css added
  • Keywords commit added

#11 @audrasjb
22 months ago

Thanks for testing! Self assigning for commit.

#12 @audrasjb
22 months ago

  • Owner set to audrasjb
  • Status changed from new to accepted

#13 @audrasjb
22 months ago

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

In 53797:

Twenty Twenty: Ensure comments section links are identifiable as links.

Links should look like links. This changeset makes sure that links displayed in the comments section of Twenty Twenty are identifiable as links.

Props audrasjb, whaze, sabernhardt, mukesh27.
Fixes #56269.

Note: See TracTickets for help on using tickets.