Refactor form styling

My main concern is the noticeability of the focus states in high contrast mode. I'm going to ping the accessibility maintainers in the #accessibility channel in Drupal slack to weigh in.

Some comments from https://drupal.slack.com/archives/C2ANFUGGG/p1590154141261800

R Mazur:

I've got pretty good eyes and I couldn't see it before I read what it was. ¯\_(ツ)_/¯

rain:

It is quite subtle. It may be worth exploring more obvious treatments

andrewmacpherson:

These technically pass WCAG SC 2.4.7 Focus Visible... in the letter of the law.

andrewmacpherson:

But I think they're poor too.

andrewmacpherson:

The dotted outline isn't any thicker than the exisitng line, and it directly adjoins the existing line. So the overall effect is that it changes from a crisp line, to a somewhat fuzzy line.
Suggested improvements (use more than one):

• Use an outline-offset of a couple of pixels, so it becomes a double line. Unfortunately outline-offset doesn't work in IE. The effect can be implemented with an absolutely positioned ::after:focus box.
• Use something more substantial as the focus line. Solid or dashed is stronger than dotted.
• Use a thicker outline, so the overall shape change is just bigger

andrewmacpherson:

Like Rain an RMazur say, it's too subtle. Subtle just doesn't work for focus styles.

andrewmacpherson:

Windows high-contrast is effectively assistive tech, which someone decides to turn on. If they turned on Win HC, they almost certainly have an impairment such as:

• low vision
• attention difficulties
• dyslexia (shape recognition plays a role here)
• Washed out ambient light

This is great work! I've found a couple issues

1) testing generic form styling (there isn't much)
2) in Firefox in Windows high contrast mode. Note that accessibility maintainer @andrewmacpherson specifically called out this use case in previous issues.

Below is a screenshot from a mailchimp form embedded within a site running Olivero. We expect the form elements to be styled.

Below is screenshot from Firefox in high contrast mode. Focus states are good, but there are no left/right borders. This is confusing (the labels almost look like placeholders...). In addition the select element does not have a down arrow.

yeah.. I really struggled with FF in high contrast mode with the search form (and there has since been a regression).

I fear leaving FF high contrast broke is a non-starter for inclusion in Drupal 8 core. The accessibility gate is very stringent (which is a good thing).

I'll hack away at your patch later today. What I did earlier is shrink padding on focus to account for the border width. There may be other options too (such as setting box-sizing to content-box) that we can experiment with. The hard part is all of these old browsers in esoteric use-cases... but this theme will (hopefully) be used by so many people that we need to do our best to account for it.

Thanks so much for working on this.

I found the magical combination that works with everything. Tested in high contrast with IE11, Edge 44, and FF 76. Also seems to work in Chrome, Safari in normal use cases without shifting layout:

input {
  outline: solid 1px transparent;

  &:focus {
    outline: 4px solid transparent;
  
    @supports (outline-style: double) {
      outline-style: double;
    }
  }
}

Gonna hack at this today. Not sure I have much time to do so.

Ended up changing the focus outline to dashed. It's much more apparent.

Also, note that the multiple backgrounds with linear gradients do not work in FF in high contrast mode.

 background:
    var(--form-element-select-icon) no-repeat right var(--form-element-select-icon-right-offset) top var(--form-element-select-icon-top-offset),
    linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
    linear-gradient(to left, var(--color--gray-30) var(--form-element-select-border-size-right), transparent var(--form-element-select-border-size-right), transparent 100%) var(--color--gray-95);

However, the single background image of the chevron works fine.

  background:
    var(--form-element-select-icon) no-repeat right var(--form-element-select-icon-right-offset) top var(--form-element-select-icon-top-offset);

A couple notes about getting the select element to render properly in FF in high contrast mode:

Firefox will not render any background image if one of them has a linear gradient. This means we cannot use linear gradients where we need the chevron (because the only way that we can render the chevron is via a background image)

We cannot use box-shadow inset to render the background of the chevron... it appears in front of it and obscures it.

The only way that I found to render the solid background of the chevron is by calling another image (a small svg).

:root {
  --form-element-select-icon: url("../../../images/chevron-down.svg");
  --form-element-select-bg: url("../../../images/select-chevron-bg-default.svg");
  --form-element-select-bg--highlight: url("../../../images/select-chevron-bg-highlight.svg");
}

select {
  background:
    var(--form-element-select-icon) no-repeat right var(--form-element-select-icon-right-offset) center,
    var(--form-element-select-bg) no-repeat right 0 top 0,
    var(--form-element-select-bg) no-repeat left -48px top 0;

  &:hover,
  &:focus {
    background:
      var(--form-element-select-icon) no-repeat right var(--form-element-select-icon-right-offset) center,
      var(--form-element-select-bg--highlight) no-repeat right 0 top 0,
      var(--form-element-select-bg--highlight) no-repeat left -48px top 0;
  }
}

Note I'm using the same exact SVG to render the left border. This is because if I use the "border-left" property, the top and the bottom of the borders are angled to blend with the transparent top and bottom borders.

Adding some updated patches. Note the interdiff doesn't include the css/dist directory.

Still lots of work to do including error and disable statuses on select elements as well as the small version of that. But everything's working overall. Just needs lots of cleanup.

Got a bit more work done in the error states. I'm going to work on this tomorrow also. I want to get this committed and release alpha2 on monday if at all possible.

I got everything working based off of the patch in #8. There were a lot of issues with FF in high contrast mode including text input focus states, select arrows, and radio and checkbox not showing the unchecked state properly.

Patches attached.

I forgot to change the border color on the select element's focus state. Updated patches attached.

Updating patch and interdiff!

I personally think the IE11 styling is fine. It's completely usable.

yeah, the config changes snuck in the patch.

I missed the part about text not being aligned vertically. Fix incoming.

Updating patches to take into account the centering the text. Note the interdiff doesn't include removing the config.

Decreasing the line-height causes some vertical alignment issues. Conceptually, you're correct, though. I think it's because the font isn't rendering in the center of its line-height. Not 100% sure though.

I'm committing as-is, we can follow up if we find a better way.

Committed this. Let's open up a followup if the select is out of alignment, or if there's a better way to do it.

@andypost are you seeing the select elements out of alignment? If so, what browsers?