Problem/Motivation

Pulled from #551 from @dmsmidt on May 12, 2015 at 3:40am:

Concerning #547 - # 549: The issue with checkbox/radio styling is certainly not introduced by this patch. It's already a problem (in some browsers). I discussed this with Lewis during the devdays, and it should not be addressed in this issue.

The follow ups are to my knowledge not introducing bugs to existing functionality, just tasks to make inline-form errors even better.

Concerning #542 point 3:
$form_state->setErrorByName($upload_name, t('The file could not be uploaded.'));
The $upload_name value is not correct, so there will be no error on the form element.
Can be handled in separate issue.

No visual until last child has focus:
screenshot highlighting css deficiencies.

Steps to reproduce

Proposed resolution

Remaining tasks

Is this reproducible?

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#37 Screenshot From 2025-09-28 20-38-54.png28.33 KBrodrigoaguilera
#21 Screen Shot 2017-01-29 at 8.02.56 AM.png32.24 KBjaydubb181
#21 Screen Shot 2017-01-29 at 8.01.44 AM.png51.4 KBjaydubb181
#19 2687251-Radios-Checkboxes-focus-styling-wrong-when-marked-as-having-an-error.patch1.03 KBjaydubb181
#17 safari.png147.58 KBjaydubb181
#17 chrome.png54.16 KBjaydubb181
#17 firefox.png54.55 KBjaydubb181
#4 ife_radio_styling.png6.79 KBdmsmidt

Comments

mgifford created an issue. See original summary.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue summary: View changes
Issue tags: +Accessibility

I'm tagging this for accessibility as it's required to get inline form errors as a fully fledged part of Core.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

dmsmidt’s picture

dmsmidt
he/him
Primary language Dutch
Location Amsterdam 🇳🇱🇪🇺
commented
Status: Active » Needs work
StatusFileSize
new ife_radio_styling.png6.79 KB

New image showing the current state in 8.3.x.

xjm’s picture

xjm
she/her
Primary language English
commented
Issue tags: +Needs accessibility review

So this has improved since release? Can we test the current state in 8.3.x and see if it meets accessibility guidelines?

dmsmidt’s picture

dmsmidt
he/him
Primary language Dutch
Location Amsterdam 🇳🇱🇪🇺
commented
Issue tags: -Needs accessibility review +Novice, +styling, +design, +admin interface

@xjm last I checked in 8.3.x it was still a problem (see screenshot in #4 with IFE enabled).

Behavior: a checkbox or radio will get a red square when it gets focus.

This styling is already in D8 core and is not a regression from patches introduced for Inline Form Errors. Therefore I think that is not an accessibility gate issue for IFE. By enabling IFE these type of fields become more accessible, because the user gets the error message below the field label. By default in D8 the user has no indicator at all that the field has validation problems.

It has been discussed in the UX meeting of November 22nd and considered not a blocker for IFE.
See: https://www.youtube.com/watch?v=flpmTx0HPvE - 26th minute.
The solution discussed is removing the red square on focus and making the the text red.

xjm’s picture

xjm
she/her
Primary language English
commented

So the screenshot in #4 is without IFE enabled? Or can we compare it to one without IFE enabled?

xjm’s picture

xjm
she/her
Primary language English
commented

By the way, I'm fairly certain no accessibility maintainers were at that meeting, so that means it could not have had accessibility review. It's a separate signoff from usability.

dmsmidt’s picture

dmsmidt
he/him
Primary language Dutch
Location Amsterdam 🇳🇱🇪🇺
commented
Issue tags: +Needs accessibility review

Readding tag. @xjm you are correct, I'll contact them and clarify this issue later with images.

Note: if you remove the error message from the image in #4 you have the image for d8 without IFE.

xjm’s picture

xjm
she/her
Primary language English
commented

@dmsmidt, thanks! In that case I agree this is probably not a blocker for IFE's stability (unless an accessibility maintainer says it needs to). The bug does become slightly more noticeable with IFE enabled, though, so we should still include it on the roadmap as a non-blocker.

xjm’s picture

xjm
she/her
Primary language English
commented
Status: Needs work » Active

Marking Active, since there is not a patch yet.

mgifford’s picture

mgifford
he/him
Primary language English
commented

I'm trying to think of what the accessibility implications of this might be. So far I can't think of one other than user interface inconsistencies.

There are no changes proposed for the semantic markup, right?

dmsmidt’s picture

dmsmidt
he/him
Primary language Dutch
Location Amsterdam 🇳🇱🇪🇺
commented

@mike, nope no markup changes. The idea is to just style the words behind the checkboxes red and get rid of this blurry red square.

mgifford’s picture

mgifford
he/him
Primary language English
commented

+1 - that should make it much easier to see. Good stuff.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

jaydubb181’s picture

jaydubb181 commented

I'm looking into this.

jaydubb181’s picture

jaydubb181 commented
StatusFileSize
new firefox.png54.55 KB
new chrome.png54.16 KB
new safari.png147.58 KB

I installed the 8.4.x-dev this morning. I'm unable to reproduce this issue in Chrome Version 55.0.2883.95 (64-bit), Safari 10.0.3, and Firefox 48.02.2 on the latest version of OSX 10.0.3.

Firefox:

Chrome:

Safari:

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +SprintWeekend2017a11y, +SprintWeekend2017

I do think the description of this issue could use some more work.

From #13 @dmsmidt is talking "just styl[ing] the words behind the checkboxes red and get rid of this blurry red square."

We need a patch that changes the CSS so that it highlights more than just the checkbox. It needs to be more visible.

jaydubb181’s picture

jaydubb181 commented
Status: Active » Needs review
StatusFileSize
new 2687251-Radios-Checkboxes-focus-styling-wrong-when-marked-as-having-an-error.patch1.03 KB

I've modified the CSS in the seven theme to take the "blurry red square" off of the checkboxes and radio buttons and to changed the color of the label text to red.

mgifford’s picture

mgifford
he/him
Primary language English
commented

Can you provide a screenshot too @jaydubb181 - Thanks!

jaydubb181’s picture

jaydubb181 commented
StatusFileSize
new Screen Shot 2017-01-29 at 8.01.44 AM.png51.4 KB
new Screen Shot 2017-01-29 at 8.02.56 AM.png32.24 KB

@mgifford

I've attached 2 additional screenshots.

IFE Enabled:

IFE Disabled:

dmsmidt’s picture

dmsmidt
he/him
Primary language Dutch
Location Amsterdam 🇳🇱🇪🇺
commented
Status: Needs review » Postponed

@jay great work, the images look a lot better. Could you have a look the following?
We have a possible duplicate here: #222380: No error highlighting on form checkbox or radio input types. We just have to check if that one also fixes the focus styling.
Thus, postponing until we know more.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture

mgifford
he/him
Primary language English
commented

@dmsmidt given that #222380: No error highlighting on form checkbox or radio input types is still not fixed. Should this still sit as postponed?

quietone’s picture

quietone commented
Issue summary: View changes
Status: Postponed » Active

The issue in #35 has been closed as cannot reproduce, therefor setting this to active.

rodrigoaguilera’s picture

rodrigoaguilera
Primary language Spanish
Location Madrid
commented
Issue tags: -Novice
StatusFileSize
new Screenshot From 2025-09-28 20-38-54.png28.33 KB

I think this a difficult issue to figure out for a novice

I did a quick verification and it seems the radios have proper focus styling now in claro

Focus on radios

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.