Make WordPress Core

Opened 6 years ago

Closed 5 years ago

#44699 closed defect (bug) (fixed)

Twenty Seventeen: Comment form cookies consent checkbox has no focus style

Reported by: afercia's profile afercia Owned by: laurelfulford's profile laurelfulford
Milestone: 5.0.2 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots has-patch fixed-5.0
Focuses: accessibility Cc:

Description

In Twenty Seventeen, the new checkbox in the comments form to consent to cookies has no focus style at all. While the other fields use a slightly darker border (see the field "Website|" in the screenshot below), the there's no specific focus style for checkboxes.

The outline is reset to 0 so, at least in Chrome, Safari, and Opera on mac, there's no indication of focus on the checkbox. Firefox applies some native style.

Seems Twenty Sixteen and Fifteen are OK, as they apply some focus style to checkboxes.

Attachments (5)

Twenty 17 Screen Shot 2018-08-02 at 09.03.18.png (41.9 KB) - added by afercia 6 years ago.
#44699.diff (462 bytes) - added by pratikthink 6 years ago.
Twenty-seventeen-firefox-with-patch.png (29.1 KB) - added by laurelfulford 5 years ago.
Twenty Seventeen - Firefox with patch applied
twenty-seventeen-safari-with-patch.png (22.6 KB) - added by laurelfulford 5 years ago.
Twenty Seventeen - Safari with patch applied
twenty-seventeen-opera-with-patch.png (22.9 KB) - added by laurelfulford 5 years ago.
Twenty Seventeen - Opera with patch applied

Download all attachments as: .zip

Change History (20)

@pratikthink
6 years ago

#1 @pratikthink
6 years ago

  • Keywords has-patch added

#2 @audrasjb
6 years ago

  • Keywords ui-feedback added

I tested the patch and it looks ok on my side.

Adding ui-feedback but I think it can probably lands in 4.9.9.

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


6 years ago

#4 @jameskockelbergh
5 years ago

Well spotted @afercia

#5 @pento
5 years ago

  • Milestone changed from 4.9.9 to 5.0.1

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


5 years ago

#7 @boemedia
5 years ago

  • Keywords ui-feedback removed

As there's a working (and tested) patch and it seems this doesn't need direct design feedback, the design team thinks this one's good to go :)

#8 @laurelfulford
5 years ago

  • Owner set to laurelfulford
  • Status changed from new to reviewing

#9 @pento
5 years ago

  • Milestone changed from 5.0.1 to 5.0.2

@laurelfulford
5 years ago

Twenty Seventeen - Firefox with patch applied

@laurelfulford
5 years ago

Twenty Seventeen - Safari with patch applied

@laurelfulford
5 years ago

Twenty Seventeen - Opera with patch applied

#10 @laurelfulford
5 years ago

  • Status changed from reviewing to accepted

Thanks for the report, @afercia, and for the patch, @pratikthink!

This update looks good to me, as long as the difference is visually sufficient -- I'm not really an expert there :) @afercia do you mind taking a peek at the screenshots I've attached, and confirming? I'd really appreciate your expertise on this!

#11 @afercia
5 years ago

@laurelfulford @pratikthink thanks! Looks good to me, as it replicates the native Firefox focus style.

#12 @laurelfulford
5 years ago

Thanks for confirming, @afercia! Based on that, I think this one is good to go.

#13 @laurelfulford
5 years ago

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

In 44204:

Twenty Seventeen: Add focus style to cookies consent checkbox.

To improve accessibility, the cookies content checkbox in the comment form needed some visible indication when it’s in focus.

Props pratikthink, afercia.
Fixes #44699.

#14 @laurelfulford
5 years ago

  • Keywords fixed-5.0 added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening and marking fixed-5.0 so that this can be properly merged into trunk.

#15 @desrosj
5 years ago

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

In 44307:

Twenty Seventeen: Bug Fixes.

  • Remove unnecessary ol styles from editor. Twenty Seventeen was designed with bolded numbers for its ordered list styles. This was removed from the theme prior to launch, but it was left in the editor styles, so it needed to be removed there, too.
  • To improve accessibility, the cookies content checkbox in the comment form needed some visible indication when it’s in focus.
  • Twenty Seventeen’s editor styles contained an Internet Explorer 8 specific fix that stopped images from being scalable in the editor in other browsers. Since the editor no longer supports IE8, this fix can safely be removed.
  • Fix the font-family used for Simplified Chinese (zh_CN) in the block editor CSS.

Props mmaumio, edpittol, pratikthink, afercia, audrasjb, mihaivalentin, subrataemfluence, vaishalipanchal, ze3kr, laurelfulford.

Merges [44203-44205] and [44235] into trunk.

Fixes #44775, #44699, #39738, #45408.

Note: See TracTickets for help on using tickets.