Range FAPI element has inconsistent style between browsers, including error state.

Hi,

May I know which module you used for range apart from the inline form errors to reproduce this issue? or let me know the steps to replicate this issue.

Thanks, Dinesh

@dinesh_kesarkar - Drupal core provides a Form API range element, but it isn't used in Drupal core modules. For testing inline form errors, we have been using the Error Style module (hosted on GitHub).

When enabled, you can visit /error-style/form to see an example form with all the core form fields. When submitted, every field is marked with an error. It works with or without the Inline Form Errors module.

@Suesdesign - thanks for your first Drupal bug report!

@andrewmacpherson - thank you for this clarification in details. I tried that module at my local & I am able to reproduce the red outline error.

When I tried @Suesdesign's #2 code in classy then I noticed that, red outline is getting applied to the range field in firefox & chrome as well (see in attachment).

What is the expected result here ? the red outline should be demolished in firefox or it should get displayed in all search engines?

Thanks, Dinesh

@dinesh_kesarkar - thanks fir trying to replicate this.

I've realized there's one more thing for the steps to reproduce - @Suesdesign mentions....

The module inline form errors was installed and the latest patch to fix issues with forms applied.

That refers to the patch being worked on for #2848507: Indicate that grouping elements have child element errors for ux and a11y - we were testing that patch in all browsers, during the Global Contribution Weekend. That issue is actually about the the appearance of the vertical tabs and details, and the range slider is just something we noticed along the way. I asked @Suesdesign to grab screenshots and file an issue, so we could address it later.

Your screenshots were presumably made without the patch from #2848507: Indicate that grouping elements have child element errors for ux and a11y, because we forgot to mention it :-)
But that's super usefull, because it tells us that before that patch, Chrome and Firefox had a red box outline, and after it only Firefox had the red outline.

I don't really know what the expected result is. I think it might be fair to say that we neglected to design an error style for the range slider? Range exists as a Form API element, but it isn't mentioned on the Seven theme style guide. Since range isn't actually used in core modules (just in some test modules) it escaped our notice until now.

I'll mention it at the other issue, but hopefully we can address range errors in this separate issue.

Hi @Suesdesign @andrewmacpherson,

Just now I installed latest drupal version on my local that is 8.6.9 & I observed that, there is no red outline error around the range field though its having border to the .form-iteminput.error class in both search engine. I am trying to reproduce it on windows 10 with Chrome 72.0.3626.109 & Firefox 65.0.1 (64-bit) & this without #2848507: Indicate that grouping elements have child element errors for ux and a11y patch. Please see the attachments.

Thanks, Dinesh

Updating the title, because we've learned that the range element didn't have an intended design in the first place.
In the screenshots we have so far, we also see a variety of different range slider handle styles.

Maybe this issue can be about devising a style for range elements in Seven/Bartik, or at least some level of consistency for the error styles.

As far as WCAG goes, this isn't an outright accessibility failure. In the WCAG 3.3 Input Assistance guideline group, we have implemented the following "sufficient techniques" (WCAG terminology):

• G83: Providing text descriptions to identify required fields that were not completed
• G84: Providing a text description when the user provides information that is not in the list of allowed values
• ARIA2: Identifying a required field with the aria-required property

Filed an issue to include a design for the range input in the next D8 dmin theme (Claro).
This issue can be scoped to Seven and Bartik.

Hi @Suesdesign @andrewmacpherson,

I have created couple of patches which has two situation, if you look at adding outline patch where I have changed some css which gives output as expected that means adding error outline around range field but also added same to the radio buttons & checkbox as shown in screenshots. If this is acceptable then we can apply this patch to the core.

In another patch, I have removed those outlines from the radio buttons & checkbox which also can get apply to the core as shown in screenshot.

Please have a look on those two patches & don't hesitate to correct me if any.

I am using windows 10.

Thanks, Dinesh

I have added the issue template and added a few items to the issue summary. I have not done a complete update of the Issue Summary.

The patch no longer applies, so adding tag for re-roll. And this will need screenshots in the issue summary as well.

Both patches of #11 against version 9.5x

Rerolled patch against #24

Rerolled patch against #11 for drupal 9.4.4

Re-rolled patch.

Fix issue in patch 28
Rerolled patch against #11 for drupal 9.4.4

Ok, so @andrewmacpherson you don't think we can assign this with a WCAG SC 3.3.1 or 3.3.3 failure.

Changing the version to D9 since the patch targets themes which are removed in D10 and there is a separate ticket for the same.

I have updated the patch to update form hash