Required MDC Textfield without label

[berets76]

Bugs|Feature Requests

I'm undecided between bug and feature request: basically is a different behavior compared to MDL (and its "rules and principles"). I looked for a previous discussion without results.

What MDC-Web Version are you using?

0.9.1

What browser(s) is this bug affecting?

All, latest versions

What OS are you using?

Windows 10 (64 bit)

What are the steps to reproduce the bug?

Every MDC Textfields, with a required input, but without a mdc-textfield__label within the mdc-textfield (eg. mdc-textfield--fullwidth) are not marked in any way, so users cannot distinguish mandatory and not. In MDL, as you can see at the following jsfiddle, required fields have the bottom-border set to $mdc-textfield-error-on-light (or dark).

Actual MDL behavior (with and without label)

Tha main difference is that MDL uses a <label> tag as watermark, instead MDC uses the placeholder attribute, so actual CSS rule (that add an "*" after the label content)

.mdc-textfield__input:required + .mdc-textfield__label::after {
  margin-left: 1px;
  content: "*";

  .mdc-textfield--focused & {
    color: $mdc-textfield-error-on-light;
  }

  @include mdc-theme-dark(".mdc-textfield") {
    .mdc-textfield--focused & {
      color: $mdc-textfield-error-on-dark;
    }
  }
}

doesn't works.

I understand that without a CSS parent selector is really difficult to replicate MDL behavior, unless using javascript (my actual workaround). Waiting for a decent performance, fully supported :has() selector, a way could be to add an "*" after the placeholder content to identify required fields, but access the placeholder requires polyfills.

So I don't know =/

What is the expected behavior?

Required fields (without a mdc-textfield__label within the mdc-textfield) should have the bottom-border set to $mdc-textfield-error-on-light (or dark).

What is the actual behavior?

Required fields (without a mdc-textfield__label within the mdc-textfield) aren't marked in any way.

Any other information you believe would be useful?

[traviskaufman]

If I understand your issue correctly, it seems like you're saying that there's no way to explicitly tell when a label-less text field (e.g. a full-width text field) is required. I'll follow up with design and see if I can get some clarification there, then we can discuss next steps.

[berets76]

Exactly. Not sure it's an issue, but migrating an MDL project to MDC I noticed the different behavior.

Waiting for news, thanks.

[Garbee]

The expected behavior of simply changing the color of a border isn't a good solution. For anyone who is completely color blind, they won't know the difference. Along with various other forms of color blindness could cause indistinguishable colors.

A label node should be essentially required for accessibility. If a user is going to not have a label then they'll need to take into account not having one in their own UX.

[berets76]

Therefore the ideal solution would be to adopt the MDL structure : a label used as watermark and not the placeholder attribute.

But I'm afraid it's a heavy change

[abhiomkar]

This is already implemented. See https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield#text-field-without-label for details.