Form Label uses pointer

[w33ble]

Is there a reason that eui form labels use a pointer?

There are no click handlers in the component. Clicking them is futile.

[chandlerprall]

Most labels are connected to the associated inputs (browsers have this functionality built in based on the label's for and the input's id attributes). In most uses, the label is clickable and will simply shift focus to its input.

I agree that the cursor should not be a pointer in your situation.

@snide maybe move the cursor rule to a .euiFormLabel[for] {} block so it only applies when the label has a for attribute?

[w33ble]

Seems like some kind of parent/child component to handle the click linking would work here, so you could still link clicking on the label with focus a given input.

I'd be fine with just being able to opt out of the pointer cursor via an arg too.

[snide]

@chandlerprall That would probably work.

Labels should always be clickable and focus the input / element you are applying it towards. Are you applying correct id/for attributes in your markup @w33ble?

Also, those don't look like our labels fwiw. What does your rainbow item do? Does it accept focus? I assume those are separate buttons so they can be accessible? You'll need something to map the context.

[w33ble]

Are you applying correct id/for attributes in your markup @w33ble?

Probably not. Are there docs for this anywhere? I couldn't find them on the docs site, so I'm not actually sure how to use the component correctly. Also, the form control for the label isn't a real form control, so it wouldn't do anything natively, we'd have to wire it up manually.

[snide]

@w33ble The EuiFormRow stuff does the parent/child auto ids you mention. It'll require your inner item to be able to accept focus though. I'm gonna bet that widget doesn't and isn't accessible so might be something you want to look into separately.

https://elastic.github.io/eui/#/forms/form-layouts

Use the EuiFormRow component to easily associate form components with labels, help text, and error text. Use the EuiForm component to group EuiFormRows.

Beyond that, id/for is standard HTML. I don't know that we'd doc it.

I'll make the CSS fix @chandlerprall suggested though. I think that's a good solution for the cursor issue.

[w33ble]

It looks like somehow the for attribute is being set automatically, perhaps from some parent component (EDIT: yup)? So using the selector, while a step in the right direction, doesn't really solve the issue for us.

I'm certain we're using it wrong, but I don't know what we need to do to make it right.

[snide]

Sec, I'll build you a quick demo.

[snide]

https://codesandbox.io/s/8yz3npzool

You'd do it this way if you wanted to avoid the visual glitch. Basically instead of using the magic labeling, you can just individually construct it from the plain components. It requires you to wire up your for/to or aria-describedby properties on your own though.

[snide]

And of course manage the state of the focus on your own if you wanted the labels to turn blue.

[snide]

Closing this in place of #826 which better details the issue